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

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

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

import { Criteria, CriteriaType } from 'src/types/audience';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

import {
  QueryKeys,
  SegmentationCriteriaService,
} from './useSegmentationCriteria';

type GetIndividualDrawerContentArgs = {
  criteria?: Partial<Criteria>;
  customGetIndividualCriteriaUsers?: SegmentationCriteriaService['customGetIndividualCriteriaUsers'];
  customKeyIndividualCriteriaUsers?: QueryKeys['customKeyIndividualCriteriaUsers'];
  excludeDeactivatedUsersFromCollaboratorQueries?: boolean;
};

export type FormValues = {
  userIds: number[];
  selectedItems: Record<string, boolean>;
};

export const useIndividualDrawerContent: GetDrawerConfiguration<
  GetIndividualDrawerContentArgs
> = args => {
  const { criteria, excludeDeactivatedUsersFromCollaboratorQueries = false } =
    args;
  const { addCriteriaSelected, updateCriteriaSelected } = useCriteria();
  const { t } = useLokaliseTranslation(['audience']);

  const form = useForm({
    defaultValues: {
      userIds: criteria?.userIds || [],
      selectedItems: {},
    },
  });

  const { watch, handleSubmit, reset } = form;
  const { userIds } = watch();
  const count = userIds.length;

  const submit = (values: { userIds: number[] }) => {
    if (criteria?.id) {
      updateCriteriaSelected({
        ...criteria,
        userIds: values.userIds,
        usersCount: count,
      });
    } else {
      const criteriaToAdd = {
        id: getAudienceInternalId(),
        type: CriteriaType.INDIVIDUAL_USERS,
        userIds,
        usersCount: count,
      };
      addCriteriaSelected(criteriaToAdd);
    }
    reset();
    args.closeDrawer();
  };

  const {
    showDrawer: showCollabsInSegmentations,
    drawer: collabsInSegmentations,
  } = useCriteriaColaborators({
    criteria: {
      type: CriteriaType.INDIVIDUAL_USERS,
      userIds,
      usersCount: count,
    },
    customGetIndividualCriteriaUsers: args.customGetIndividualCriteriaUsers,
    customKeyIndividualCriteriaUsers: args.customKeyIndividualCriteriaUsers,
    excludeDeactivatedUsers: excludeDeactivatedUsersFromCollaboratorQueries,
  });

  const footerContent =
    userIds.length > 0 ? (
      <HuAlert
        title={t('selected_collaborators_count', {
          count: userIds.length,
        })}
        action={{
          text: t('see_selection'),
          onClick: () => showCollabsInSegmentations(),
        }}
        severity="info"
      />
    ) : null;

  const disabled =
    userIds.length === 0 || criteria?.userIds?.length === userIds.length;

  return {
    children: (
      <>
        <IndividualCriteriaDrawerContent
          form={form}
          criteria={criteria}
          excludeDeactivatedUsersFromCollaboratorQueries={
            excludeDeactivatedUsersFromCollaboratorQueries
          }
        />
        {collabsInSegmentations}
      </>
    ),
    title: t('individual_users_title'),
    primaryButtonProps: {
      children: t('general:select'),
      onClick: () => handleSubmit(submit)(),
      disabled,
    },
    secondaryButtonProps: {
      children: t('general:cancel'),
      onClick: () => args.closeDrawer(),
    },
    footer: footerContent,
  };
};