// Antd
import { Button } from 'antd';

// Hooks
import { useStore } from 'stores/StoreProvider';
import { observer } from 'mobx-react-lite';

// Types
import { FC } from 'react';
import { RootStore } from 'stores/RootStore';
import { FormInstance } from 'antd/lib/form';
import { TIncidentCardInfoMessages } from '../types';

type TypeIncidentDrawerFooter = {
  form: FormInstance;
  translation: Omit<TIncidentCardInfoMessages, 'formItem'>;
};

const EditAndSaveButton: FC<TypeIncidentDrawerFooter> = observer(
  ({ form, translation }) => {
    // Store
    const rootStore: RootStore = useStore();
    const incidentsUiStore = rootStore.incidentsUiStore;
    const incidentsStore = rootStore.incidentsStore;

    const resolvedIncident = incidentsStore.incident?.status === 3;

    if (incidentsUiStore.isFormStatus) {
      return (
        <Button
          onClick={() => incidentsUiStore.setIsDisabledForm(false)}
          type="primary"
        >
          {translation.edit}
        </Button>
      );
    } else {
      return (
        <>
          <Button
            style={{
              marginLeft: 30,
              backgroundColor: resolvedIncident ? undefined : '#30A01E',
            }}
            onClick={() =>
              incidentsUiStore.resolveIncident(
                incidentsStore.incident?.incident_id as string,
              )
            }
            type="primary"
            disabled={resolvedIncident}
          >
            {resolvedIncident ? translation.resolved : translation.resolve}
          </Button>
          <Button
            style={{
              marginLeft: 10,
            }}
            type="primary"
            onClick={async () => {
              await form.submit();
              incidentsUiStore.setIncidentCardSize(undefined);
            }}
            disabled={incidentsUiStore.isAssignTo}
          >
            {translation.save}
          </Button>
        </>
      );
    }
  },
);

export default EditAndSaveButton;
