import React, { useState } from 'react';
import classNames from 'classnames/bind';

import styles from './ExploreFilter.scss';
import { ReactComponent as IconBuy } from '@assets/img/svg/ico_buy_gray.svg';
import { ReactComponent as IconSale } from '@assets/img/svg/ico_sale_gray.svg';
import { ReactComponent as IconCategory } from '@assets/img/svg/ico_category_gray.svg';
import { ReactComponent as IconCollection } from '@assets/img/svg/ico_collection_gray.svg';
import Tippy from '@tippyjs/react';
import Filter from './Filter';
import BlockChainLayerFilter from '../layerFilter/NetworkLayerFilter';
import CategoryLayerFilter from '../layerFilter/CategoryLayerFilter';
import CollectionLayerFilter from '../layerFilter/CollectionLayerFilter';
import SaleTypeLayerFilter from '../layerFilter/SaleTypeLayerFilter';
import PriceRangeLayerFilter from '../layerFilter/PriceRangeLayerFilter';
import { ENetworkType, ECategory, ESaleType, ECurrencyType, EExploreFilter } from '@src/constants/Enums';

const cx = classNames.bind(styles);

export interface IExploreFilter {
  networkType: ENetworkType | '';
  setNetworkType: (value: ENetworkType | '') => void;
  collection: string;
  setCollection: (value: string) => void;
  saleType: ESaleType | '';
  setSaleType: (value: ESaleType | '') => void;
  selectedCurrency: ECurrencyType;
  setSelectedCurrency: (value: ECurrencyType) => void;
  minPrice: string;
  setMinPrice: (value: string) => void;
  maxPrice: string;
  setMaxPrice: (value: string) => void;
  handler?: () => void;
  selectedFilterType: EExploreFilter | '';
  setSelectedFilterType: (filter: EExploreFilter | '') => void;
};

const ExploreFilter: React.FC<IExploreFilter> = ({
  networkType,
  setNetworkType,
  collection,
  setCollection,
  saleType,
  setSaleType,
  selectedCurrency,
  setSelectedCurrency,
  minPrice,
  setMinPrice,
  maxPrice,
  setMaxPrice,
  handler,
  selectedFilterType,
  setSelectedFilterType
}) => {
  const [instance, setInstance] = useState<any>(null);
  const [update, setUpdate] = useState<boolean>(false);

  return (
    <div className={cx('filter_wrap')}>
      <div className={cx('category_group')}>
        <div className={cx('category_scroll')}>
          <ul className={cx('category_list')}>
            <li className={cx('item')}>
              <Tippy
                trigger="click"
                placement="bottom-start"
                interactive={true}
                content={
                  <BlockChainLayerFilter
                    networkType={networkType}
                    setNetworkType={setNetworkType}
                    hide={instance?.hide}
                    update={update}
                    handler={handler}
                  />}
                appendTo={document.body}
                onShow={setInstance}
                onHidden={() => setUpdate(!update)}
                animation={false}
              >
                <button className={cx('btn_category')}>
                  {/* 카테고리 아이콘 클래스
                  공통: ico_category
                  블록 체인: ico_blockchain 
                  카테고리: ico_dots
                  컬렉션: ico_collection */}
                  <i className={cx('ico_category', 'ico_blockchain')}></i>
                  <span className={cx('category')}>블록체인</span>
                </button>
              </Tippy>
            </li>
            {/* <li className={cx('item')}>
              <Tippy
                trigger="click"
                placement="bottom-start"
                interactive={true}
                content={
                  <CategoryLayerFilter
                    selected={category}
                    setSelected={setCategory}
                    hide={instance?.hide}
                  />}
                appendTo={document.body}
                onShow={setInstance}
                animation={false}
              >
                <button className={cx('btn_category')}>
                  <IconCategory className={cx('ico_category', 'ico_dots')} />
                  <span className={cx('category')}>카테고리</span>
                </button>
              </Tippy>
            </li> */}
            <li className={cx('item')}>
              <Tippy
                trigger="click"
                placement="bottom-start"
                interactive={true}
                content={
                  <CollectionLayerFilter
                    collection={collection}
                    setCollection={setCollection}
                    hide={instance?.hide}
                    update={update}
                    handler={handler}
                  />}
                appendTo={document.body}
                onShow={setInstance}
                onHidden={() => setUpdate(!update)}
                animation={false}
              >
                <button className={cx('btn_category')}>
                  <IconCollection className={cx('ico_category', 'ico_collection')} />
                  <span className={cx('category')}>컬렉션</span>
                </button>
              </Tippy>
            </li>
            <li className={cx('item')}>
              <Tippy
                trigger="click"
                placement="bottom-start"
                interactive={true}
                content={
                  <SaleTypeLayerFilter
                    saleType={saleType}
                    setSaleType={setSaleType}
                    hide={instance?.hide}
                    update={update}
                    handler={handler}
                  />
                }
                appendTo={document.body}
                onShow={setInstance}
                onHidden={() => setUpdate(!update)}
                animation={false}
              >
                <button className={cx('btn_category')}>
                  <IconSale className={cx('ico_category')} />
                  <span className={cx('category')}>판매타입</span>
                </button>
              </Tippy>
            </li>
            <li className={cx('item')}>
              <Tippy
                trigger="click"
                placement="bottom-start"
                interactive={true}
                content={<PriceRangeLayerFilter
                  selectedCurrency={selectedCurrency}
                  setSelectedCurrency={setSelectedCurrency}
                  minPrice={minPrice}
                  setMinPrice={setMinPrice}
                  maxPrice={maxPrice}
                  setMaxPrice={setMaxPrice}
                  hide={instance?.hide}
                  update={update}
                  handler={handler}
                />}
                appendTo={document.body}
                onShow={setInstance}
                onHidden={() => setUpdate(!update)}
                animation={false}
              >
                <button className={cx('btn_category')}>
                  <IconBuy className={cx('ico_category')} />
                  <span className={cx('category')}>가격범위</span>
                </button>
              </Tippy>
            </li>
          </ul>
        </div>
      </div>
      <Filter selectedFilterType={selectedFilterType} setSelectedFilterType={setSelectedFilterType} />
    </div >
  );
};

export default ExploreFilter;
