import { ReactElement } from 'react';

import { PageFilter, PageSortOrder, fetchAllPagesForHumanTag } from '../../../db/pages';
import { useLiveQuery } from 'dexie-react-hooks';
import RawPageList from './RawPageList';

interface TagPageListProps {
  tag: string;
  sortOrder: PageSortOrder;
  filter: PageFilter;
  groupByWindow: boolean;
  expanded: boolean;
}

const TagPageList = ({
  tag,
  sortOrder,
  filter,
  groupByWindow,
  expanded,
}: TagPageListProps): ReactElement => {
  const pages = useLiveQuery(() => fetchAllPagesForHumanTag(tag), [tag]);

  if (!expanded) {
    return <></>;
  }

  return (
    <RawPageList
      pages={pages || []}
      sortOrder={sortOrder}
      filter={filter}
      groupByWindow={groupByWindow}
    />
  );
};

export default TagPageList;