import { FC, useCallback, useEffect, useMemo, useState } from "react";
import { Card } from "venice-ui";
import { Content, ContentWrapper } from "../../components/components";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";
import { apiCall } from "../../untils/apiCall";
import { LoadingContent } from "../../components/layouts/Loading";
import { useStoreActions, useStoreState } from "../../store";
import { DemoUsers } from "../../components/Demo/DemoUsers";
import { useParams } from "react-router";
import { Tabs } from "../../components/UI/Tabs";
import { DemoOrganizations } from "../../components/Demo/DemoOrganizations";
import { AddOrgModal } from "../../components/Modals/AddOrgModal";

export const DemoManagment: FC = () => {
  const { tab, action } = useParams<{ tab: string; action: string }>();
  const { uid } = useStoreState((state) => state.user.userDetails);
  const setDemoData = useStoreActions((actions) => actions.demo.setDemoData);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState(tab || "users");
   const [showAddOrgModal, toogleShowAddOrgModal] = useState(!!action);

  const getDemoData = useCallback(async () => {
    setLoading(true);

    try {
      await apiCall("demoManagment/getDemoData", { uid }, (response: any) => {
        const dateFields = [
          "reguestDate",
          "invitationDate",
          "demoStartDate",
          "demoEndDate",
        ] as const;

        const demoUsers = response.demoUsers.map((demoUser: any) => {
          const normalizedUser = { ...demoUser };

          dateFields.forEach((field) => {
            if (normalizedUser[field] === 0) {
              normalizedUser[field] = null;
            }
          });

          return normalizedUser;
        });

        setDemoData({
          ...response,
          demoUsers,
        });
      });
    } finally {
      setLoading(false);
    }
  }, [uid]);

  useEffect(() => {
    getDemoData();
  }, [getDemoData]);

  const demoTabs = useMemo(() => {
    const tabs = [
      {
        value: "users",
        label: t(dictionary.users),
      },
      {
        value: "orgs",
        label: t(dictionary.orgs),
      },
    ];
    return tabs;
  }, []);

  const getHeaderLabel = () => {
    if (activeTab === "orgs") {
      return t(dictionary.addOrg);
    }
    return undefined;
  };
 

  const showAddOrgModalHandler = () => {
    toogleShowAddOrgModal(true);
  };

  const getHeaderAction = () => {
    if (activeTab === "orgs") {
        showAddOrgModalHandler();
    }
    return undefined;
  };

  if (loading) {
    return <LoadingContent />;
  }

  return (
    <Content>
      <Card
        title={t(dictionary.organization)}
        shadow={false}
        actionLabel={getHeaderLabel()}
        componentHeight="calc(100vh - 4rem)"
        handleClick={getHeaderAction}
        noVerticalPadding={true}
      >
        <ContentWrapper componentHeight="calc(100vh - 10.4rem)">
          <Tabs
            tabs={demoTabs}
            activeValue={activeTab}
            onClick={setActiveTab}
          />

          <ContentWrapper componentHeight="calc(100vh - 14.4rem)">
            {activeTab === "users" && <DemoUsers />}
            {activeTab === "orgs" && <DemoOrganizations />}
          </ContentWrapper>
        </ContentWrapper>
      </Card>
      {showAddOrgModal && <AddOrgModal onClose={() => toogleShowAddOrgModal(false)} isOpen={showAddOrgModal} />}
    </Content>
  );
};