import { useState } from 'react';
import { useParams } from 'react-router-dom';

import { fadeIn } from '@material-hu/utils/animations';

import TableSkeleton from '@material-hu/components/composed-components/TableSkeleton';
import Table from '@material-hu/components/design-system/Table';
import TableBody from '@material-hu/components/design-system/Table/components/TableBody';
import TableContainer from '@material-hu/components/design-system/Table/components/TableContainer';
import TableLoader from '@material-hu/components/design-system/Table/components/TableLoader';

import FocusFileVisualizer from 'src/components/FocusFileVisualizer';

import { useGetKnowledgeBaseFiles } from '../../hooks/useGetKnowledgeBaseFiles';
import {
  type KnowledgeBaseItem,
  KnowledgeBaseItemType,
  type KnowledgeBaseRouteParams,
} from '../../types';

import KnowledgeBaseTableHeader from './KnowledgeBaseTableHeader';
import KnowledgeBaseTableRow from './KnowledgeBaseTableRow';
import KnowledgeBaseTableState from './KnowledgeBaseTableState';

type KnowledgeBaseTableProps = {
  search?: string;
  selectedItemsPath: Set<string>;
  onSelectAll: (checked: boolean, filePaths: string[]) => void;
  onItemSelect: (path: string, checked: boolean) => void;
  scrollToTop: () => void;
  clearSearch: () => void;
};

const KnowledgeBaseTable = ({
  search,
  selectedItemsPath,
  onSelectAll,
  onItemSelect,
  scrollToTop,
  clearSearch,
}: KnowledgeBaseTableProps) => {
  const { folderPath = '' } = useParams<KnowledgeBaseRouteParams>();

  const [focusedItem, setFocusedItem] = useState<KnowledgeBaseItem | null>(
    null,
  );

  const {
    items,
    total,
    hasMore,
    isLoading,
    isSuccess,
    filesCount,
    fetchNextPage,
    isFetchingNextPage,
    isError,
    refetch,
  } = useGetKnowledgeBaseFiles({ folderPath, search });

  const isInitialLoading = isLoading && !items.length;
  const hasSelectedItems = selectedItemsPath.size > 0;

  const fileItems = items.filter(i => i.type === KnowledgeBaseItemType.FILE);

  const handleSelectAll = (checked: boolean) => {
    onSelectAll(
      checked,
      fileItems.map(i => i.path),
    );
  };

  const handleClear = () => {
    clearSearch();
    onSelectAll(false, []);
  };

  const isEmptyTable = isSuccess && items.length === 0;
  const isEmptySearch = isEmptyTable && search;

  if (isError)
    return (
      <KnowledgeBaseTableState
        state="error"
        onClick={refetch}
      />
    );

  if (isEmptySearch) return <KnowledgeBaseTableState state="emptySearch" />;

  if (isEmptyTable) return <KnowledgeBaseTableState state="empty" />;

  return (
    <>
      <FocusFileVisualizer
        fileName={focusedItem?.name ?? ''}
        fileSource={focusedItem?.downloadUrl ?? ''}
        fileExtension={focusedItem?.name?.split('.').pop() ?? ''}
        isOpen={!!focusedItem}
        onClose={() => setFocusedItem(null)}
      />

      <TableContainer
        sx={{
          mb: 1,
          animation: `${fadeIn} 300ms ease-in-out`,
          overflowY: 'hidden',
          ...(hasSelectedItems && {
            borderTopLeftRadius: 0,
            borderTopRightRadius: 0,
            borderTop: 'none',
          }),
        }}
        key={`knowledge-base-table-${folderPath}`}
      >
        <Table>
          <KnowledgeBaseTableHeader
            selectedCount={selectedItemsPath.size}
            totalCount={fileItems.length}
            onSelectAll={handleSelectAll}
          />

          <TableBody sx={{ '& .MuiSkeleton-root': { animation: 'none' } }}>
            {isInitialLoading && (
              <TableSkeleton
                rows={5}
                cols={8}
              />
            )}

            {isSuccess &&
              items.map(item => (
                <KnowledgeBaseTableRow
                  key={item.path}
                  item={item}
                  selected={selectedItemsPath.has(item.path)}
                  onItemSelect={onItemSelect}
                  onOpenFile={setFocusedItem}
                  clearApplies={handleClear}
                />
              ))}
          </TableBody>
        </Table>
      </TableContainer>

      <TableLoader
        loadedCount={filesCount}
        totalCount={total}
        onLoadMore={fetchNextPage}
        onScrollToTop={scrollToTop}
        slotProps={{
          button: {
            loading: isFetchingNextPage,
            disabled: !hasMore,
          },
        }}
      />
    </>
  );
};

export default KnowledgeBaseTable;