import { useContextSelector } from '@/hooks/useContextSelector';
import useDebounceCallback from '@/hooks/useDebounceCallback';
import { useSearchInput } from '@/hooks/useSearchInput';
import { SearchIcon } from '@/icons';

import { ResponsiveChild, useContainer } from '../containerQueries/components';
import {
  FilterButton,
  FilterSectionWrapper,
  SearchInput,
  SearchInputWrapper,
} from './FilterElements';
import { setLikedOnly, setPublicOnly, setSearchText } from './filterActions';
import { BooleanFilter } from './types';
import { ClipBrowserContext } from './useClipBrowser';

export default function TrashedFilters() {
  const likedOnly = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.liked === BooleanFilter.True
  );
  const publicOnly = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.public === BooleanFilter.True
  );
  const searchText = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.searchText
  );
  const setFilters = useContextSelector(
    ClipBrowserContext,
    (context) => context.setFilters
  );

  const { localSearchText, setLocalSearchText, searchInputProps } =
    useSearchInput(searchText);

  const debouncedSetSearchText = useDebounceCallback(
    (value: string) => setFilters(setSearchText(value)),
    150
  );

  const { containerRef, containerName } = useContainer();

  return (
    <FilterSectionWrapper ref={containerRef} style={{ marginTop: 16 }}>
      <SearchInputWrapper>
        <SearchIcon className='h-6 w-6' />
        <SearchInput
          {...searchInputProps}
          placeholder='Search'
          value={localSearchText}
          onChange={(e) => {
            setLocalSearchText(e.target.value);
            debouncedSetSearchText(e.target.value);
          }}
        />
      </SearchInputWrapper>
      <ResponsiveChild hideBelowWidth={900} containerName={containerName}>
        <FilterButton
          className=''
          active={likedOnly}
          onClick={() => setFilters(setLikedOnly(!likedOnly))}
        >
          Liked
        </FilterButton>
      </ResponsiveChild>
      <ResponsiveChild hideBelowWidth={900} containerName={containerName}>
        <FilterButton
          active={publicOnly}
          onClick={() => setFilters(setPublicOnly(!publicOnly))}
        >
          Public
        </FilterButton>
      </ResponsiveChild>
    </FilterSectionWrapper>
  );
}