import React, { useMemo,useState,useEffect } from 'react';
import { InputNumber, Dropdown, Menu } from 'antd';
import Icon from '../../Icon/index';
import '../g.scss';

let stopBlur= false; // 阻止回车后立即失焦
function LabelInputSelect(props: IInputSelect) {
  const { list, change, valueData, placeholder = '', min, max } = props;
  const [value,setValue] = useState(valueData);
  const changeSelect = (value: string | number, type: string) => {
    change?.(value, type);
  };
  useEffect(() =>{
    setValue(valueData);
  },[valueData])

  const menu = (
    <Menu
      items={list}
      triggerSubMenuAction={'click'}
      selectedKeys={[`${valueData}`]}
      onClick={({ key }) => {
        changeSelect(key, 'select');
      }}
    />
  );
  // const Redio = useMemo(() => {
    return (
      <div className="zl-ls-unit-content">
        <Dropdown
          overlayClassName="zl-ls-font-size-select"
          align={{
            offset: [0, 14]
          }}
          overlay={menu}
          trigger="click"
        >
          <div className="zl-ls-font-size-select-wrap">
            <InputNumber
              placeholder={placeholder}
              value={value}
              controls={false}
              size="small"
              onChange={(value) => {
                setValue(value);
                stopBlur = false;
                changeSelect(value, 'change');
              }}
              onPressEnter={(e) => {
                stopBlur = true;
                e.preventDefault();
                e.stopPropagation();
                if (
                  e?.target?.value !== '' &&
                  !isNaN(parseInt(e.target.value))
                ) {
                  let value =
                    parseInt(e.target.value) < min
                      ? min
                      : parseInt(e.target.value);
                  let newValue = value > max ? max : value;
                  changeSelect(newValue, 'blur');
                } else {
                  changeSelect(valueData, 'blur');
                }
              }}
              onBlur={(e) => {
                if(!stopBlur){
                if (
                  e?.target?.value !== '' &&
                  !isNaN(parseInt(e.target.value))
                ) {
                  let value =
                    parseInt(e.target.value) < min
                      ? min
                      : parseInt(e.target.value);
                  let newValue = value > max ? max : value;
                  changeSelect(newValue, 'blur');
                } else {
                  changeSelect(valueData, 'blur');
                }
                }

              }}
            />
            <Icon
              name="icon-arrow-down-filling"
              style={{ width: '8px', height: '8px' }}
            />
          </div>
        </Dropdown>
      </div>
    );
  // }, [value, list]);

  // return Redio;
}

export default LabelInputSelect;
export interface IInputSelect {
  label?: string;
  list?: string[] | number[];
  change?: Function;
  size?: string;
  valueData?: string | number;
  placeholder?: string;
  min?: number;
  max?: number;
}