import { memo, useMemo } from 'react';
import { useParams } from 'react-router';
import { useSearch } from 'hooks/useSearch';
import { useSortingPopup, SortingConfig } from 'hooks/useSorting';
import { useTreeRefactored } from 'components/tree/useTreeRefactored';

import { Heading } from 'components/common';
import { PlusButton } from 'components/PlusButton';
import { CollectionsTree } from './CollectionsTree';
import { SearchResults } from './SearchResults';

import { formatNumber } from 'utils';
import { CollectionType } from './DatasetItem';

const SEARCH_PARAMS = ['name'];

const SORTING_CONFIG: SortingConfig<CollectionType> = {
  options: [
    { label: 'Name', value: 'name', selector: (i) => i.name },
    {
      label: 'Date created',
      value: 'dateCreated',
      selector: (i) => i.dateCreated,
      type: 'date',
    },
    {
      label: 'Total profiles',
      value: 'totalProfiles',
      selector: (i) => i.totalProfiles,
      type: 'number',
    },
  ],
  sortBy: 'dateCreated',
};

interface CollectionsProps {
  data: CollectionType[];
  totalProfiles: number;
  selected: string[];
  onSelect: (id: string) => any;
}

const MemoizedCollectionsTree = memo(CollectionsTree);

export const Collections = ({
  data,
  totalProfiles,
  selected,
  onSelect,
}: CollectionsProps) => {
  const { workspaceId } = useParams();
  const { match, keyword, onSearch } = useSearch(SEARCH_PARAMS);

  const [sort, sortingFlyout] = useSortingPopup(
    SORTING_CONFIG,
    `Collections_${workspaceId}`
  );

  const collections = useMemo(() => sort(data), [sort, data]);
  const [tree, treeState] = useTreeRefactored(
    collections,
    `Collections_${workspaceId}`
  );

  return (
    <div className="padding4">
      <div className="w100 flex alignCenter justifyCenter paddingX4">
        <div className="w100 flex alignCenter spacing2">
          <PlusButton
            state={treeState.allSelected}
            onClick={treeState.toggleAll}
          />
          <input
            className="search fz16 bold"
            type="search"
            placeholder="Filter"
            onChange={onSearch}
          />
        </div>
        {keyword ? (
          <Heading size="xl" align="center" className="marginY4 nowrap">
            {collections.filter(match(keyword)).length || 'Nothing'}
            <span className="c-gray"> found</span>
          </Heading>
        ) : (
          <Heading
            size="xl"
            align="center"
            className="marginY4 nowrap"
            style={{ visibility: totalProfiles ? 'visible' : 'hidden' }}
          >
            {formatNumber(totalProfiles)}
            <span className="c-gray"> profiles</span>
          </Heading>
        )}
        <div className="w100 flex alignCenter justifyEnd">
          <span
            onClick={(ev) => sortingFlyout.toggle(ev.currentTarget)}
            className="fz16 bold c-gray cup"
            style={{ userSelect: 'none' }}
          >
            Sort
          </span>
        </div>
      </div>
      {keyword ? (
        <SearchResults
          search={match(keyword)}
          data={collections}
          selected={selected}
          onSelect={onSelect}
        />
      ) : (
        <MemoizedCollectionsTree
          data={tree}
          onToggle={treeState.toggle}
          hiddenItems={treeState.selected}
          selected={selected}
          onSelect={onSelect}
        />
      )}
    </div>
  );
};