import { FC } from 'react';

import Stack from '@material-hu/mui/Stack';
import { SxProps, Theme } from '@material-hu/mui/styles';

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

import { ScheduleMode } from '../types';

import RadioGroupWithChildren from './RadioGroupWithChildren';
import WorkingHours from './Schedule/WorkingHours';
import WorkdaysSelector from './WorkdaysSelector';

type Props = {
  enabledNightShifts: boolean;
  containerSx?: SxProps<Theme>;
};

const WorkdayStep: FC<Props> = props => {
  const { containerSx, enabledNightShifts } = props;
  const { t } = useLokaliseTranslation('work_schedules');

  const OPTIONS = [
    {
      value: ScheduleMode.general,
      label: t('SCHEDULE_GENERAL_LABEL'),
      children: <WorkingHours enabledNightShifts={enabledNightShifts} />,
      helperText: t('SCHEDULE_GENERAL_TEXT'),
    },
    {
      value: ScheduleMode.custom,
      label: t('SCHEDULE_CUSTOM_LABEL'),
      children: (
        <WorkingHours
          enabledNightShifts={enabledNightShifts}
          multiple
        />
      ),
      helperText: t('SCHEDULE_CUSTOM_TEXT'),
    },
  ];

  return (
    <Stack>
      <WorkdaysSelector containerSx={containerSx} />
      <RadioGroupWithChildren
        name="scheduleMode"
        options={OPTIONS}
      />
    </Stack>
  );
};

export default WorkdayStep;