import React, { useState } from 'react';
import classNames from 'classnames/bind';
import styles from './Filter.scss';
import { ReactComponent as IconFilter } from '@assets/img/svg/ico_filter.svg';
import { ReactComponent as IconFilterGray } from '@assets/img/svg/ico_filter_gray.svg';
import { EExploreFilter } from '@src/constants/Enums';
import { ReactComponent as IconCheck } from '@assets/img/svg/ico_check_pink2.svg';

const cx = classNames.bind(styles);

interface IOwnProps {
  selectedFilterType: EExploreFilter | '';
  setSelectedFilterType: (filter: EExploreFilter | '') => void;
};

const Filter: React.FC<IOwnProps> = ({
  selectedFilterType,
  setSelectedFilterType
}) => {
  const [showFilterMenu, setShowFilterMenu] = useState<boolean>(false);

  const handleClickType = (type: EExploreFilter) => {
    if (type === selectedFilterType) {
      setSelectedFilterType('');
    } else {
      setSelectedFilterType(type);
    }
    setShowFilterMenu(false);
  };

  return (
    <div className={cx('filter')}>
      <button type="button" className={cx('btn_filter')} onClick={() => setShowFilterMenu(!showFilterMenu)}>
        <div className={cx('mo_wrapper', 'btn_filter_m')}>
          <IconFilter className={cx('ico_filter')} />
        </div>
        <div className={cx('pc_wrapper', 'btn_filter_pc')}>
          <IconFilterGray className={cx('ico_filter_pc')} />
          필터
        </div>
      </button>
      {showFilterMenu && (
        <div className={cx('ly_menu')}>
          <ul className={cx('menu_list')}>
            <li className={cx('menu_item')}>
              <button type="button" className={cx('btn_menu')} onClick={() => handleClickType(EExploreFilter.NEW)} aria-selected={selectedFilterType === EExploreFilter.NEW}>
                최신순
                <IconCheck className={cx('ico_check')} />
              </button>
            </li>
            <li className={cx('menu_item')}>
              <button type="button" className={cx('btn_menu')} onClick={() => handleClickType(EExploreFilter.ROW_PRICE)} aria-selected={selectedFilterType === EExploreFilter.ROW_PRICE}>
                가격낮은순
                <IconCheck className={cx('ico_check')} />
              </button>
            </li>
            <li className={cx('menu_item')}>
              <button type="button" className={cx('btn_menu')} onClick={() => handleClickType(EExploreFilter.HIGH_PRICE)} aria-selected={selectedFilterType === EExploreFilter.HIGH_PRICE}>
                가격높은순
                <IconCheck className={cx('ico_check')} />
              </button>
            </li>
          </ul>
        </div>
      )}
    </div>
  );
};

export default Filter;
