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

import HelpOutlineIcon from '@material-hu/icons/material/HelpOutline';
import Stack from '@material-hu/mui/Stack';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

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

import { type UsersReportTypes } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { validateRequiredEmailRule } from 'src/utils/validation';

import CenteredCircularProgress from 'src/components/CircularProgress';
import FormCheckbox from 'src/components/FormInputs/FormCheckbox';
import FormSelect from 'src/components/FormInputs/FormSelect';

import useUsersPermissions from '../../hooks/useUsersPermissions';

type DownloadUsersDrawerProps = {
  options: { label: string; value: UsersReportTypes }[];
  profileFields: { id: string; name: string }[];
  segmentationQuery: { name: string; id: string | number }[];
  sendByEmail?: boolean;
  isLoading: boolean;
};

const DownloadUsersDrawer = ({
  options,
  profileFields,
  segmentationQuery,
  sendByEmail,
  isLoading,
}: DownloadUsersDrawerProps) => {
  const { canShowListingReportFilters } = useUsersPermissions();
  const { t } = useLokaliseTranslation(['users', 'audience']);
  const { watch } = useFormContext();
  const { includeGroups, includeUserFields } = watch();

  if (isLoading) {
    return <CenteredCircularProgress centered />;
  }

  const isEmpty =
    !Array.isArray(segmentationQuery) || segmentationQuery.length === 0;

  return (
    <>
      <FormSelect
        name="type"
        label={t('USERS_STATUS')}
        options={options}
        formControlProps={{ fullWidth: true, sx: { my: 1 } }}
      />
      <Stack>
        {canShowListingReportFilters && (
          <>
            <FormCheckbox
              name="includeGroups"
              label={
                <Stack
                  direction="row"
                  alignItems="center"
                  spacing={1}
                >
                  <Typography>{t('INCLUDE_SEGMENTATION')}</Typography>
                  <Tooltip title={t('INCLUDE_SEGMENTATION_TOOLTIP')}>
                    <HelpOutlineIcon fontSize="small" />
                  </Tooltip>
                </Stack>
              }
            />
            {includeGroups && (
              <FormSelect
                name="includedGroups"
                options={
                  !isEmpty
                    ? segmentationQuery.map(g => ({
                        label: g.name,
                        value: g.id,
                      }))
                    : []
                }
                selectProps={{ multiple: true }}
                formControlProps={{ sx: { my: 1 } }}
                label={t('SEGMENTATION')}
                disabled={isEmpty}
                helperText={
                  isEmpty
                    ? t('audience:segmentations.no_segmentation_groups')
                    : undefined
                }
              />
            )}
            <FormCheckbox
              name="includeUserFields"
              label={
                <Stack
                  direction="row"
                  alignItems="center"
                  spacing={1}
                >
                  <Typography>{t('INCLUDE_USER_FIELDS')}</Typography>
                  <Tooltip title={t('INCLUDE_USER_FIELDS_TOOLTIP')}>
                    <HelpOutlineIcon fontSize="small" />
                  </Tooltip>
                </Stack>
              }
            />
            {includeUserFields && (
              <FormSelect
                name="userFields"
                options={profileFields.map(g => ({
                  label: g.name,
                  value: g.id,
                }))}
                selectProps={{ multiple: true }}
                formControlProps={{ sx: { my: 1 } }}
                label={t('USER_PROFILE_FIELDS')}
              />
            )}
          </>
        )}
      </Stack>
      {sendByEmail && (
        <>
          <Typography
            variant="globalS"
            sx={{ my: 1 }}
            color="text.secondary"
          >
            {t('REPORT_BY_EMAIL')}
          </Typography>
          <FormInputClassic
            name="email"
            inputProps={{
              label: t('EMAIL'),
              autoFocus: true,
              autoComplete: 'email',
              type: 'email',
              hasCounter: false,
            }}
            rules={{ validate: validateRequiredEmailRule }}
          />
        </>
      )}
    </>
  );
};

export default DownloadUsersDrawer;