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

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

import CardContainer from '@material-hu/components/design-system/CardContainer';
import Switcher from '@material-hu/components/design-system/Switcher';
import Title from '@material-hu/components/design-system/Title';

import { type ReportDownloadFields, ReportType } from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { type AutocompleteField } from 'src/components/AdvancedFilter/types';

import HourTypesFieldsSelector from '../../../components/HourTypesFieldsSelector';
import ReportFieldsSelector from '../../../components/ReportFieldsSelector';

type Props = {
  segmentationGroups: AutocompleteField[];
  profileFields: AutocompleteField[];
  hourTypes: AutocompleteField[];
};

const cardStyles = {
  backgroundColor: ({ palette }: Theme) =>
    palette.new.background.layout.default,
  border: 'unset',
  width: '100%',
};

const ReportFieldsStep: FC<Props> = ({
  segmentationGroups,
  profileFields,
  hourTypes,
}) => {
  const { t } = useLokaliseTranslation('time_tracker');
  const { control, setValue } = useFormContext<ReportDownloadFields>();

  const [
    reportType,
    includeScheduledTime,
    includeClockInOut,
    includeAutoCloseIncidence,
    includeKiosk,
  ] = useWatch({
    name: [
      'reportType',
      'includeScheduledTime',
      'includeClockInOut',
      'includeAutoCloseIncidence',
      'includeKiosk',
    ],
    control,
  });

  const isDetailedReport = reportType === ReportType.DETAILED;

  return (
    <Stack
      sx={{
        height: '100%',
        px: 2,
      }}
    >
      <Title
        variant="M"
        title={t('time_tracker:report_fields')}
        description={t('time_tracker:select_report_fields')}
      />
      <Stack
        sx={{
          flex: 1,
          gap: 2,
          mt: 2,
        }}
      >
        <CardContainer sx={cardStyles}>
          <ReportFieldsSelector
            enableFieldName="enableSegmentationGroups"
            fieldName="segmentationGroups"
            sectionTitle={t('time_tracker:include_segmentations')}
            optionsList={segmentationGroups}
            isServerFiltered={false}
            multiple
          />
        </CardContainer>
        <CardContainer sx={cardStyles}>
          <ReportFieldsSelector
            enableFieldName="enableProfileFields"
            fieldName="profileFields"
            sectionTitle={t('time_tracker:include_profile_fields')}
            optionsList={profileFields}
            isServerFiltered={false}
            multiple
          />
        </CardContainer>
        <CardContainer
          sx={{ ...cardStyles, '& .MuiCardContent-root': { pr: 1 } }}
        >
          <HourTypesFieldsSelector
            enableFieldName="enableHourTypes"
            fieldName="hourTypes"
            sectionTitle={t('time_tracker:categorized_hours_title')}
            sectionDescription={t(
              'time_tracker:include_hour_types_description',
            )}
            optionsList={hourTypes}
          />
        </CardContainer>

        {/* Detailed report options */}
        {isDetailedReport && (
          <>
            <CardContainer sx={cardStyles}>
              <Switcher
                title={t('time_tracker:include_scheduled_hours')}
                value={includeScheduledTime}
                onChange={() =>
                  setValue('includeScheduledTime', !includeScheduledTime)
                }
              />
            </CardContainer>
            <CardContainer sx={cardStyles}>
              <Switcher
                title={t('time_tracker:include_clock_method')}
                value={includeClockInOut}
                onChange={() =>
                  setValue('includeClockInOut', !includeClockInOut)
                }
              />
            </CardContainer>
            <CardContainer sx={cardStyles}>
              <Switcher
                title={t('time_tracker:include_incidence')}
                description={t('time_tracker:include_incidence_description')}
                value={includeAutoCloseIncidence}
                onChange={() =>
                  setValue(
                    'includeAutoCloseIncidence',
                    !includeAutoCloseIncidence,
                  )
                }
              />
            </CardContainer>
            <CardContainer sx={cardStyles}>
              <Switcher
                title={t('time_tracker:include_kiosk')}
                description={t('time_tracker:include_kiosk_description')}
                value={includeKiosk}
                onChange={() => setValue('includeKiosk', !includeKiosk)}
              />
            </CardContainer>
          </>
        )}
      </Stack>
    </Stack>
  );
};

export default ReportFieldsStep;
