import { isNumber } from 'lodash-es';
import { type GetDrawerConfiguration } from '@material-hu/hooks/useDrawerV2';

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

import useUsers from 'src/hooks/queryHooks/useUsers';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { CriteriaType } from 'src/types/audience';
import { useLokaliseTranslation } from 'src/utils/i18n';

import AllCriteriaDrawerContent from '../CriteriaSelectionDrawers/AllCriteriaDrawer';
import { useCriteriaColaborators } from '../SeeCollaborators';

import useAllUsersConfirmationModal from './useAllUsersConfirmationModal';

export const useAllCriteriaDrawerContent: GetDrawerConfiguration = args => {
  const HuGoThemeProvider = useHuGoTheme();

  const { t } = useLokaliseTranslation(['audience']);
  const { modal: confirmModal, showModal: showConfirmModal } =
    useAllUsersConfirmationModal(args.closeDrawer);

  const { data: count = 0 } = useUsers(
    {
      limit: 1,
      page: 1,
    },
    { enabled: args.open, select: data => data.data.count },
  );

  const {
    showDrawer: showCollabsInSegmentations,
    drawer: collabsInSegmentations,
  } = useCriteriaColaborators({
    criteria: { type: CriteriaType.ALL_USERS, usersCount: count },
  });

  const footerContent = isNumber(count) ? (
    <HuAlert
      title={t('selected_collaborators_count', {
        count,
      })}
      action={{
        text: t('see_collaborators'),
        onClick: () =>
          showCollabsInSegmentations({
            type: CriteriaType.ALL_USERS,
            usersCount: count,
          }),
      }}
      severity="info"
    />
  ) : null;

  return {
    children: (
      <HuGoThemeProvider>
        <AllCriteriaDrawerContent />
        {confirmModal}
        {collabsInSegmentations}
      </HuGoThemeProvider>
    ),
    title: t('all_users_title'),
    primaryButtonProps: {
      children: t('general:select'),
      onClick: () => {
        showConfirmModal();
      },
    },
    secondaryButtonProps: {
      children: t('general:cancel'),
      onClick: () => args.closeDrawer(),
    },
    footer: footerContent,
  };
};