import { useMemo } from 'react';

import { useSearch } from 'hooks/useSearch';
import { useSortingPopup, SortingConfig } from 'hooks/useSorting';

import { Box } from 'components/common';
import { PlusButton } from 'components/PlusButton';
import { useTreeRefactored } from 'components/tree/useTreeRefactored';
import { Audience, AudienceItem } from 'components/facebook/AudienceItem';
import { AudienceTree } from 'components/facebook/AudienceTree';

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

const SEARCH_PARAMS = ['name'];

const FilteredList = ({ data }: { data: Audience[] }) => {
  return (
    <Box spacingY={2}>
      {data.map((item) => {
        return <AudienceItem data={item} key={item.id} />;
      })}
    </Box>
  );
};

export const AudienceList = ({ data }: { data: Audience[] }) => {
  const { match, keyword, onSearch } = useSearch(SEARCH_PARAMS);

  const [sort, sortingFlyout] = useSortingPopup(SORTING_CONFIG, 'AudienceList');

  const audiences = useMemo(() => sort(data), [sort, data]);

  const [tree, treeState] = useTreeRefactored(audiences, 'AudienceTree');

  return (
    <Box padding={4}>
      <Box width="100%" display="flex" justify="between" padding={4}>
        <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>
        <span
          onClick={(ev) => sortingFlyout.toggle(ev.currentTarget)}
          className="fz16 bold c-gray cup"
          style={{ userSelect: 'none' }}
        >
          Sort
        </span>
      </Box>
      {keyword ? (
        <FilteredList data={audiences?.filter(match(keyword))} />
      ) : (
        <AudienceTree
          data={tree}
          onToggle={treeState.toggle}
          hiddenItems={treeState.selected}
        />
      )}
    </Box>
  );
};