import { type FC } from 'react';

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

import FormRadioButtonGroup from '@material-hu/components/composed-components/RadioButtonGroup/form';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import Title from '@material-hu/components/design-system/Title';

import useRules from 'src/hooks/useRules';
import { ReportType } from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

const ReportSettingsStep: FC = () => {
  const { t } = useLokaliseTranslation('time_tracker');

  const REPORT_OPTIONS = [
    {
      label: t('time_tracker:report_consolidated'),
      value: ReportType.CONSOLIDATED,
      helperText: t('time_tracker:report_consolidated_hint'),
    },
    {
      label: t('time_tracker:report_detailed'),
      value: ReportType.DETAILED,
      helperText: t('time_tracker:report_detailed_hint'),
    },
  ];

  return (
    <Stack
      sx={{
        height: '100%',
        px: 2,
      }}
    >
      <Title
        variant="M"
        title={t('time_tracker:configure_report')}
        description={t('time_tracker:configure_report_hint')}
      />
      <Stack
        sx={{
          flex: 1,
          gap: 2,
          mt: 2,
        }}
      >
        <CardContainer sx={cardStyles}>
          <FormInputClassic
            name="email"
            inputProps={{
              label: t('time_tracker:email_label'),
              placeholder: t('time_tracker:email_placeholder'),
              hasCounter: false,
              sx: {
                '.MuiInputBase-root': {
                  backgroundColor: ({ palette }) =>
                    palette.new.background.layout.tertiary,
                },
              },
            }}
            rules={useRules({
              requiredWithMessage: true,
              email: true,
            })}
          />
        </CardContainer>
        <CardContainer sx={cardStyles}>
          <Title
            variant="S"
            title={t('time_tracker:report_type')}
            description={t('time_tracker:select_report_type')}
            sx={{ mb: 2 }}
          />
          <FormRadioButtonGroup
            name="reportType"
            options={REPORT_OPTIONS}
            sx={{ gap: 2 }}
          />
        </CardContainer>
      </Stack>
    </Stack>
  );
};

export default ReportSettingsStep;
