import { useDrawer } from '@material-hu/hooks/useDrawer';
import { IconUsers } from '@material-hu/icons/tabler';

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

import SelectionCriteriaCard from '../components/SelectionCriteriaCard';
import IndividualSelectionDrawer from '../CriteriaSelectionDrawers/hugo/IndividualSelectionDrawer';

export const FORM_ID = 'user-select-form';

function useIndividualSelectionCard({
  title,
  description,
  onConfirm,
  onCancel,
  disabled,
}: {
  title?: string;
  description?: string;
  onConfirm?: (values: { userIds?: number[] }) => Promise<void>;
  onCancel?: () => void;
  disabled?: boolean;
}) {
  const { t } = useLokaliseTranslation(['audience']);

  const {
    drawer: individualSelectionDrawer,
    closeDrawer: closeIndividualSelectionDrawer,
    showDrawer: showIndividualSelectionDrawer,
  } = useDrawer(
    IndividualSelectionDrawer,
    {
      title: t('individual_users_title'),
      onClose: () => closeIndividualSelectionDrawer(),
      primaryButtonProps: {
        variant: 'contained',
        type: 'submit',
        form: FORM_ID,
        onClick: () => onConfirm,
        fullWidth: true,
        children: t('general:apply'),
        disabled,
      },
      secondaryButtonProps: {
        variant: 'text',
        type: 'reset',
        form: FORM_ID,
        onClick: onCancel,
        fullWidth: true,
        children: t('general:cancel'),
      },
    },
    {
      disabled,
      onConfirm,
      onCancel,
      formId: FORM_ID,
    },
  );

  return {
    individualSelectionDrawer,
    showIndividualSelectionDrawer,
    closeIndividualSelectionDrawer,
    card: (
      <SelectionCriteriaCard
        onClick={() => showIndividualSelectionDrawer()}
        Icon={IconUsers}
        title={title || t('individual_users_title')}
        description={description || t('individual_users_description')}
      />
    ),
  };
}

export default useIndividualSelectionCard;