import { useStore } from 'stores/StoreProvider';
import { useEffect, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { Form } from 'antd';
import { TRotationMessage, TRotationSettingSubmit } from './types';
import { prepareDataBeforeSubmit } from './helpers';
import { useRotationIncidentsMessage } from './i18n';
import Main from './Template/Main';

const IncidentsRotationSettings = observer((): JSX.Element => {
  const [form] = Form.useForm();

  const {
    messageTitle,
    messageDescription,
    ...translations
  }: TRotationMessage = useRotationIncidentsMessage();

  const { incidents, loadingRotationIncident, uploadRotationIncident } =
    useStore().rotationUiStore;

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

  const data = useMemo(() => incidents, [incidents]);

  const onSubmit = (values: TRotationSettingSubmit): void => {
    const prepareData = prepareDataBeforeSubmit(values);

    uploadRotationIncident(prepareData, {
      messageTitle,
      messageDescription,
    });
  };

  return (
    <Main
      form={form}
      data={data}
      cardTitle={translations.incidents.title}
      tooltip={translations.incidents.tooltip}
      onFinish={onSubmit}
      translations={translations}
    />
  );
});

export default IncidentsRotationSettings;
