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

import { yupResolver } from '@hookform/resolvers/yup';
import Stack from '@material-hu/mui/Stack/Stack';

import Dialog from '@material-hu/components/design-system/Dialog';
import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';

import useAuth from 'src/contexts/JWTContext';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { SegmentationFields } from 'src/pages/dashboard/Learning/Courses/Report/components/DownloadReports/SegmentationFields';
import { downloadReportSchema } from 'src/pages/dashboard/Learning/Sessions/schemas';
import {
  type DownloadReportFnParams,
  type DownloadReportFormValues,
} from 'src/pages/dashboard/Learning/Sessions/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

type DownloadReportsModalProps = {
  onClose: () => void;
  onDownloadReport: (params: DownloadReportFnParams) => void;
  loading: boolean;
};

const DownloadReportsModal = ({
  onClose,
  onDownloadReport,
  loading,
}: DownloadReportsModalProps) => {
  const HugoThemeProvider = useHuGoTheme();
  const { user } = useAuth();
  const { t } = useLokaliseTranslation('learning');

  const form = useForm<DownloadReportFormValues>({
    defaultValues: {
      includeGroups: false,
      includedGroups: [],
      includeUserFields: false,
      includedUserFields: [UserFields.COMPLETE_NAME],
      email: user?.email || '',
    },
    resolver: yupResolver(downloadReportSchema),
  });

  const [
    includeGroups,
    includedGroups,
    includeUserFields,
    includedUserFields,
    email,
  ] = useWatch({
    control: form.control,
    name: [
      'includeGroups',
      'includedGroups',
      'includeUserFields',
      'includedUserFields',
      'email',
    ],
  });

  const handleDownloadReport = () => {
    form.handleSubmit(() => {
      onDownloadReport({
        email,
        includeGroups: includeGroups ? includedGroups : [],
        includeUserFields: includeUserFields ? includedUserFields : [],
      });
      onClose();
    })();
  };

  return (
    <HugoThemeProvider>
      <Dialog
        onClose={onClose}
        title={t('reports.downloads.report')}
        body={
          <FormProvider {...form}>
            <Stack sx={{ gap: 2 }}>
              <SegmentationFields />
              <FormInputClassic
                name="email"
                inputProps={{
                  label: t('general:add_email'),
                  placeholder: t('general:email'),
                  type: 'email',
                  hasCounter: false,
                }}
              />
            </Stack>
          </FormProvider>
        }
        primaryButtonProps={{
          children: t('general:confirm_download'),
          onClick: handleDownloadReport,
          disabled: !form.formState.isValid || loading,
          loading,
        }}
        secondaryButtonProps={{
          children: t('general:cancel'),
          onClick: onClose,
        }}
      />
    </HugoThemeProvider>
  );
};

export default DownloadReportsModal;