import { useMemo, useState } from 'react';

import { IconUser, type TablerIcon } from '@material-hu/icons/tabler';
import { type StackProps } from '@material-hu/mui/Stack';

import useFullUsersQuery from 'src/hooks/useFullUsersQuery';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullname } from 'src/utils/userUtils';

import StatusAwareWrapper from 'src/components/StatusAwareWrapper';

import SelectionSummaryCard, {
  type SelectionSummaryCardProps,
} from '../components/SelectionSummaryCard';

const DEFAULT_NAMES_TO_SHOW = 5;

export type IndividualSelectionSummaryCardProps = Pick<
  SelectionSummaryCardProps,
  'deleteDisabled'
> & {
  userIds: number[];
  sx?: StackProps['sx'];
  onEdit?: (() => void) | undefined;
  onDelete?: (() => void) | undefined;
  disabled?: boolean;
  icon?: TablerIcon;
  title?: string;
  namesToShow?: number;
  usersCount?: number;
  description?: string;
};

const IndividualSelectionSummaryCard = ({
  userIds,
  sx,
  onEdit,
  onDelete,
  disabled,
  icon = IconUser,
  title = '',
  namesToShow = DEFAULT_NAMES_TO_SHOW,
  usersCount,
  description,
  deleteDisabled,
}: IndividualSelectionSummaryCardProps) => {
  const [processing, setProcessing] = useState(false);
  const { t } = useLokaliseTranslation('audience');
  const usersToQuery = useMemo(() => userIds.slice(0, namesToShow), [userIds]);
  const usersRequest = useFullUsersQuery(description ? [] : usersToQuery);

  let usersText = '';
  const totalUsersCount = usersCount ?? userIds.length;

  if (usersRequest.isLoading) {
    usersText = t('general:loading');
    usersText += '...';
  } else if (userIds?.length === 0) {
    usersText = '';
  } else if (usersRequest?.data) {
    if (userIds.length === 1) {
      usersText += getFullname(usersRequest.data[0]);
    } else if (totalUsersCount > namesToShow) {
      usersText = `${usersRequest.data
        .map(user => [user.firstName, user.lastName].filter(Boolean).join(' '))
        .join(', ')}`;
      usersText += ' ';
      usersText += t('individual_users_card_description', {
        count: totalUsersCount - usersToQuery.length,
      });
    } else {
      const usersNames = usersRequest?.data?.map(getFullname);

      usersText = usersNames.slice(0, usersNames.length - 1).join(', ');
      usersText += ` ${t('general:and')} `;
      usersText += usersNames[usersNames.length - 1];
    }
  }

  const handleDelete = async () => {
    setProcessing(true);
    await onDelete?.();
    setProcessing(false);
  };

  return (
    <StatusAwareWrapper status={processing ? 'loading' : 'idle'}>
      <SelectionSummaryCard
        loading={usersRequest.isLoading}
        Icon={icon}
        title={title || t('individual_users_title')}
        description={description || usersText}
        sx={{ ...sx, opacity: processing ? 0.5 : 1 }}
        disabled={disabled}
        onEdit={onEdit}
        onDelete={onDelete ? handleDelete : undefined}
        deleteDisabled={deleteDisabled}
      />
    </StatusAwareWrapper>
  );
};

export default IndividualSelectionSummaryCard;