import { useMemo, useState } from 'react';
import { useInfiniteQuery } from 'react-query';

import { IconInfoCircle } from '@material-hu/icons/tabler';
import Portal from '@material-hu/mui/Portal';

import HuAutocomplete from '@material-hu/components/design-system/Inputs/Autocomplete';
import { type AutocompleteProps as HuAutocompleteProps } from '@material-hu/components/design-system/Inputs/Autocomplete/types';
import HuNewStateCard from '@material-hu/components/design-system/StateCard';

import { pxKeys } from 'src/pages/dashboard/PeopleExperience/queries';
import { getDimensions } from 'src/pages/dashboard/PeopleExperience/services';
import { type TopicAutocompleteOption } from 'src/types/peopleExperience';
import { useLokaliseTranslation } from 'src/utils/i18n';

type AutocompleteProps = HuAutocompleteProps<TopicAutocompleteOption, false>;

type TopicAutocompleteProps = Omit<
  AutocompleteProps,
  'options' | 'inputValue'
> & {
  value: AutocompleteProps['value'] | null;
  emptyStateContainer?: HTMLElement;
  hasLabel?: boolean;
};

const TopicAutocomplete = ({
  hasLabel = true,
  emptyStateContainer,
  onInputChange,
  ...props
}: TopicAutocompleteProps) => {
  const { t } = useLokaliseTranslation('people_experience');
  const [inputText, setInputText] = useState('');

  const { onCreate } = props;

  const {
    data: topics,
    isLoading: isLoadingTopics,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage: isFetchingTopicsNextPage,
    isSuccess: isSuccessTopics,
  } = useInfiniteQuery({
    queryKey: pxKeys.dimensions({ q: inputText }),
    queryFn: ({ pageParam = 0 }) =>
      getDimensions({ q: inputText, page: pageParam + 1 }),
    getNextPageParam: lastPage =>
      lastPage.data.page === lastPage.data.totalPages
        ? undefined
        : lastPage.data.page,
    keepPreviousData: true,
  });

  const topicOptions: TopicAutocompleteOption[] = useMemo(
    () =>
      topics?.pages?.flatMap(page =>
        page.data.items.map(topic => ({
          value: topic.id,
          label: topic.title,
        })),
      ) || [],
    [topics],
  );

  const hasEmptyTopics =
    !onCreate && isSuccessTopics && topicOptions.length === 0 && !inputText;

  return (
    <>
      <HuAutocomplete
        options={topicOptions}
        label={hasLabel ? t('dimension_one') : undefined}
        loading={isLoadingTopics || isFetchingTopicsNextPage}
        onLoadMore={fetchNextPage}
        hasMoreOptions={hasNextPage}
        placeholder={t('select_dimension')}
        noOptionsMessage={{
          title: t('no_results'),
          description: t('no_results_description'),
        }}
        {...props}
        onInputChange={(...args) => {
          const [, nextInput] = args;
          setInputText(nextInput);
          onInputChange?.(...args);
        }}
        disabled={props.disabled || hasEmptyTopics}
      />
      <Portal container={emptyStateContainer}>
        {hasEmptyTopics && (
          <HuNewStateCard
            title={t('no_dimensions_yet')}
            description={t('no_dimensions_yet_description')}
            variant="primary"
            icon={IconInfoCircle}
          />
        )}
      </Portal>
    </>
  );
};

export default TopicAutocomplete;