import React, { FC, useEffect, useState } from "react";
import { Aligment, Icon, Section, Text } from "venice-ui";
import { Colors } from "../../untils/Theme";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import {
  DetailsPanelText,
  MemberDetailsPanelContent,
  MemberPanelContent,
  PanelSectionHeader,
} from "./organizations.style";
import { useStoreActions, useStoreState } from "../../store";
import { getContractMembers } from "../../helpers/organizationHelper";
import { MemeberList } from "../ContractDetails/MemeberList";
import {
  DetailPanelContent,
  DetailPanelWrapperFooter,
  DetailPanelWrapperHeader,
} from "../ItemDetailPanel/ItemDetailsPanel.styles";

interface IContractDetailsPanel {
  contractID: string;
  projectID?: string;
  handleDelete: (memberID: string) => void;
  handleAddModal: (contractID: string) => void;
  handleEditModal: (contractID: string) => void;
  handleAddProject: (contractID: string) => void;
}
export const ContractDetailsPanel: FC<IContractDetailsPanel> = ({
  contractID,
  projectID,
  handleDelete,
  handleAddModal,
  handleEditModal,
  handleAddProject,
}) => {
  const { members, contracts } = useStoreState((state) => state.organization);

  const id = projectID && projectID !== "" ? projectID : contractID;

  const [contractMemers, setContractMembers] = useState(
    getContractMembers(contractID, members, projectID),
  );

  const userManagementInContract = () => {
    handleAddModal(id);
  };

  const contractEdit = () => {
    handleEditModal(id);
  };

  const deleteContract = () => {
    handleDelete(id);
  };

  const addProject = () => {
    handleAddProject(contractID);
  };
  useEffect(() => {
    if (contractID !== "") {
      setContractMembers(getContractMembers(contractID, members, projectID));
    }
  }, [contractID, contracts, members, projectID]);

  const ifProject = () => {
    return projectID && projectID !== "";
  };
  return (
    <MemberPanelContent>
      {contractID === "" ? (
        <Aligment style={{ height: "100%" }}>
          <DetailsPanelText>
            <Text> {t(dictionary.emptyContractMembers)}</Text>
          </DetailsPanelText>
        </Aligment>
      ) : (
        <>
          <PanelSectionHeader>
            {ifProject()
              ? t(dictionary.projectMembers)
              : t(dictionary.contractMembers)}
          </PanelSectionHeader>
          <MemberDetailsPanelContent>
            <MemeberList orgMembers={contractMemers} />
          </MemberDetailsPanelContent>
          {id !== "" && (
            <DetailPanelWrapperFooter id="footer" isSingle={false}>
              <Icon
                name="people_group_check"
                size={"lg"}
                color={Colors.appBlue}
                hoverColor={Colors.seaBlue}
                onClick={userManagementInContract}
                hoverBackground="transparent"
                background="transparent"
                tooltip={t(dictionary.userManagement)}
                isDisabled={false}
              />
              {!projectID && (
                <Icon
                  name="note_add"
                  size={"lg"}
                  color={Colors.appBlue}
                  hoverColor={Colors.seaBlue}
                  onClick={addProject}
                  hoverBackground="transparent"
                  background="transparent"
                  tooltip={t(dictionary.addProject)}
                  isDisabled={false}
                />
              )}
              <Icon
                name="note_edit"
                size={"lg"}
                color={Colors.appBlue}
                hoverColor={Colors.seaBlue}
                onClick={contractEdit}
                hoverBackground="transparent"
                background="transparent"
                tooltip={t(dictionary.changeName)}
                isDisabled={false}
              />

              <Icon
                name="delete"
                size={"lg"}
                color={Colors.appBlue}
                hoverColor={Colors.seaBlue}
                onClick={deleteContract}
                hoverBackground="transparent"
                background="transparent"
                tooltip={t(dictionary.deleteContract)}
                isDisabled={false}
              />
            </DetailPanelWrapperFooter>
          )}
        </>
      )}
    </MemberPanelContent>
  );
};