import { useCallback } from 'react';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

import IndividualSelectionDrawer from 'src/components/Audience/CriteriaSelectionDrawers/hugo/IndividualSelectionDrawer';

import {
  SegmentationCondition,
  type UseCommonAssignmentSelectionProps,
} from '../types';

export type IndividualSummaryCardPropsFromHook = {
  onEdit: () => void;
  onDelete: (() => void) | undefined;
};

export type ShowIndividualSelectionDrawerArgs = {
  userIds?: number[];
  disabled?: boolean;
};

const INDIVIDUAL_SELECTION_FORM_ID = 'individual-selection-drawer';

const useIndividualSelection = ({
  onConfirm,
  disabled: modalActionDisabled,
}: UseCommonAssignmentSelectionProps) => {
  const { t } = useLokaliseTranslation('audience');

  const handleConfirm = async (values: { userIds: number[] }) => {
    await onConfirm({
      type: SegmentationCondition.USERS,
      userIds: values.userIds,
    });
  };

  const {
    drawer: individualSelectionDrawer,
    closeDrawer: closeIndividualSelectionDrawer,
    showDrawer: showIndividualSelectionDrawer,
  } = useDrawerV2<ShowIndividualSelectionDrawerArgs>(args => ({
    children: (
      <IndividualSelectionDrawer
        processId={0}
        formId={INDIVIDUAL_SELECTION_FORM_ID}
        onConfirm={handleConfirm}
        onCancel={() => args.closeDrawer()}
        userIds={args?.userIds ?? []}
        disabled={args?.disabled ?? modalActionDisabled}
      />
    ),
    disableEscapeKeyDown: true,
    title: t('individual_users_title'),
    onClose: () => args.closeDrawer(),
    primaryButtonProps: {
      variant: 'contained',
      type: 'submit',
      form: INDIVIDUAL_SELECTION_FORM_ID,
      fullWidth: true,
      children: t('general:apply'),
      disabled: args?.disabled ?? modalActionDisabled,
    },
    secondaryButtonProps: {
      variant: 'text',
      type: 'reset',
      form: INDIVIDUAL_SELECTION_FORM_ID,
      onClick: () => args.closeDrawer(),
      fullWidth: true,
      children: t('general:cancel'),
    },
  }));

  const showIndividualSelectionDrawerWithArgs = useCallback(
    (args?: ShowIndividualSelectionDrawerArgs) => {
      showIndividualSelectionDrawer({
        userIds: args?.userIds ?? [],
        disabled: args?.disabled,
      });
    },
    [showIndividualSelectionDrawer],
  );

  return {
    individualSelectionDrawer,
    closeIndividualSelectionDrawer,
    showIndividualSelectionDrawer: showIndividualSelectionDrawerWithArgs,
  };
};

export default useIndividualSelection;