import { FC } from 'react';
import { useFormContext } from 'react-hook-form';

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

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormDatePicker from '@material-hu/components/design-system/Inputs/DatePicker/form';

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

const EffectiveDates: FC = () => {
  const { t } = useLokaliseTranslation('work_schedules'); // TODO: Assignment?

  const parentForm = useFormContext();
  const { watch } = parentForm;
  const { endDate, startDate } = watch();

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        gap: 1,
        mt: 4,
      }}
    >
      <HuCardContainer
        sx={{
          flex: 1,
          '.MuiCardContent-root': {
            alignItems: 'center',
            display: 'flex',
            flexDirection: 'row',
            gap: 1,
            p: 3,
          },
        }}
      >
        <Stack sx={{ flex: 1 }}>
          <HuFormDatePicker
            name="startDate"
            inputProps={{
              maxDate: endDate,
              label: t('ASSIGNMENT_BEGINNING'),
            }}
          />
        </Stack>
        <Stack sx={{ flex: 1 }}>
          <HuFormDatePicker
            name="endDate"
            inputProps={{
              minDate: startDate,
              label: t('ASSIGNMENT_END'),
              enableClear: true,
            }}
          />
        </Stack>
      </HuCardContainer>
    </Stack>
  );
};

export default EffectiveDates;