import { FC, Fragment } from 'react';
import { InfiniteQueryObserverBaseResult } from 'react-query';
import { useMatch } from 'react-router-dom';

import { AxiosResponse } from 'axios';

import Stack from '@material-hu/mui/Stack';

import { useMassiveAssign } from 'src/pages/dashboard/forms/MassiveAssignContext';
import { FormType, FormItemResponse } from 'src/types/forms';
import { useLokaliseTranslation } from 'src/utils/i18n';

import ListItem from 'src/components/dashboard/form/FormRequestItem';
import { formSkeletonRoutes } from 'src/components/dashboard/form/routes';
import InfiniteList from 'src/components/list/InfiniteList';
import Scrollbar from 'src/components/Scrollbar';
import SearchBar from 'src/components/search/SearchBar';

import BulkActions from './BulkActions';

export type FormRequestListProps = InfiniteQueryObserverBaseResult<
  AxiosResponse<FormItemResponse[]>
> & {
  formsQuery: string;
  handleSearchForm: (value) => void;
  isBulkAssign?: boolean;
};

export const FormRequestList: FC<FormRequestListProps> = props => {
  const {
    data,
    hasNextPage,
    formsQuery,
    handleSearchForm,
    isBulkAssign = false,
    ...others
  } = props;

  const { t } = useLokaliseTranslation('forms');

  const { isSelecting } = useMassiveAssign();

  const matchApprovalWorkflow = useMatch(
    formSkeletonRoutes.requests.approvalWorkflow(FormType.FORM),
  );
  const matchSimpleForm = useMatch(
    formSkeletonRoutes.requests.detail(FormType.FORM),
  );

  const currentId =
    Number(matchApprovalWorkflow?.params?.id) ||
    Number(matchSimpleForm?.params?.id);

  const formPages = data?.pages || [];

  return (
    <Stack>
      <SearchBar
        placeholder={t('SEARCH')}
        query={formsQuery}
        onChange={handleSearchForm}
        sx={{ mx: 1, mt: 2, px: 1, borderRadius: '6px' }}
        withoutDivider
      />
      <Scrollbar
        options={{ suppressScrollX: true }}
        style={{
          paddingBottom: '3rem',
        }}
      >
        {isSelecting && <BulkActions isBulkAssign={isBulkAssign} />}
        <InfiniteList
          isSuccess={!!formPages[0]?.data?.length}
          isEmpty={!formPages[0]?.data?.length}
          noResultsLabel={t('NO_FORMS_AVAILABLE')}
          hasNextPage={hasNextPage}
          sx={{
            mt: 1,
            position: 'relative',
            zIndex: 0,
          }}
          {...others}
        >
          {formPages.map((formPage, i) => (
            <Fragment key={i}>
              {formPage?.data?.map(form => (
                <ListItem
                  isBulkAssign={isBulkAssign}
                  active={
                    matchApprovalWorkflow
                      ? currentId === form.formId
                      : currentId === form.chatId
                  }
                  key={form.formId}
                  {...form}
                />
              ))}
            </Fragment>
          ))}
        </InfiniteList>
      </Scrollbar>
    </Stack>
  );
};

export default FormRequestList;