import { FC } from 'react';
import { useFormContext } from 'react-hook-form';
import { useTranslation } from 'react-i18next';

import HelpOutline 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 useProfileFields from 'src/hooks/queryHooks/useProfileFields';
import useSegmentationGroups from 'src/hooks/queryHooks/useSegmentationGroups';
import { validateRequiredEmailRule } from 'src/utils/validation';

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

const GroupMembersReportDrawer: FC = () => {
  const { t } = useTranslation(['group', 'backoffice_only']);

  const { data: segmentationQuery = [] } = useSegmentationGroups();
  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 { watch } = useFormContext();

  const { includeGroups, includeUserFields } = watch();

  return (
    <Stack sx={{ gap: 3 }}>
      <Typography variant="globalS">
        {t('group:group_members_report_drawer_description')}
      </Typography>
      <Stack sx={{ gap: includeGroups ? 3 : 0 }}>
        <Stack sx={{ gap: 2 }}>
          <FormCheckbox
            name="includeGroups"
            label={
              <Stack
                direction="row"
                alignItems="center"
                spacing={1}
              >
                <Typography>
                  {t('backoffice_only:report_filter.include_segmentation')}
                </Typography>
                <Tooltip
                  title={t(
                    'backoffice_only:report_filter.include_segmentation_tooltip',
                  )}
                >
                  <HelpOutline fontSize="small" />
                </Tooltip>
              </Stack>
            }
          />
          {includeGroups && (
            <FormSelect
              name="includedGroups"
              options={segmentationQuery.map(g => ({
                label: g.name,
                value: g.id,
              }))}
              selectProps={{ multiple: true }}
              label={t('backoffice_only:report_filter.segmentation')}
            />
          )}
        </Stack>
        <Stack sx={{ gap: 2 }}>
          <FormCheckbox
            name="includeUserFields"
            label={
              <Stack
                direction="row"
                alignItems="center"
                spacing={1}
              >
                <Typography>
                  {t('backoffice_only:report_filter.include_user_fields')}
                </Typography>
                <Tooltip
                  title={t(
                    'backoffice_only:report_filter.include_user_fields_tooltip',
                  )}
                >
                  <HelpOutline fontSize="small" />
                </Tooltip>
              </Stack>
            }
          />
          {includeUserFields && (
            <FormSelect
              name="includedUserFields"
              options={profileFields.map(g => ({ label: g.name, value: g.id }))}
              selectProps={{ multiple: true }}
              label={t('backoffice_only:report_filter.user_fields')}
            />
          )}
        </Stack>
      </Stack>
      <Stack sx={{ gap: 2 }}>
        <Typography
          variant="subtitle1"
          fontWeight={500}
        >
          {t('group:group_members_report_drawer_email_title')}
        </Typography>
        <FormInputClassic
          name="email"
          inputProps={{
            label: t('general:email'),
            type: 'email',
            autoFocus: true,
            hasCounter: false,
            autoComplete: 'email',
          }}
          rules={{ validate: validateRequiredEmailRule }}
        />
      </Stack>
    </Stack>
  );
};

export default GroupMembersReportDrawer;