import { FC } from 'react';

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

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

import SelectionCriteriaCard from '../components/SelectionCriteriaCard';
import AllSelectionDrawer from '../CriteriaSelectionDrawers/hugo/AllSelectionDrawer';
import { SegmentationSelectionDrawerProps } from '../CriteriaSelectionDrawers/hugo/SegmentationSelectionDrawer/types';

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

function useAllSelectionCard({
  title,
  description,
  onConfirm,
  onCancel,
  drawerProps,
  drawer,
}: {
  title?: string;
  description?: string;
  // TODO-SQGZ: Remove any
  onConfirm?: (values: any) => Promise<void>;
  onCancel?: () => void;
  drawerProps?: Partial<SegmentationSelectionDrawerProps>;
  drawer?: FC;
}) {
  const { t } = useLokaliseTranslation(['audience']);

  const {
    drawer: allSelectionDrawer,
    closeDrawer: closeAllSelectionDrawer,
    showDrawer: showAllSelectionDrawer,
  } = useDrawer(
    drawer || AllSelectionDrawer,
    {
      title: t('all_users_title'),
      onClose: () => closeAllSelectionDrawer(),
      primaryButtonProps: {
        variant: 'contained',
        type: 'submit',
        form: FORM_ID,
        onClick: () => onConfirm,
        fullWidth: true,
        children: t('general:apply'),
      },
      secondaryButtonProps: {
        variant: 'text',
        type: 'reset',
        form: FORM_ID,
        onClick: onCancel,
        fullWidth: true,
        children: t('general:cancel'),
      },
    },
    {
      onConfirm,
      onCancel,
      formId: FORM_ID,
      ...drawerProps,
    },
  );

  return {
    allSelectionDrawer,
    showAllSelectionDrawer,
    closeAllSelectionDrawer,
    card: (
      <SelectionCriteriaCard
        onClick={() => showAllSelectionDrawer()}
        Icon={IconBuildingSkyscraper}
        title={title || t('all_users_title')}
        description={description || t('all_users_description')}
        label={t('automatic_assignment')}
      />
    ),
  };
}

export default useAllSelectionCard;