import React, { FC, useEffect, useState } from "react";
import { IListItem, List, Modal } from "venice-ui";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";
import {
  getAvailableContracts,
  IChangeProps,
  prepareContractsToSave,
} from "../../helpers/organizationHelper";
import { useStoreState } from "../../store";

interface IManageUserInContractModal {
  memberID: string;
  handleCancel: () => void;
  handleConfirm: (changes: IChangeProps[]) => void;
  isOpen: boolean;
}
export const ManageUserInContractModal: FC<IManageUserInContractModal> = ({
  memberID,
  isOpen,
  handleCancel,
  handleConfirm,
}) => {
  const { members, contracts } = useStoreState((state) => state.organization);
  const [contractList, setContractList] = useState<IListItem[]>(
    getAvailableContracts(memberID, members, contracts),
  );

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

  const handleChage = (items: IListItem[]) => {
    setContractList(items);
  };

  const onConfirm = () => {
    handleConfirm(prepareContractsToSave(contractList, memberID));
  };

  return (
    <Modal
      title={t(dictionary.accessManagement)}
      handleClose={handleCancel}
      handleConfirm={onConfirm}
      isOpen={isOpen}
      exitOnEsc={true}
      headerDivader={true}
      labels={{
        primary: t(dictionary.save),
        secondary: t(dictionary.cancel),
      }}
    >
      <List
        items={contractList}
        isCheckbox
        isCollapsable
        handleChange={handleChage}
      />
    </Modal>
  );
};