import React, { FC } from "react";
import { useNavigate } from "react-router-dom";
import { DropdownMenu, Text, Overline } from "venice-ui";
import { getAuth, signOut } from "firebase/auth";
import { Colors } from "../../untils/Theme";
import { t } from "../../helpers/userHelper";
import { appURL } from "../../untils/const";
import { dictionary } from "../../untils/dictionary";
import { useStoreActions, useStoreState } from "../../store";
import Cookies from "js-cookie";
import styled from "styled-components";

export const LogoutText = styled(Text)`
  cursor: pointer;
  &:hover {
    text-decoration: underline;
    color: ${Colors.primary_600};
  }
`;
export const Account: FC = () => {
  const navigate = useNavigate();
  const { email, orgRole } = useStoreState((state) => state.user.userDetails);
  const { clearUser } = useStoreActions((actions) => actions.user);
  const { clearProjects } = useStoreActions((actions) => actions.projects);
  const { resetProjectDetails } = useStoreActions(
    (actions) => actions.projectDetails,
  );
  const { clearOrgDetails } = useStoreActions(
    (actions) => actions.organization,
  );

  const auth = getAuth();
  const logout = () => {
    signOut(auth)
      .then(() => {
        sessionStorage.removeItem("lang");
        clearUser();
        clearProjects();
        resetProjectDetails();
        clearOrgDetails();
        Cookies.remove("idToken");
        window.location.href = appURL;
      })
      .catch((error) => {
        // An error happened.
      });
  };

  const links = [
    {
      action: () => navigate(`/settings`),
      label: t(dictionary.setting),
    },
  ];

  const Header = () => {
    return <Text>{email}</Text>;
  };
  const Footer = () => {
    return <LogoutText onClick={logout}>{t(dictionary.logout)}</LogoutText>;
  };
  return (
    <DropdownMenu
      iconName="account"
      size="lg"
      iconColor={Colors.white}
      iconBgHoverColor="transparent"
      iconHoverColor={Colors.seaBlue}
      header={<Header />}
      footer={<Footer />}
      options={links}
      zIndex={1100}
    />
  );
};