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 { getAgentGroups } from '../../services';
import { AgentProfile } from '../../types';

import GenericEntitySelectionDrawer from './GenericEntitySelectionDrawer';

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

const LIMIT = 10;

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

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

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

  const canRemoveAgentGroup = (agentGroupId: string) => {
    const agentGroup = userMemberAgentGroups.find(ag => ag.id === agentGroupId);
    return agentGroup?.agents?.length !== 1;
  };

  return (
    <GenericEntitySelectionDrawer
      open={open}
      onClose={onClose}
      onCancel={onCancel}
      onConfirm={onConfirm}
      loading={loading}
      formFieldName="agentGroups"
      userEntities={userMemberAgentGroups}
      title={t('EDIT_AGENT_GROUPS')}
      labelText={t('MEMBER_OF')}
      searchPlaceholder={t('SEARCH_AGENT_GROUP')}
      emptyStateTitle={t('NO_AGENT_GROUPS_CREATED')}
      emptyStateDescription={t('NO_AGENT_GROUPS_CREATED_DESCRIPTION')}
      helperText={t('EDIT_AGENT_GROUPS_HELPER_TEXT')}
      canRemoveEntity={canRemoveAgentGroup}
      tooltipTitle={t('CANT_DELETE_AGENT_GROUP')}
      tooltipDescription={t('CANT_DELETE_AGENT_GROUP_DESCRIPTION')}
      queryResult={queryResult}
      resetSearch={reset}
      onSearchChange={onChangeQuery}
      hasSearch={!!query}
    />
  );
};

export default AgentProfileAgentGroupDrawer;