import React, { FC, useCallback, useEffect, useMemo, useState } from "react";
import { Content, ContentWrapper } from "../../components/components";
import { Card } from "venice-ui";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";
import { OrganizationDetails } from "../../components/Organization/OrganizationDetails";
import { apiCall } from "../../untils/apiCall";
import { useStoreActions, useStoreState } from "../../store";
import { OrganizationUsers } from "../../components/Organization/OrganizationUsers";
import { OrganizationsContracts } from "../../components/Organization/OrganizationsContracts";
import { Tabs } from "../../components/UI/Tabs";
import { useParams } from "react-router-dom";
import { ContractModal } from "../../components/Modals/ContractModal";
import { UserLimitModal } from "../../components/Modals/UserLimitModal";
import { UserModal } from "../../components/Modals/UserModal";
import { checkUserLimit } from "../../helpers/organizationHelper";
import { ListsSettings } from "../../components/Organization/ListsSettings";
import { EmptyState } from "../../components/UI/EmptyState";
import { LoadingContent } from "../../components/layouts/Loading";

export const Organization: FC = () => {
  const { tab, action } = useParams();

  const { orgID } = useStoreState((state) => state.user.userDetails);
  const { members, planKey, invitations } = useStoreState(
    (state) => state.organization,
  );

  const { setOrgDetails } = useStoreActions((actions) => actions.organization);

  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState(tab || "org");

  const [showContractModal, toogleShowContractModal] = useState(!!action);
  const [showUserModal, toogleShowUserModal] = useState(false);

  const getOrgDetails = useCallback(async () => {
    if (!orgID) {
      return;
    }

    setLoading(true);

    await apiCall(
      "organization/getOrganizationDetails",
      {
        orgID,
      },
      (response: any) => {
        console.log("response", response);
        setOrgDetails(response.details);
        setLoading(false);
      },
    );
  }, [orgID, setOrgDetails]);

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

  const hideAddContractModal = () => {
    toogleShowContractModal(false);
  };

  const showAddContractModal = () => {
    toogleShowContractModal(true);
  };

  const hideUserModalModal = () => {
    toogleShowUserModal(false);
  };

  const showUserModalModal = () => {
    toogleShowUserModal(true);
  };

  const getHeaderAction = () => {
    if (activeTab === "contrats") {
      showAddContractModal();
    } else if (activeTab === "users") {
      showUserModalModal();
    }
  };

  const getHeaderLabel = () => {
    if (activeTab === "contrats") {
      return t(dictionary.addContract);
    }

    if (activeTab === "users") {
      return t(dictionary.addUser);
    }

    return undefined;
  };

  const orgTabs = useMemo(() => {
    const tabs = [
      {
        value: "org",
        label: t(dictionary.details),
      },
      {
        value: "users",
        label: t(dictionary.users),
      },
      {
        value: "contrats",
        label: t(dictionary.contracts),
      },
      {
        value: "list_setting",
        label: t(dictionary.listsSettings),
      },
    ];

    return tabs;
  }, []);

  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={orgTabs} activeValue={activeTab} onClick={setActiveTab} />

          <ContentWrapper componentHeight="calc(100vh - 14.4rem)">
            {activeTab === "org" && <OrganizationDetails />}
            {activeTab === "users" && <OrganizationUsers />}
            {activeTab === "contrats" && (
              <OrganizationsContracts handleClick={showAddContractModal} />
            )}
            {activeTab === "list_setting" && <ListsSettings />}
          </ContentWrapper>
        </ContentWrapper>
      </Card>

      {showContractModal && (
        <ContractModal
          handleClose={hideAddContractModal}
          isOpen={showContractModal}
        />
      )}

      {showUserModal &&
        (checkUserLimit(
          planKey,
          members.filter((_member) => _member.status !== "deleted").length +
            invitations.length,
        ) ? (
          <UserModal handleClose={hideUserModalModal} isOpen={showUserModal} />
        ) : (
          <UserLimitModal
            handleClose={hideUserModalModal}
            isOpen={showUserModal}
          />
        ))}
    </Content>
  );
};