import { useEffect, useState, useTransition } from 'react';

import type { MappedUserPage } from '~/src/lib/songwhipApi/users/types';
import type { CatalogFilters } from './hooks';

import Box from '~/src/components/Box';
import Gradient from '~/src/components/Gradient';
import Loading from '~/src/components/Loading';
import { PAGE_HEADER_HEIGHT } from '~/src/components/PageHeader';
import SearchTextInput from '~/src/components/SearchTextInput';
import Sticky from '~/src/components/Sticky';
import useTheme from '~/src/hooks/useTheme';
import { useI18n } from '~/src/lib/i18n';
import { LoadingStatus } from '~/src/store/types';
import { PagesItems, PagesToolbar } from './components';
import { useCatalogData, useCatalogFilters } from './hooks';
import { filterBySearch, filterByType, sortItems } from './utils';

export const PagesTab = () => {
  const { t } = useI18n('catalog');

  const theme = useTheme();
  const [filters, setFilters] = useCatalogFilters();
  const [isPending, startTransition] = useTransition();
  const { loading, value: items } = useCatalogData();
  const [itemsToRender, setItemsToRender] = useState<MappedUserPage[]>([]);

  const isContentLoading =
    isPending ||
    loading === LoadingStatus.IDLE ||
    loading === LoadingStatus.STARTED;

  const hasArchivedItems = items?.some((item) => item.archivedAtTimestamp);

  useEffect(() => {
    const filterItems =
      (filters: CatalogFilters) => (items?: MappedUserPage[]) => {
        const isTypeMatch = filterByType(filters.type);
        const isSearchMatch = filterBySearch(filters.search);

        if (!items) return [];
        return items.filter((item) => isTypeMatch(item) && isSearchMatch(item));
      };

    startTransition(() => {
      const filtered = filterItems(filters)(items);
      const final = sortItems(filters.sort, 'desc')(filtered);

      setItemsToRender(final);
    });
  }, [items, filters]);

  return (
    <Box>
      <Sticky zIndex={2} top={PAGE_HEADER_HEIGHT}>
        <Box flexColumn gap="2.4rem" style={{ background: theme.background }}>
          <SearchTextInput
            testId="catalogSearch"
            height="5rem"
            defaultValue={filters.search}
            placeholder={t('searchInputPlaceholder')}
            onInputEnd={({ value }) => {
              setFilters({ search: value });
            }}
            onClear={() => {
              setFilters({ search: undefined });
            }}
            withClearButton
            autoFocus
          />
          <PagesToolbar showArchivedFilter={hasArchivedItems} />
        </Box>
        <Gradient to="transparent" from="#000" endAt="50%" height="2.4rem" />
      </Sticky>
      <Box zIndex={1}>
        {isContentLoading ? (
          <Loading margin="1.6rem 0" />
        ) : (
          <PagesItems
            itemsToRender={itemsToRender}
            itemsCount={items?.length ?? 0}
          />
        )}
      </Box>
    </Box>
  );
};