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


const cx = classNames.bind(styles);

interface IOwnProps {
  networkType: ENetworkType | '';
  setNetworkType: (type: ENetworkType | '') => void;
  hide: () => void;
  update: boolean;
  handler?: () => void;
};

const NetworkLayerFilter: React.FC<IOwnProps> = ({
  networkType,
  setNetworkType,
  hide,
  update,
  handler
}) => {
  const [selected, setSelected] = useState<ENetworkType | ''>(networkType);

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

  const handleClickBlockChainType = (type: ENetworkType) => {
    if (type === selected) {
      setSelected('');
    } else {
      setSelected(type);
    }
  };

  const handleSubmit = () => {
    if (selected) {
      setNetworkType(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 === ENetworkType.ETH}
            onClick={() => handleClickBlockChainType(ENetworkType.ETH)}
          >
            이더리움 (ETH)
            <IconCheck className={cx('ico_check')} />
          </button>
        </li>
        <li>
          <button
            type="button"
            className={cx('btn_detail')}
            aria-pressed={selected === ENetworkType.BSC}
            onClick={() => handleClickBlockChainType(ENetworkType.BSC)}
            aria-disabled
            disabled
          >
            바이낸스 (BSC)
            <IconCheck className={cx('ico_check')} />
          </button>
        </li>
        <li>
          <button
            type="button"
            className={cx('btn_detail')}
            aria-pressed={selected === ENetworkType.MF}
            onClick={() => handleClickBlockChainType(ENetworkType.MF)}
            aria-disabled
            disabled
          >
            메타파이낸스 (MF1)
            <IconCheck className={cx('ico_check')} />
          </button>
        </li>
        <li>
          <button
            type="button"
            className={cx('btn_detail')}
            aria-pressed={selected === ENetworkType.MTRA}
            onClick={() => handleClickBlockChainType(ENetworkType.MTRA)}
            aria-disabled
            disabled
          >
            메타레어 (MTRA)
            <IconCheck className={cx('ico_check')} />
          </button>
        </li>
      </ul>
      <div className={cx('btn_area')}>
        <button type="button" className={cx('btn', selected && 'btn_apply')} onClick={handleSubmit} aria-disabled={!selected} disabled={!selected}>적용</button>
      </div>
    </div>
  );
};

export default NetworkLayerFilter;
