import { FormProvider, useForm } from 'react-hook-form';
import { useOutletContext } from 'react-router';

import Stack from '@material-hu/mui/Stack';

import { useLokaliseTranslation } from 'src/utils/i18n';

import PublicHolidaysStep from '../components/PublicHolidayStep';
import { RegionOutletContext } from '../constants';

function RegionHolidays() {
  const { t } = useLokaliseTranslation('regions');
  const { regionData } = useOutletContext<RegionOutletContext>();

  const form = useForm({
    defaultValues: {
      holidays: regionData.holidays || [],
    },
    mode: 'onChange',
  });

  return (
    <FormProvider {...form}>
      <Stack
        sx={{
          flex: 1,
          justifyContent: 'space-between',
        }}
      >
        <PublicHolidaysStep
          title={t('PUBLIC_HOLIDAYS.MANAGE_HOLIDAYS')}
          subtitle={t('PUBLIC_HOLIDAYS.IMPORT_HOLIDAYS_HINT')}
          isEdit
        />
      </Stack>
    </FormProvider>
  );
}

export default RegionHolidays;