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

interface IMemberDetailsPanel {
  memberID: string;
  handleAssing: (memberID: string) => void;
  handleEdit: (memberID: string) => void;
  handleDelete: (memberID: string) => void;
}
export const MemberDetailsPanel: FC<IMemberDetailsPanel> = ({
  memberID,
  handleAssing,
  handleEdit,
  handleDelete,
}) => {
  const { contracts } = useStoreState((state) => state.organization);
  const [memberDetails, setMemberDetails] = useState({
    email: "",
    role: "",
    contracts: [] as IListItem[],
    status: "",
  });
  const { members } = useStoreState((state) => state.organization);
  const { uid } = useStoreState((state) => state.user.userDetails);

  useEffect(() => {
    if (memberID) {
      setMemberDetails(getMemberDetails(members, memberID, contracts));
    }
  }, [memberID, members]);

  const updateContractView = (items: IListItem[]) => {
    setMemberDetails((prevState) => ({
      ...prevState,
      contracts: items,
    }));
  };

  const memeberAssign = () => {
    handleAssing(memberID);
  };

  const editMemeber = () => {
    if (memberID !== uid) {
      handleEdit(memberID);
    }
  };
  const deleteMember = () => {
    if (memberID !== uid) {
      handleDelete(memberID);
    }
  };
  const getRoleLabel = (role: string) => {
    switch (role) {
      case "admin":
        return t(dictionary.admin);
      case "editing":
        return t(dictionary.editing);
      case "readOnly":
        return t(dictionary.readOnly);
      default:
        return role;
    }
  };
  return (
    <MemberPanelContent>
      {memberID === "" ? (
        <Aligment style={{ height: "100%" }}>
          <DetailsPanelText>
            <Text> {t(dictionary.emptyMemberPanel)}</Text>
          </DetailsPanelText>
        </Aligment>
      ) : (
        <>
          <PanelSectionHeader>
            {t(dictionary.membersDetails)}
          </PanelSectionHeader>
          <MemberDetailsPanelContent>
            <Aligment direction="column" align="flex-start">
              <ItemDetailsLabel>{t(dictionary.email)}</ItemDetailsLabel>
              <ItemDetailsText>{memberDetails.email}</ItemDetailsText>
            </Aligment>
            <Aligment direction="column" align="flex-start">
              <ItemDetailsLabel>{t(dictionary.role)}</ItemDetailsLabel>
              <ItemDetailsText>
                {getRoleLabel(memberDetails.role)}
              </ItemDetailsText>
            </Aligment>
            {memberDetails.status === "deleted" && (
              <Aligment direction="column" align="flex-start">
                <ItemDetailsLabel>{t(dictionary.status)}</ItemDetailsLabel>
                <ItemDetailsText>{t(dictionary.userDeleted)}</ItemDetailsText>
              </Aligment>
            )}
            {memberDetails.status !== "deleted" && (
              <Aligment direction="column" align="flex-start">
                <ItemDetailsLabel>{t(dictionary.contracts)}</ItemDetailsLabel>
                <List
                  items={memberDetails.contracts}
                  isCollapsable
                  handleChange={updateContractView}
                  isStatusable={true}
                  isSelectable={false}
                />
              </Aligment>
            )}
          </MemberDetailsPanelContent>

          {memberID !== "" && (
            <DetailPanelWrapperFooter id="footer" isSingle={false}>
              <Icon
                name="access_rights"
                size={"lg"}
                color={Colors.appBlue}
                hoverColor={Colors.seaBlue}
                onClick={memeberAssign}
                hoverBackground="transparent"
                background="transparent"
                tooltip={t(dictionary.manageAccess)}
                isDisabled={memberDetails.status === "deleted"}
              />
              <Icon
                name="person_edit"
                size={"lg"}
                color={Colors.appBlue}
                hoverColor={Colors.seaBlue}
                onClick={editMemeber}
                hoverBackground="transparent"
                background="transparent"
                tooltip={t(dictionary.editUser)}
                isDisabled={
                  memberID === uid || memberDetails.status === "deleted"
                }
              />
              <Icon
                name="delete"
                size={"lg"}
                color={Colors.appBlue}
                hoverColor={Colors.seaBlue}
                onClick={deleteMember}
                hoverBackground="transparent"
                background="transparent"
                tooltip={t(dictionary.deleteUser)}
                isDisabled={
                  memberID === uid || memberDetails.status === "deleted"
                }
              />
            </DetailPanelWrapperFooter>
          )}
        </>
      )}
    </MemberPanelContent>
  );
};