import { FC } from 'react';
import { useInfiniteQuery } from 'react-query';

import useDebounceSearchQuery from 'src/hooks/useDebounceSearch';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { serviceManagementKeys } from '../../queries';
import { getHelpDesks } from '../../services';
import { AgentProfile } from '../../types';

import GenericEntitySelectionDrawer from './GenericEntitySelectionDrawer';

type Props = {
  open: boolean;
  onClose: () => void;
  onCancel: () => void;
  onConfirm: () => void;
  loading?: boolean;
  userCoordinatedHelpDesks: AgentProfile['helpDesks'];
};

const LIMIT = 10;

const AgentProfileHelpDeskDrawer: FC<Props> = ({
  open,
  onClose,
  onCancel,
  onConfirm,
  loading = false,
  userCoordinatedHelpDesks,
}) => {
  const { t } = useLokaliseTranslation('service_management');

  const {
    query,
    reset,
    onChange: onChangeQuery,
  } = useDebounceSearchQuery({
    initialQuery: '',
    debounceTime: 500,
  });

  const queryResult = useInfiniteQuery(
    serviceManagementKeys.helpDesks.list(LIMIT, query),
    ({ pageParam = 1 }) =>
      getHelpDesks({ page: pageParam, limit: LIMIT, name: query }),
    {
      enabled: !!open,
      getNextPageParam: lastPage =>
        lastPage.data.page === lastPage.data.totalPages
          ? undefined
          : lastPage.data.page + 1,
    },
  );

  const canRemoveHelpDesk = (helpDeskId: string) => {
    const helpDesk = userCoordinatedHelpDesks.find(hd => hd.id === helpDeskId);
    return helpDesk?.coordinators?.length !== 1;
  };

  return (
    <GenericEntitySelectionDrawer
      open={open}
      onClose={onClose}
      onCancel={onCancel}
      onConfirm={onConfirm}
      loading={loading}
      formFieldName="helpDesks"
      userEntities={userCoordinatedHelpDesks}
      title={t('EDIT_HELP_DESKS')}
      labelText={t('COORDINATOR_OF')}
      searchPlaceholder={t('SEARCH_HELP_DESK')}
      emptyStateTitle={t('NO_HELP_DESKS_CREATED')}
      emptyStateDescription={t('NO_HELP_DESKS_CREATED_DESCRIPTION')}
      helperText={t('EDIT_AGENT_HELP_DESKS_HELPER_TEXT')}
      canRemoveEntity={canRemoveHelpDesk}
      tooltipTitle={t('CANT_DELETE_HELP_DESK')}
      tooltipDescription={t('CANT_DELETE_HELP_DESK_DESCRIPTION')}
      queryResult={queryResult}
      resetSearch={reset}
      onSearchChange={onChangeQuery}
      hasSearch={!!query}
    />
  );
};

export default AgentProfileHelpDeskDrawer;