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

import { GetDrawerConfiguration } from '@material-hu/hooks/useDrawerV2';

import HuAlert from '@material-hu/components/design-system/Alert';

import { usersKeys } from 'src/pages/dashboard/Users/queries';
import { getAudience } from 'src/services/usersService';
import { Criteria, CriteriaType } from 'src/types/audience';
import { User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { PaginatedResponse } from 'src/utils/tableUtils';

import FormSegmentationGroupSelector from 'src/components/FormInputs/FormSegmentationGroupSelector';

import { useCriteria } from '../criteriaContext';
import { useCriteriaColaborators } from '../SeeCollaborators';
import { getAudienceInternalId } from '../utils';

type SegmentationCriteriaProps = {
  criteria?: Partial<Criteria>;
  excludeDeactivatedUsersFromCollaboratorQueries?: boolean;
};

type SegmentationCriteriaForm = {
  itemIds: number[];
};

export const useSegmentationCriteriaDrawerContent: GetDrawerConfiguration<
  SegmentationCriteriaProps
> = args => {
  const { criteria, excludeDeactivatedUsersFromCollaboratorQueries = false } =
    args;

  const { addCriteriaSelected, updateCriteriaSelected } = useCriteria();

  const { t } = useLokaliseTranslation(['audience']);

  const form = useForm<SegmentationCriteriaForm>({
    defaultValues: {
      itemIds: criteria?.itemIds || [],
    },
  });
  const { watch } = form;
  const { itemIds } = watch();

  const { handleSubmit, reset } = form;

  const { data: segmentationCount = 0, isLoading: isSegmentationCountLoading } =
    useQuery(
      usersKeys.audience({
        itemIds,
        onlyActiveAndUnclaimedAudienceUsers:
          excludeDeactivatedUsersFromCollaboratorQueries,
      }),
      () =>
        getAudience({
          segmentationItemIds: itemIds,
          page: 0,
          limit: 1,
          ...(excludeDeactivatedUsersFromCollaboratorQueries
            ? { onlyActiveAndUnclaimedAudienceUsers: true }
            : {}),
        }),
      {
        enabled: !!itemIds?.length && !!args.open,
        select: r => (r.data as PaginatedResponse<User>).count,
      },
    );

  const {
    showDrawer: showCollabsInSegmentations,
    drawer: collabsInSegmentations,
  } = useCriteriaColaborators({
    criteria: {
      usersCount: segmentationCount,
      type: CriteriaType.SEGMENTED_USERS,
      itemIds,
    },
    excludeDeactivatedUsers: excludeDeactivatedUsersFromCollaboratorQueries,
  });

  const submit = (values: SegmentationCriteriaForm) => {
    if (criteria?.id) {
      updateCriteriaSelected({
        ...criteria,
        itemIds: values.itemIds,
        usersCount: segmentationCount,
      });
    } else {
      const criteriaToAdd = {
        id: getAudienceInternalId(),
        type: CriteriaType.SEGMENTED_USERS,
        itemIds: values.itemIds,
        usersCount: segmentationCount,
      };
      addCriteriaSelected(criteriaToAdd);
    }
    reset();
    args.closeDrawer();
  };

  const onClose = () => {
    args.closeDrawer();
    reset();
  };

  const footerContent = itemIds.length ? (
    <HuAlert
      title={t('selected_collaborators_count', {
        count: segmentationCount,
      })}
      severity="info"
      action={{
        text: t('see_collaborators'),
        onClick: () => {
          showCollabsInSegmentations({});
        },
      }}
    />
  ) : null;
  return {
    children: (
      <FormProvider {...form}>
        {collabsInSegmentations}
        <FormSegmentationGroupSelector
          name="itemIds"
          allowSelectAll={false}
        />
      </FormProvider>
    ),
    title: t('segmented_users_title'),
    primaryButtonProps: {
      children: t('general:select'),
      onClick: handleSubmit(submit),
      loading: isSegmentationCountLoading,
    },
    secondaryButtonProps: {
      children: t('general:cancel'),
      onClick: () => args.closeDrawer(),
    },
    footer: footerContent,
    onClose,
  };
};