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

import { useDebounce } from '@material-hu/hooks/useDebounce';
import {
  PaginationParams,
  PaginationControllerProps,
} from '@material-hu/hooks/useHuPagination';
import { IconArrowLeft } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';

import HuStateCard from '@material-hu/components/composed-components/StateCard';
import HuTitle from '@material-hu/components/design-system/Title';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { searchLibraries } from 'src/services/libraries';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { librariesKeys } from '../queries';

import LibrarySearchItem from './LibrarySearchItem';

export type LibrarySearchResultProps = {
  onBack: () => void;
  params: PaginationParams;
  Pagination: FC<PaginationControllerProps>;
};

export const LibrarySearchResult = ({
  onBack,
  Pagination,
  params: { search, pagination },
}: LibrarySearchResultProps) => {
  const { t } = useLokaliseTranslation('general');
  const HuGoThemeProvider = useHuGoTheme();

  const debouncedSearch = useDebounce(search);

  const { data, isLoading, isError } = useQuery(
    librariesKeys.search.list({ ...pagination, search: debouncedSearch }),
    () => searchLibraries({ ...pagination, search: debouncedSearch }),
    {
      select: response => response.data,
      keepPreviousData: true,
    },
  );

  const isEmpty = !isLoading && data?.items?.length === 0;
  const isSuccess = !isEmpty && !isError;

  return (
    <HuGoThemeProvider>
      <Stack
        sx={{
          p: 3,
          width: '100%',
          alignItems: 'center',
          overflow: 'auto',
        }}
      >
        <Stack
          sx={{
            gap: 3,
            maxWidth: 790,
            width: '100%',
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 1,
            }}
          >
            <IconButton
              aria-label={t('back')}
              onClick={onBack}
            >
              <IconArrowLeft />
            </IconButton>
            <HuTitle
              variant="M"
              title={t('search_result')}
            />
          </Stack>
          {isSuccess && (
            <>
              <Stack
                sx={{
                  width: '100%',
                  gap: 2,
                }}
              >
                {isLoading &&
                  [1, 2, 3].map(item => (
                    <LibrarySearchItem
                      key={item}
                      loading
                    />
                  ))}
                {!isLoading &&
                  data?.items?.map(library => (
                    <LibrarySearchItem
                      key={library.id}
                      library={library}
                    />
                  ))}
              </Stack>
              <Pagination
                inputProps={{
                  loading: isLoading,
                  totalPages: data?.totalPages,
                }}
              />
            </>
          )}
          {isEmpty && (
            <HuStateCard
              title={t('empty_search_title')}
              description={t('empty_search_description')}
            />
          )}
          {isError && (
            <HuStateCard
              title={t('error_search_title')}
              description={t('error_description')}
            />
          )}
        </Stack>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default LibrarySearchResult;