import { FC } from 'react';

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

import { AssignSegmentationType } from 'src/pages/dashboard/EmployeeLifecycle/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

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

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

  const {
    drawer: segmentationSelectionDrawer,
    closeDrawer: closeSegmentationSelectionDrawer,
    showDrawer: showSegmentationSelectionDrawer,
  } = useDrawer(
    drawer || SegmentationSelectionDrawer,
    {
      title: t('segmented_users_title'),
      onClose: () => closeSegmentationSelectionDrawer(),
      primaryButtonProps: {
        variant: 'contained',
        type: 'submit',
        form: FORM_ID,
        onClick: () => onConfirm,
        fullWidth: true,
        children: t('general:apply'),
        disabled: shouldDisable,
      },
      secondaryButtonProps: {
        variant: 'text',
        type: 'reset',
        form: FORM_ID,
        onClick: onCancel,
        fullWidth: true,
        children: t('general:cancel'),
      },
    },
    {
      onConfirm,
      onCancel,
      formId: FORM_ID,
      ...drawerProps,
    },
  );

  return {
    segmentationSelectionDrawer,
    showSegmentationSelectionDrawer,
    closeSegmentationSelectionDrawer,
    card: (
      <SelectionCriteriaCard
        onClick={() => showSegmentationSelectionDrawer()}
        Icon={IconUsersGroup}
        title={title || t('segmented_users_title')}
        description={description || t('segmented_users_description')}
        label={t('automatic_assignment')}
      />
    ),
  };
}

export default useSegmentationSelectionCard;