import { Fragment, useEffect, useState } from "react";
import { ArrowUpRightIcon } from "@heroicons/react/16/solid";
import PageHeader from "../Containers/PageHeader";
import PageContent from "../Containers/PageContent";
import BlockStack from "../Containers/BlockStack";
import InlineStack from "../Containers/InlineStack";
import Badge from "../Containers/Badge";
import Card from "../Containers/Card";
import BreadCrumbs from "../Menu/BreadCrumbs";
import { useNavigate } from "react-router-dom";
import {
  getGmailAccount as getGmailAccountUtil,
  disconnectGmailAccount,
  getGmailConnectURL,
} from "../../utilities/accounts";
import PageWrapper from "./PageWrapper";
import GmailConnectModalContent from "../Containers/GmailConnectModalContent";
import ModalShell from "../Modals/ModalShell";
const EmailsPage = ({ onPageSelect = () => {} }) => {
  const navigate = useNavigate();
  const [account, setAccount] = useState(null);
  const [isAccountFetched, setAccountFetched] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [gmailConfirmed, setGmailConfirmed] = useState(false);
  const getGmailAccount = async () => {
    const { data } = await getGmailAccountUtil();
    if (data) {
      if (data.email) setAccount(data);
      setAccountFetched(true);
    }
  };
  const handleRemoveAccount = async () => {
    await disconnectGmailAccount();
    setAccount(null);
  };
  const handleGetConnectURL = async () => {
    await getGmailConnectURL();
  };
  useEffect(() => {
    getGmailAccount();
  }, []);
  const badge = () => (
    <div className="flex flex-row gap-2 items-center">
      <Badge
        background="gray"
        text={account ? "Connected" : "Not connected"}
        icon=""
        justify={"start"}
      />
      <span>{account ? account.email : "Please connect your account"}</span>
    </div>
  );
  const handleBreadCrumbsClick = () => {};
  return (
    <PageWrapper withBackground={true}>
      <div className="dashboard-card">
        <div className="servv-dashboard-header">
          <div className="dashboard-heading">
            <h1 className="dashboard-title">Email</h1>
            <div className="dashboard-description">
              <BreadCrumbs
                breadcrumbs={[
                  {
                    label: "Integrations",
                    action: () => navigate("../integrations"),
                  },
                  { label: "Emails", action: () => {} },
                ]}
                onBreadCrumbClick={handleBreadCrumbsClick}
              />
            </div>
            {/* <p className="page-header-description">
            {t(
              "Sync your event schedules effortlessly with Google Calendar or\r\n            Outlook to keep everyone informed."
            )}
          </p> */}
          </div>
        </div>
        <PageContent>
          <InlineStack gap={8} cardsLayout={true}>
            <Card padding={0} maxWidth="85%" align="center">
              <div
                className="servv-service-image"
                style={{
                  background: `linear-gradient(to bottom, transparent, #ECE4F6)`,
                }}
              >
                {account && (
                  <div className="connected-account bg-gradient-to-b from-transparent to-black/40">
                    <span>{t("Account")}</span>
                    <Badge text={badge()} justify={"start"} color="gray" />
                  </div>
                )}
              </div>
              <div className="card-content">
                <h2 className="card-section-heading">{t("Gmail")}</h2>
                <p className="section-description">
                  Automate email notifications and reminders through your Gmail
                  account to ensure smooth event communication
                  {/* {t(
                  "Sync and manage your Google Calendar account and settings."
                )}(*/}
                </p>
                {isAccountFetched && !account && (
                  <a
                    href="#"
                    className="servv-button-link"
                    onClick={(e) => {
                      e.preventDefault();
                      // handleGetConnectURL();
                      setShowModal(true);
                    }}
                  >
                    {t("Connect")}
                  </a>
                )}
                {isAccountFetched && account && (
                  <a
                    href="#"
                    className="servv-button-link"
                    onClick={(e) => {
                      e.preventDefault();
                      handleRemoveAccount();
                    }}
                  >
                    {t("Disconnect")}
                  </a>
                )}
              </div>
            </Card>
          </InlineStack>
        </PageContent>
        {showModal && (
          <ModalShell title="Connect Gmail" onClose={() => setShowModal(false)}>
            <GmailConnectModalContent
              gmailConfirmed={gmailConfirmed}
              setGmailConfirmed={setGmailConfirmed}
              handlerOnAccountAdd={handleGetConnectURL}
              closeModal={() => setShowModal(false)}
            />
          </ModalShell>
        )}
      </div>
    </PageWrapper>
  );
};
export default EmailsPage;