import React, { useEffect, useState } from 'react';
import classNames from 'classnames/bind';
import styles from './CollectionLayerFilter.scss';
import CircleThumb from '@src/components/common/CircleThumb';
import { ReactComponent as IconCheck } from '@assets/img/svg/ico_check_pink2.svg';
import { ReactComponent as IconSearch } from '@assets/img/svg/ico_search_gray.svg';
import useSearch from '@src/hooks/useSearch';
import { useDispatch, useSelector } from 'react-redux';
import { fetchExploreKeyword } from '@src/store/reducers/ExploreReducer';
import { useDebounce } from 'usehooks-ts';

const cx = classNames.bind(styles);

interface IOwnProps {
  collection: string;
  setCollection: (collection: string) => void;
  update: boolean;
  hide: () => void;
  handler?: () => void;
};

const CollectionLayerFilter: React.FC<IOwnProps> = ({
  collection,
  setCollection,
  update,
  hide = () => {},
  handler
}) => {
  const dispatch = useDispatch();

  const [selected, setSelected] = useState<string>(collection);
  const { keyword, setKeyword, onKeyPress } = useSearch();
  const { collectionList } = useSelector(store => store.explore);
  const debounceKeyword = useDebounce(keyword, 1000);
  useEffect(() => {
    setSelected(collection);
  }, [update]);

  useEffect(() => {
    dispatch(fetchExploreKeyword(debounceKeyword));
  }, [debounceKeyword]);

  const handleClick = (title: string) => {
    if (title === selected) {
      setSelected('');
    } else {
      setSelected(title);
    }
  };

  const handleClickReset = () => {
    setSelected('');
  };

  const handleSubmit = () => {
    setCollection(selected);
    hide();
    // setKeyword('');
    handler?.();
  };

  useEffect(() => {
    setCollection(selected);
    handler?.();
  }, [selected])
  return (
    <div className={cx('ly_filter')}>
      <div className={cx('search_wrap')}>
        <input
          type="text"
          className={cx('input_search')}
          placeholder="컬렉션 이름을 입력해주세요"
          onChange={e => setKeyword(e.target.value)}
          onKeyPress={onKeyPress}
          value={keyword}
        />
        <button type="button" className={cx('btn_search')}>
          <span className={cx('blind')}>search</span>
          <IconSearch className={cx('ico_search')} />
        </button>
      </div>
      <ul className={cx('detail_list')}>
        {collectionList?.map(item => (
          <li key={item.id}>
            <button type="button" className={cx('btn_detail')} aria-pressed={selected === item.name} onClick={() => handleClick(item.name)}>
              <span className={cx('thumb_area')}>
                <CircleThumb
                  thumbSrc={item.thumbnail_image}
                  width={20}
                  height={20}
                  isOfficial={item.is_official}
                  officialWidth={8}
                  officialHeight={8}
                />
              </span>
              <span className={cx('name_area')}>{item.name}</span>
              <IconCheck className={cx('ico_check')} />
            </button>
          </li>
        ))}
      </ul>
      <div className={cx('btn_area')}>
        <button type="reset" className={cx('btn', 'btn_reset')} onClick={handleClickReset}>초기화</button>
        <button type="submit" className={cx('btn', 'btn_apply')} onClick={handleSubmit}>적용</button>
      </div>
    </div>
  );
};

export default CollectionLayerFilter;
