import React, { FC, useEffect, useState } from "react";
import { useStoreActions, useStoreState } from "../../store";
import { Aligment, IListItem, List } from "venice-ui";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";
import { apiCall } from "../../untils/apiCall";
import { EmptyState } from "../UI/EmptyState";
import {
  OrganizationDetailsWrapper,
  OrganizationsWrapper,
} from "./organizations.style";
import { IAction } from "venice-ui/dist/types/types";
import { ContractDetailsPanel } from "./ContractDetailsPanel";
import { UserManagementInContract } from "../Modals/UserManagementInContract";
import { ContractModal } from "../Modals/ContractModal";
import { DeleteContractModal } from "../Modals/DeleteContractModal";
import {
  getContractAndProjectIds,
  getContracts,
  IChangeProps,
  projectNNameFromOrganization,
} from "../../helpers/organizationHelper";
import {
  AddProjectModal,
  DeleteProjectModal,
  EditProjectModal,
} from "../Modals";
import { IMemberAccess } from "../../store/interface/organization";
import { IProject } from "../../store/interface/projects";
import { ContentWrapper } from "../components";

interface IOrganizationsContracts {
  handleClick: () => void;
}

export const OrganizationsContracts: FC<IOrganizationsContracts> = ({
  handleClick,
}) => {
  const {
    id: orgID,
    contracts,
    members,
  } = useStoreState((state) => state.organization);
  const { uid } = useStoreState((state) => state.user.userDetails);
  const { updateContractsInUser } = useStoreActions((actions) => actions.user);

  const [data, setData] = useState({
    contractID: "",
    projectID: "",
    userMenagementModal: false,
    modalType: "",
    editModal: false,
  });

  const setIDs = (id: string) => {
    let contractID = "";
    let projectID = "";
    const findedContract = contracts.find(
      (_contract) => _contract.contractID === id,
    );
    if (findedContract) {
      contractID = findedContract.contractID;
      projectID = "";
    } else {
      contracts.forEach((_contract) => {
        const findedProject = _contract.projects?.find(
          (_project) => _project.projectID === id,
        );
        if (findedProject) {
          contractID = _contract.contractID;
          projectID = findedProject.projectID;
        }
      });
    }
    return { contractID, projectID };
  };

  const handleSelect = (id: string) => {
    const { contractID, projectID } = setIDs(id);
    if (contractID !== data.contractID || projectID !== data.projectID) {
      setData({ ...data, contractID, projectID });
    }
  };

  const [deleteContractModal, setDeleteContractModal] = useState({
    show: false,
    contractID: "",
  });

  const [deleteProjectModal, setDeleteProjectModal] = useState({
    show: false,
    contractID: "",
    projectID: "",
  });

  const [addProjectModal, setAddProjectModal] = useState({
    show: false,
    contractID: "",
  });

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

  const { updateProjects } = useStoreActions((actions) => actions.projects);

  const showUserManagementModal = (id?: string) => {
    if (id) {
      const { contractID, projectID } = setIDs(id);
      const type = projectID !== "" ? "project" : "contract";
      setData({
        ...data,
        contractID,
        projectID,
        userMenagementModal: true,
        modalType: type,
      });
    }
  };

  const hideUserManagementModal = () => {
    setData({ ...data, userMenagementModal: false, modalType: "" });
  };

  const showEditModal = (id?: string) => {
    if (id) {
      const { contractID, projectID } = setIDs(id);
      const type = projectID !== "" ? "project" : "contract";
      setData({
        ...data,
        contractID,
        projectID,
        editModal: true,
        modalType: type,
      });
    }
  };

  const hideEditModal = () => {
    setData({ ...data, editModal: false, modalType: "" });
  };

  const hideAddProjectModal = () => {
    setAddProjectModal({ show: false, contractID: "" });
  };

  const showDeleteContractModal = (id?: string) => {
    if (id) {
      setDeleteContractModal({ show: true, contractID: id });
    }
  };

  const hideDeleteContractModal = () => {
    setDeleteContractModal({ show: false, contractID: "" });
  };

  const showDeleteProjectModal = (id?: string) => {
    if (id) {
      const ids = getContractAndProjectIds(contracts, id);
      setDeleteProjectModal({
        show: true,
        contractID: ids.contractID,
        projectID: ids.projectID,
      });
    }
  };
  const hideDeleteProjectModal = () => {
    setDeleteProjectModal({
      show: false,
      contractID: "",
      projectID: "",
    });
  };

  const manageMember = async (changes: IChangeProps[]) => {
    const options = {
      orgID: orgID,
      changes: changes,
    };

    await apiCall(
      "organization/updateMemberInContract",
      options,
      (response: any) => {
        updateUserAccess(changes);

        changes.forEach((_change) => {
          if (_change.id === uid) {
            // update access in user => contracts
            updateContractsInUser({
              changes: _change.access as IMemberAccess[],
              contracts: response.contracts,
            });

            //update projects in projects => projects
            updateProjects({
              changes: _change.access as IMemberAccess[],
              projects: response.projects as IProject[],
            });
          }
        });

        hideUserManagementModal();
      },
    );
  };

  const handleUserManagement = (id?: string) => {
    if (id) {
      // handleSelect(id);
      showUserManagementModal(id);
    }
  };
  const handleEdit = (id?: string) => {
    if (id) {
      // handleSelect(id);
      showEditModal(id);
    }
  };

  const handleDelete = (id?: string) => {
    const ids = getContractAndProjectIds(contracts, id!);
    if (ids.projectID !== "") {
      showDeleteProjectModal(ids.projectID);
    } else {
      showDeleteContractModal(ids.contractID);
    }
  };

  const handleAddProject = (id?: string) => {
    if (id) {
      setAddProjectModal({ show: true, contractID: id });
    }
  };

  const contractActions: IAction[] = [
    {
      label: t(dictionary.userManagement),
      action: handleUserManagement,
    },
    {
      label: t(dictionary.addProject),
      action: handleAddProject,
    },
    {
      label: t(dictionary.changeName),
      action: handleEdit,
    },

    {
      label: t(dictionary.deleteContract),
      action: showDeleteContractModal,
    },
  ];
  const projectActions: IAction[] = [
    {
      label: t(dictionary.userManagement),
      action: handleUserManagement,
    },
    {
      label: t(dictionary.editProject),
      action: handleEdit,
    },
    {
      label: t(dictionary.deleteProject),
      action: showDeleteProjectModal,
    },
  ];

  const [contractList, setContractList] = useState<IListItem[]>(
    getContracts(contracts, members),
  );

  useEffect(() => {
    setContractList(getContracts(contracts, members));
  }, [contracts, members]);

  return (
    <>
      {contracts.length > 0 ? (
        <Aligment>
          <OrganizationsWrapper>
            <ContentWrapper componentHeight="calc(100vh - 16.6rem)">
              <List
                isCollapsable={true}
                isSelectable={true}
                isStatusable={true}
                haveMoreOptions={true}
                items={contractList}
                handleChange={setContractList}
                handleSelect={handleSelect}
                selected={
                  data.projectID !== "" ? data.projectID : data.contractID
                }
                levelActions={[
                  { level: 0, moreActions: contractActions },
                  { level: 1, moreActions: projectActions },
                ]}
              />
            </ContentWrapper>
          </OrganizationsWrapper>
          <OrganizationDetailsWrapper>
            <ContractDetailsPanel
              contractID={data.contractID}
              projectID={data.projectID}
              handleDelete={handleDelete}
              handleAddModal={showUserManagementModal}
              handleEditModal={showEditModal}
              handleAddProject={handleAddProject}
            />
          </OrganizationDetailsWrapper>
        </Aligment>
      ) : (
        <EmptyState
          title={t(dictionary.emptyStateContractsListTitle)}
          actionLabel={t(dictionary.addContract)}
          action={handleClick}
        />
      )}

      {data.userMenagementModal && (
        <UserManagementInContract
          contractID={data.contractID}
          projectID={data.projectID}
          type={data.modalType}
          handleCancel={hideUserManagementModal}
          handleConfirm={manageMember}
          isOpen={data.userMenagementModal}
        />
      )}
      {data.editModal && (
        <>
          {data.modalType === "contract" ? (
            <ContractModal
              handleClose={hideEditModal}
              contractID={data.contractID}
              isOpen={data.editModal}
            />
          ) : (
            <EditProjectModal
              onClose={hideEditModal}
              projectID={data.projectID}
              show={data.editModal}
            />
          )}
        </>
      )}
      {deleteContractModal.show && (
        <DeleteContractModal
          id={deleteContractModal.contractID}
          handleCancel={hideDeleteContractModal}
          isOpen={deleteContractModal.show}
        />
      )}

      {addProjectModal.show && (
        <AddProjectModal
          onClose={hideAddProjectModal}
          contractID={addProjectModal.contractID}
          show={addProjectModal.show}
        />
      )}
      {deleteProjectModal.show && (
        <DeleteProjectModal
          handleCancel={() => hideDeleteProjectModal()}
          id={deleteProjectModal.projectID}
          name={projectNNameFromOrganization(
            contracts,
            deleteProjectModal.projectID,
          )}
          isOpen={deleteProjectModal.show}
        />
      )}
    </>
  );
};