import React, { memo, useEffect, useCallback, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { areEqual } from 'Utils/equalityChecks';
import {
  contractFormsSelector,
  fetchingContractFormsSelector,
  companyIdSelector,
  // deletingContractFormSelector,
  contractFormDeletedSelector,
} from 'Containers/Forms/selectors';
import { ContractForms } from 'Components/Forms';
import { DeleteFormModal, DeleteToast } from 'Components/Forms/FormTabs';
import { AddContractForms } from 'Containers/Forms/AddContractForms';
import { FormTemplate } from 'Containers/Forms/Models';
import { EditContractForms } from 'Containers/Forms/EditContractForms';
import { listCompanyContractForms, deleteContractForm, setDeletedFormId } from '../../actions';

const ContractFormsContainer = () => {
  const dispatch = useDispatch();
  const contractForms = useSelector(contractFormsSelector, areEqual);
  const fetching = useSelector(fetchingContractFormsSelector, areEqual);
  const companyId = useSelector(companyIdSelector, areEqual);
  // const deleting = useSelector(deletingContractFormSelector, areEqual);
  const deletedId = useSelector(contractFormDeletedSelector, areEqual);
  const [deleteModal, setDeleteModal] = useState({
    isOpen: false,
    id: null,
  });
  const [showDeletedToast, setShowDeletedToast] = useState(false);
  const [showAddFormsModal, setShowAddFormsModal] = useState(false);
  const [editModal, setEditModal] = useState<{
    isOpen: boolean;
    form: FormTemplate | null;
  }>({
    isOpen: false,
    form: null,
  });

  const getContractForms = useCallback(() => {
    if (companyId) {
      dispatch(listCompanyContractForms(companyId));
    }
  }, [dispatch, companyId]);

  const deleteButtonClick = useCallback((id: number) => {
    setDeleteModal({
      isOpen: true,
      id,
    });
  }, []);

  const handleDelete = useCallback(
    (id: number) => {
      dispatch(deleteContractForm(id));
      setDeleteModal({
        isOpen: false,
        id: null,
      });
    },
    [dispatch]
  );

  const handleOpenEdit = useCallback((form: FormTemplate) => {
    setEditModal({
      isOpen: true,
      form,
    });
  }, []);

  const closeEditModal = useCallback(() => {
    setEditModal({
      isOpen: false,
      form: null,
    });
  }, []);

  const closeToast = useCallback(() => {
    setShowDeletedToast(false);
  }, []);

  const openAddForms = useCallback((e: any) => {
    e.preventDefault();
    setShowAddFormsModal(true);
  }, []);

  const closeAddForms = useCallback(() => {
    setShowAddFormsModal(false);
  }, []);

  useEffect(() => {
    if (deletedId) {
      dispatch(listCompanyContractForms(companyId));

      setShowDeletedToast(true);

      setTimeout(() => setShowDeletedToast(false), 1500);

      dispatch(setDeletedFormId(null));
    }
  }, [deletedId]);

  useEffect(() => {
    getContractForms();
  }, [getContractForms]);

  return (
    <>
      <ContractForms
        forms={contractForms}
        fetching={fetching}
        onAdd={openAddForms}
        onDelete={deleteButtonClick}
        onClickRow={handleOpenEdit}
      />

      <AddContractForms isOpen={showAddFormsModal} onClose={closeAddForms} />

      <EditContractForms isOpen={editModal.isOpen} initData={editModal.form as FormTemplate} onClose={closeEditModal} />

      <DeleteFormModal
        id={deleteModal.id as number}
        isOpen={deleteModal.isOpen}
        modalCloseClick={() =>
          setDeleteModal({
            isOpen: false,
            id: null,
          })
        }
        onDelete={handleDelete}
      />
      {deletedId && <DeleteToast isDisplayed={showDeletedToast} closeToast={closeToast} message="Form Deleted" />}
    </>
  );
};

const ContractFormsContainerMemo = memo(ContractFormsContainer, areEqual);

export { ContractFormsContainerMemo as ContractFormsContainer };
