import { FormTemplate, FormTemplateResponse } from 'Containers/Forms/Models';
import React, { memo } from 'react';
import { TabContent } from 'Components/Tabs';
import { areEqual } from 'Utils/equalityChecks';
import { Spinner } from 'Components/Spinner';
import { PurpleButton } from 'Components/Button';

import { FormsList } from '../FormsList';
import classes from './contractForms.module.css';

interface Props {
  forms: FormTemplateResponse;
  fetching: boolean;
  onClickRow?: (form: FormTemplate) => void;
  onAdd: (e: any) => void;
  onDelete: (id: number) => void;
}

const ContractForms = ({ forms, onClickRow, fetching, onAdd, onDelete }: Props) => (
  <TabContent key="tab-content-contract-forms" id="contract-forms" className="show active position-relative">
    <div className={classes.formsContent}>
      <div className={`d-flex justify-content-start align-items-center ${classes.contentHeader}`}>
        <h2>Form Templates</h2>
        <PurpleButton className={classes.addButton} onClick={onAdd}>
          Add +
        </PurpleButton>
      </div>
      {fetching && <Spinner loading />}
      {!fetching && <FormsList forms={forms} onClickRow={onClickRow} onDelete={onDelete} onAdd={onAdd} />}
    </div>
  </TabContent>
);

ContractForms.defaultProps = {
  onClickRow: null,
};

const ContractFormsMemo = memo(ContractForms, areEqual);

export { ContractFormsMemo as ContractForms };
