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 { useRotationEventsMessage } from './i18n';
import Main from './Template/Main';

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

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

  const { events, loadingRotationEvent, uploadRotationEvent } =
    useStore().rotationUiStore;

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

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

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

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

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

export default EventsRotationType;
