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

import { IconHelp } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack/Stack';

import FormCheckbox from '@material-hu/components/design-system/Checkbox/Checkbox/form';
import Tooltip from '@material-hu/components/design-system/Tooltip';

import useProfileFields from 'src/hooks/queryHooks/useProfileFields';
import useSegmentationGroups from 'src/hooks/queryHooks/useSegmentationGroups';
import { type SegmentationGroupMainApi } from 'src/pages/dashboard/ServiceManagement/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FormSelect from 'src/components/FormInputs/FormSelect';
import { UserFields } from 'src/components/ReportFilter/constants';

import { type DownloadReportFormValues } from './DownloadReportsModal';

export const SegmentationFields = () => {
  const { t } = useLokaliseTranslation(['learning', 'backoffice_only']);
  const { control } = useFormContext<DownloadReportFormValues>();

  const [includeGroups, includeUserFields] = useWatch({
    control,
    name: ['includeGroups', 'includeUserFields'],
  });

  const { data: profileFields = [] } = useProfileFields({
    select: response => [
      ...Object.values(UserFields).map(userField => ({
        id: userField,
        name: t('backoffice_only:report_filter.user_fields', {
          context: userField,
        }),
      })),
      ...response.data,
    ],
  });

  const { data: segmentationGroups } =
    useSegmentationGroups<SegmentationGroupMainApi[]>();

  return (
    <Stack sx={{ gap: 2 }}>
      <Stack sx={{ gap: 0.5, flexDirection: 'row', alignItems: 'center' }}>
        <FormCheckbox
          name="includeGroups"
          checkBoxProps={{
            label: t('reports.include_segmentation'),
          }}
        />
        <Tooltip
          description={t('reports.tooltips.segmentation')}
          direction="bottom"
        >
          <IconHelp size={16} />
        </Tooltip>
      </Stack>
      {includeGroups && (
        <FormSelect
          name="includedGroups"
          options={(segmentationGroups || []).map(g => ({
            label: g.name,
            value: g.id,
          }))}
          selectProps={{ multiple: true }}
          label={t('general:segmentation')}
          formControlProps={{ sx: { width: '100%', my: 1 } }}
        />
      )}
      <Stack sx={{ gap: 0.5, flexDirection: 'row', alignItems: 'center' }}>
        <FormCheckbox
          name="includeUserFields"
          checkBoxProps={{
            label: t('reports.include_user_fields'),
          }}
        />
        <Tooltip
          description={t('reports.tooltips.user_fields')}
          direction="bottom"
        >
          <IconHelp size={16} />
        </Tooltip>
      </Stack>
      {includeUserFields && (
        <FormSelect
          name="includedUserFields"
          options={profileFields.map(g => ({ label: g.name, value: g.id }))}
          selectProps={{ multiple: true }}
          label={t('general:user_fields')}
          formControlProps={{ sx: { width: '100%', my: 1 } }}
        />
      )}
    </Stack>
  );
};
