import React from 'react';
import classNames from 'classnames/bind';
import styles from './SideFilter.scss';
import { ReactComponent as IconList } from '@assets/img/svg/ico_list_gray.svg';
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 IconSend } from '@assets/img/svg/ico_send_gray.svg';
import { ReactComponent as IconDelete } from '@assets/img/svg/ico_delete_gray.svg';
import { ReactComponent as IconAuction } from '@assets/img/svg/ico_auction_gray.svg';
import { ReactComponent as IconHeart } from '@assets/img/svg/ico_heart_gray.svg';
import { EActivity } from '@src/constants/Enums';

const cx = classNames.bind(styles);

interface IOwnProps {
  selectedActivityFilter: EActivity[];
  setSelectedFilterType: (filter: EActivity[]) => void;
};

const SideFilter: React.FC<IOwnProps> = ({
  selectedActivityFilter,
  setSelectedFilterType
}) => {
  const handleClickType = (type: EActivity) => {
    if (selectedActivityFilter.includes(type)) {
      setSelectedFilterType(selectedActivityFilter.filter(item => item !== type));
    } else {
      setSelectedFilterType([...selectedActivityFilter, type]);
    }
  };

  return (
    <ul className={cx('side_filter')}>
      <li className={cx('sort_item')}>
        <button type="button" className={cx('btn_sort')} onClick={() => handleClickType(EActivity.CREATE)} aria-pressed={selectedActivityFilter.includes(EActivity.CREATE)}>
          {/* 필터 레이어 아이콘 클래스
          공통: ico_sort
          구매: ico_buy 추가
          판매: ico_sale 추가
          좋아요: ico_heart 추기  */}
          <IconList className={cx('ico_sort')} />
          <span className={cx('sort')}>등록</span>
        </button>
      </li>
      <li className={cx('sort_item')}>
        <button type="button" className={cx('btn_sort')} onClick={() => handleClickType(EActivity.PURCHASE)} aria-pressed={selectedActivityFilter.includes(EActivity.PURCHASE)}>
          <IconBuy className={cx('ico_sort', 'ico_buy')} />
          <span className={cx('sort')}>구매</span>
        </button>
      </li>
      <li className={cx('sort_item')}>
        <button type="button" className={cx('btn_sort')} onClick={() => handleClickType(EActivity.SELL)} aria-pressed={selectedActivityFilter.includes(EActivity.SELL)}>
          <IconSale className={cx('ico_sort', 'ico_sale')} />
          <span className={cx('sort')}>판매</span>
        </button>
      </li>
      <li className={cx('sort_item')}>
        <button type="button" className={cx('btn_sort')} onClick={() => handleClickType(EActivity.TRANSFER)} aria-pressed={selectedActivityFilter.includes(EActivity.TRANSFER)}>
          <IconSend className={cx('ico_sort')} />
          <span className={cx('sort')}>전송</span>
        </button>
      </li>
      <li className={cx('sort_item')}>
        <button type="button" className={cx('btn_sort')} onClick={() => handleClickType(EActivity.BURN)} aria-pressed={selectedActivityFilter.includes(EActivity.BURN)}>
          <IconDelete className={cx('ico_sort')} />
          <span className={cx('sort')}>삭제</span>
        </button>
      </li>
      <li className={cx('sort_item')}>
        <button type="button" className={cx('btn_sort')} onClick={() => handleClickType(EActivity.BID)} aria-pressed={selectedActivityFilter.includes(EActivity.BID)}>
          <IconAuction className={cx('ico_sort')} />
          <span className={cx('sort')}>경매</span>
        </button>
      </li>
      <li className={cx('sort_item')}>
        <button type="button" className={cx('btn_sort')} onClick={() => handleClickType(EActivity.LIKE)} aria-pressed={selectedActivityFilter.includes(EActivity.LIKE)}>
          <IconHeart className={cx('ico_sort', 'ico_heart')} />
          <span className={cx('sort')}>좋아요</span>
        </button>
      </li>
    </ul>
  );
};

export default SideFilter;
