import { LogoutOutlined } from "@ant-design/icons";
import { auth } from "@renderer/util/firebase";
import { Button, Space, Typography } from "antd";
import { isEmpty } from "lodash";
import { JSX, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import ipcTypes from "../../../../util/ipcTypes.json";

const Welcome = (): JSX.Element => {
  const { t } = useTranslation();
  const [shopName, setShopName] = useState<string | null>(null);
  useEffect(() => {
    window.electron.ipcRenderer
      .invoke(ipcTypes.toMain.user.getActiveShop)
      .then((shopName: string) => {
        console.log("Active shop name:", shopName);
        setShopName(shopName);
      });
  }, []);

  return (
    <>
      <Typography.Title level={4}>
        {t("auth.labels.welcome", {
          name: isEmpty(auth.currentUser?.displayName)
            ? auth.currentUser?.email
            : `${auth.currentUser?.displayName} (${auth.currentUser?.email})`.trim(),
        })}
      </Typography.Title>
      <Space align="baseline">
        <Typography.Paragraph>{shopName || ""}</Typography.Paragraph>
        <Button
          size="small"
          danger
          icon={<LogoutOutlined />}
          onClick={(): void => {
            auth.signOut().catch((error) => {
              console.error("Sign out error:", error);
            });
          }}
        >
          {t("navigation.signout")}
        </Button>
      </Space>
    </>
  );
};

export default Welcome;
