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 { useStoreState } from "../../store";
import {
  getContractOrdProjectName,
  getUsersInContracts,
  IChangeProps,
  prepareUsersToSave,
} from "../../helpers/organizationHelper";

interface IUserManagementInContract {
  contractID: string;
  type: string;
  isOpen: boolean;
  handleCancel: () => void;
  handleConfirm: (items: IChangeProps[]) => void;
  projectID?: string;
}
export const UserManagementInContract: FC<IUserManagementInContract> = ({
  contractID,
  isOpen,
  handleCancel,
  handleConfirm,
  projectID,
}) => {
  const [actionLoader, setActionLoader] = useState(false);
  const { members, contracts } = useStoreState((state) => state.organization);
  const [users, setUsers] = useState(
    getUsersInContracts(members, contractID, projectID),
  );
  useEffect(() => {
    setUsers(getUsersInContracts(members, contractID, projectID));
  }, [contractID, projectID, members, contracts]);

  useEffect(() => {
    setActionLoader(false);
  }, [contractID, projectID]);

  const onConfirm = () => {
    setActionLoader(true);
    const list = prepareUsersToSave(
      members,
      users,
      contracts,
      contractID,
      projectID,
    );
    handleConfirm(list);
  };

  const handleSelect = (list: IListItem[]) => {
    setUsers(list);
  };
  return (
    <Modal
      title={getContractOrdProjectName(contracts, contractID, projectID)}
      handleClose={handleCancel}
      handleConfirm={onConfirm}
      isOpen={isOpen}
      exitOnEsc={true}
        headerDivader={true}
      submitLoader={actionLoader}
      labels={{
        primary: t(dictionary.save),
        secondary: t(dictionary.cancel),
      }}
    >
      <List items={users} handleChange={handleSelect} isCheckbox />
    </Modal>
  );
};