import { useForm } from 'react-hook-form';
import { useMutation } from 'react-query';
import { useNavigate } from 'react-router';

import useSnackbar from '@material-hu/components/design-system/Snackbar';
import { queryClient } from 'src/config/react-query';
import useGeneralError from 'src/hooks/useGeneralError';
import * as regionService from 'src/services/regionsService';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { logEvent, LogEvents } from 'src/utils/logging';

import CreationLayout from '../components/CreationLayout';
import DetailsStep from '../components/DetailsStep';
import PeopleStep from '../components/PeopleStep';
import PublicHolidaysStep from '../components/PublicHolidayStep';
import { CollabSelection } from '../constants';
import { regionKeys } from '../queries';
import { regionRoutes } from '../routes';

const RegionCreate = () => {
  const { t } = useLokaliseTranslation('regions');
  const navigate = useNavigate();
  const { enqueueSnackbar } = useSnackbar();
  const showGeneralError = useGeneralError();

  const form = useForm({
    defaultValues: {
      title: '',
      body: '',
      holidays: [],
      userIds: [],
      regionsUserMode: CollabSelection.NONE,
    },
    mode: 'onChange',
  });

  const createRegionMutation = useMutation(
    () => {
      const region = form.getValues();
      const payload: Record<string, unknown> = {
        title: region.title,
      };
      if (region.holidays.length > 0) {
        payload.holidays = region.holidays;
      }
      if (region.body.length > 0) {
        payload.body = region.body;
      }
      if (region.regionsUserMode === CollabSelection.ALL_USERS) {
        payload.userIds = null;
        payload.regionsUserMode = region.regionsUserMode;
      } else if (region.regionsUserMode === CollabSelection.TARGETED_USERS) {
        payload.userIds = region.userIds;
        payload.regionsUserMode = region.regionsUserMode;
      }
      return regionService.createRegion(payload);
    },
    {
      onSuccess: response => {
        queryClient.invalidateQueries(regionKeys.all());
        logEvent(LogEvents.TIME_TRACKING_REGION_CREATED, {
          regionName: form.getValues('title'),
          regionId: response.data.id,
        });
        enqueueSnackbar({
          title: t('create_success'),
          variant: 'success',
        });
        navigate(regionRoutes.base());
      },
      onError: err => {
        showGeneralError(err, t('create_error'));
      },
    },
  );

  const steps = [
    {
      label: t('general_data'),
      Component: <DetailsStep isRegion />,
    },
    {
      label: t('holidays'),
      Component: (
        <PublicHolidaysStep
          title={t('holidays')}
          subtitle={t('public_holidays.import_holidays_hint')}
        />
      ),
    },
    {
      label: t('people'),
      Component: <PeopleStep />,
    },
  ];

  return (
    <CreationLayout
      createMutation={createRegionMutation}
      form={form}
      steps={steps}
      handleBackNavigation={() => {
        navigate('..');
      }}
      title={t('NEW_REGION')}
    />
  );
};

export default RegionCreate;