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

const cx = classNames.bind(styles);
export const selectedCurrency = (currency: ECurrencyType) => {
  switch(currency) {
    case ECurrencyType.ETH:
      return "ETH";
    case ECurrencyType.MR:
      return "MTRA";
    case ECurrencyType.MF:
      return "MF1";
  }
}
interface IOwnProps {
  value?: string;
  className?: string;
  placeholder?: string;
  setValue?: (value: string) => void;
  type: ECurrencyType;
  setType?: (type: ECurrencyType) => void;
  useSelectBox?: boolean;
  useInput?: boolean;
}

const InputPrice: React.FC<IOwnProps> = ({
  value,
  className,
  placeholder,
  setValue,
  type,
  setType,
  useSelectBox = true,
  useInput = true,
}) => {
  const [showPriceTypeLayer, setShowPriceTypeLayer] = useState<boolean>(false);

  const handleChangePrice = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.target.value = NumberUtil.replaceOnlyNumber(e.target.value);
    const num1 = e.target.value.split('.')[0];
    const num2 = e.target.value.split('.')[1];
    if(isNaN(Number(e.target.value))) {
      alert('올바른 값을 입력해주세요')
      return;
    }
    if (num2?.length > 5) {
      e.target.value = `${num1}.${num2.slice(0, 5)}`;
    }
    setValue?.(e.target.value);
  };


  const handleClickPriceType = (_type: ECurrencyType) => {
    setType?.(_type);
    setShowPriceTypeLayer(!showPriceTypeLayer);
  };

  return (
    <div className={cx('blockchain_box', className)}>
      <Input
        className={className? cx(className) : cx('input')}
        placeholder={placeholder}
        onChange={handleChangePrice}
        value={value || ''}
        disabled={!useInput}
      />
      <div className={cx('blockchain')}>
        <button type="button" className={cx('btn_unit')} aria-pressed="true" onClick={() => setShowPriceTypeLayer(!showPriceTypeLayer)}>
          {selectedCurrency(type)}
          {useSelectBox && (
            <IcoArrow className={cx('ico_arrow')} />
          )}
        </button>
        {useSelectBox && showPriceTypeLayer && (
          <div className={cx('ly_blockchain')}>
            <ul className={cx('list_blockchain')}>
              <li>
                <button type="button" className={cx('btn_blockchain')} aria-pressed={type === ECurrencyType.ETH} onClick={() => handleClickPriceType(ECurrencyType.ETH)}>
                  <LogoEhtereum className={cx('ico_blockchain')} />
                  ETH
                </button>
              </li>
              <li>
                <button type="button" className={cx('btn_blockchain')} aria-pressed={type === ECurrencyType.MR} onClick={() => handleClickPriceType(ECurrencyType.MR)}>
                  <LogoMetaRare className={cx('ico_blockchain')} />
                  MTRA
                </button>
              </li>
              <li>
                <button type="button" className={cx('btn_blockchain')} aria-pressed={type === ECurrencyType.MR} onClick={() => handleClickPriceType(ECurrencyType.MF)}>
                  <LogoMetafinance className={cx('ico_blockchain')} />
                  MF1
                </button>
              </li>
            </ul>
          </div>
        )}
      </div>
    </div>
  );
};

export default InputPrice;
