import React, { useEffect, useState } from 'react';
import classNames from 'classnames/bind';
import styles from './PriceRangeLayerFilter.scss';
import { ReactComponent as IcoEhtereum } from '@assets/img/svg/logo_ethereum.svg';
import { ReactComponent as IcoArrow } from '@assets/img/svg/ico_arrow_down.svg';
import { ReactComponent as LogoMetaRare } from '@assets/img/svg/logo_metarare.svg';
import { ReactComponent as LogoMetaFinance } from '@assets/img/svg/logo_metafinance.svg';
import { ECurrencyType } from '@src/constants/Enums';
import NumberUtil from '@src/utils/NumberUtil';
import { selectedCurrency as getSelectedCurrency } from '@src/components/common/InputPrice';

const cx = classNames.bind(styles);

interface IOwnProps {
  selectedCurrency: ECurrencyType;
  setSelectedCurrency: (type: ECurrencyType) => void;
  minPrice: string;
  setMinPrice: (price: string) => void;
  maxPrice: string;
  setMaxPrice: (price: string) => void;
  hide: () => void;
  update: boolean;
  handler?: () => void;
};

const PriceRangeLayerFilter: React.FC<IOwnProps> = ({
  selectedCurrency,
  setSelectedCurrency,
  minPrice,
  setMinPrice,
  maxPrice,
  setMaxPrice,
  hide,
  update,
  handler
}) => {
  const [selectedUnit, setSelectedUnit] = useState<ECurrencyType>(selectedCurrency);
  const [minimunPrice, setMinimunPrice] = useState<string>(minPrice);
  const [maximunPrice, setMaximunPrice] = useState<string>(maxPrice);
  const [showBlockChain, setShowBlockChain] = useState<boolean>(false);

  useEffect(() => {
    setSelectedUnit(selectedCurrency);
    setMinimunPrice(minPrice);
    setMaximunPrice(maxPrice);
  }, [update]);

  const handleClickBlockChain = (type: ECurrencyType) => {
    setSelectedUnit(type);

    setShowBlockChain(false);
  };

  const handleChangeMin = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMinimunPrice(NumberUtil.replaceOnlyNumber(e.target.value));
  };

  const handleChangeMax = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMaximunPrice(NumberUtil.replaceOnlyNumber(e.target.value));
  };

  const handleclickSubmit = () => {
    if (Number(minimunPrice) > Number(maximunPrice)) {
      alert('최소값이 최대값보다 작은 금액이여야 합니다.');
      return;
    }
    setSelectedCurrency(selectedUnit);
    setMinPrice(minimunPrice);
    setMaxPrice(maximunPrice);
    hide();
    handler?.();
  };

  return (
    <div className={cx('ly_filter')}>
      <div className={cx('price_wrap')}>
        <div className={cx('blockchain_area')}>
          <button type="button" className={cx('btn_blockchain')} aria-pressed="true" onClick={() => setShowBlockChain(!showBlockChain)}>
            <div className={cx('blockchain')}>
              {selectedUnit === ECurrencyType.ETH && (
                <IcoEhtereum className={cx('ico_blockchain')} />
              )}
              {selectedUnit === ECurrencyType.MR && (
                <LogoMetaRare className={cx('ico_blockchain')} />
              )}
              {selectedUnit === ECurrencyType.MF && (
                <LogoMetaFinance className={cx('ico_blockchain')} />
              )}
              {getSelectedCurrency(selectedUnit)}
            </div>
            <IcoArrow className={cx('ico_arrow')} />
          </button>
          {showBlockChain && (
            <div className={cx('ly_blockchain')}>
              <ul className={cx('list_blockchain')}>
                <li>
                  <button
                    type="button"
                    className={cx('btn_blockchain')}
                    aria-pressed={selectedUnit === ECurrencyType.ETH}
                    onClick={() => handleClickBlockChain(ECurrencyType.ETH)}
                  >
                    <IcoEhtereum className={cx('ico_blockchain')} />
                    ETH
                  </button>
                </li>
                <li>
                  <button
                    type="button"
                    className={cx('btn_blockchain')}
                    aria-pressed={selectedUnit === ECurrencyType.MR}
                    onClick={() => handleClickBlockChain(ECurrencyType.MR)}
                  >
                    <LogoMetaRare className={cx('ico_blockchain')} />
                    MTRA
                  </button>
                </li>
                <li>
                  <button
                    type="button"
                    className={cx('btn_blockchain')}
                    aria-pressed={selectedUnit === ECurrencyType.MF}
                    onClick={() => handleClickBlockChain(ECurrencyType.MF)}
                  >
                    <LogoMetaFinance className={cx('ico_blockchain')} />
                    MF1
                  </button>
                </li>
              </ul>
            </div>
          )}
        </div>
        <div className={cx('price_area')}>
          <input type="text" className={cx('input_price')} placeholder='최소' onChange={handleChangeMin} value={minimunPrice} />
          <span className={cx('tilde')}>~</span>
          <input type="text" className={cx('input_price')} placeholder='최대' onChange={handleChangeMax} value={maximunPrice} />
        </div>
      </div>
      <div className={cx('btn_area')}>
        <button type="submit" className={cx('btn', 'btn_apply')} onClick={handleclickSubmit} disabled={(Number(minimunPrice) > Number(maximunPrice))} aria-disabled={(Number(minimunPrice) > Number(maximunPrice))}>적용</button>
      </div>
    </div>
  );
};

export default PriceRangeLayerFilter;
