/**
 * @Move (SQPD)
 * Only used by the Forms module - move to Forms/
 */
import { useState } from 'react';
import { useInfiniteQuery } from 'react-query';

import { useServerPagination } from '@material-hu/hooks/useServerPagination';
import Skeleton from '@material-hu/mui/Skeleton';
import Stack from '@material-hu/mui/Stack';

import { formsKeys } from 'src/pages/dashboard/Forms/queries';
import * as formsService from 'src/services/formsService';
import { Form, FormTypes } from 'src/types/form';

import FormAutocomplete, {
  Props as FormAutocompleteProps,
} from '../FormInputs/FormAutocomplete';
import { InfiniteList } from '../InfiniteList';

type Props = {
  formType: FormTypes;
} & FormAutocompleteProps;

function FormsAutocomplete({ formType, ...rest }: Props) {
  const { pagination } = useServerPagination();
  const [query, setQuery] = useState('');

  const {
    data: infiniteForms,
    isLoading: infiniteFormsLoading,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteQuery(
    formsKeys.forms(formType, query, pagination),
    ({ pageParam = 0 }) =>
      formsService.getForms(formType, query, {
        ...pagination,
        limit: 100,
        page: pageParam,
      }),
    {
      getNextPageParam: lastPage =>
        lastPage.data.page === lastPage.data.totalPages
          ? undefined
          : lastPage.data.page,
      refetchOnMount: false,
    },
  );

  const forms = infiniteForms?.pages.map(page => page.data.items).flat() || [];

  return (
    <FormAutocomplete
      autocompleteProps={{
        multiple: true,
        limitTags: 1,
        options: forms,
        isOptionEqualToValue: (option: Form, value: Form) =>
          option.id === value.id,
        getOptionLabel: (form: Form) => form.title,
      }}
      {...rest}
      loading={infiniteFormsLoading}
      query={setQuery}
      infinite={
        <InfiniteList
          isSuccess={!!infiniteForms}
          isLoading={infiniteFormsLoading}
          isEmpty={
            infiniteForms?.pages &&
            !infiniteForms?.pages[pagination.page]?.data?.count
          }
          fetchNextPage={fetchNextPage}
          hasNextPage={hasNextPage}
          isFetchingNextPage={isFetchingNextPage}
          renderSkeleton={
            <Stack
              direction="row"
              alignItems="center"
              px={2}
              py={1}
            >
              <Skeleton
                animation="wave"
                height={25}
                width={18}
                style={{ borderRadius: 1, marginLeft: 12, marginRight: 18 }}
              />
              <Skeleton
                animation="wave"
                height={22}
                style={{ borderRadius: 2 }}
                width="100%"
              />
            </Stack>
          }
        >
          <div />
        </InfiniteList>
      }
    />
  );
}

export default FormsAutocomplete;