import React, { useEffect, useState } from 'react';
import classNames from 'classnames/bind';
import styles from './SaleTypeLayerFilter.scss';
import { ReactComponent as IconCheck } from '@assets/img/svg/ico_check_pink2.svg';
import { ESaleType } from '@src/constants/Enums';

const cx = classNames.bind(styles);

interface IOwnProps {
  saleType: ESaleType | '';
  setSaleType: (type: ESaleType | '') => void;
  hide: () => void;
  update: boolean;
  handler?: () => void;
};

const SaleTypeLayerFilter: React.FC<IOwnProps> = ({
  saleType,
  setSaleType,
  hide,
  update,
  handler
}) => {
  const [selected, setSelected] = useState<ESaleType | ''>(saleType);

  useEffect(() => {
    setSelected(saleType);
  }, [update]);

  const handleClick = (type: ESaleType) => {
    if (type === selected) {
      setSelected('');
    } else {
      setSelected(type);
    }
  };

  const handleSubmit = () => {
    setSaleType(selected);
    hide();
    handler?.();
  };

  return (
    <div className={cx('ly_filter')}>
      <ul className={cx('detail_list')}>
        <li>
          <button
            type="button"
            className={cx('btn_detail')}
            aria-pressed={selected === ESaleType.FIXED}
            onClick={() => handleClick(ESaleType.FIXED)}
          >
            💰 지정가
            <IconCheck className={cx('ico_check')} />
          </button>
        </li>
        <li>
          <button
            type="button"
            className={cx('btn_detail')}
            aria-pressed={selected === ESaleType.AUCTION}
            onClick={() => handleClick(ESaleType.AUCTION)}
          >
            🚀 입찰가
            <IconCheck className={cx('ico_check')} />
          </button>
        </li>
        <li>
          <button
            type="button"
            className={cx('btn_detail')}
            aria-pressed={selected === ESaleType.TIME}
            onClick={() => handleClick(ESaleType.TIME)}
          >
            🔥 타임옥션
            <IconCheck className={cx('ico_check')} />
          </button>
        </li>
      </ul>
      <div className={cx('btn_area')}>
        <button type="submit" className={cx('btn', 'btn_apply')} onClick={handleSubmit}>적용</button>
      </div>
    </div>
  );
};

export default SaleTypeLayerFilter;
