import React, { useMemo ,useEffect} from 'react';
import Wrap from '../wrap/Wrap';
import Icon from 'src/components/Icon/index';
import { InputNumber, Dropdown, Menu } from 'antd';

import { returnClass } from '../unit';

import '../g.scss';
let isSelect = false;

function LabelNumberInputSelect(props: ILabelNumberInputSelect) {
  const {
    options,
    change,
    value,
    placeholder = '',
    min,
    max,
    paddingSize,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    title,
    size = 'normal',
    padding
  } = props;
  const changeSelect = (value: string | number, type: string) => {
    change?.(value, type);
  };

  useEffect(() => {
    window.addEventListener('mousedown', (e:any) => {
      if (e?.target?.className === "zl-ant-dropdown-menu-title-content" || e?.target?.className === "ant-dropdown-menu-title-content" || e?.target?.className === "zl-ls-ant-dropdown-menu-title-content") {
        isSelect = true;
      }
    })
  }, []);


  const menu = (
    <Menu
      style={{ maxHeight: '260px', overflow: 'auto' }}
      items={options}
      triggerSubMenuAction={'click'}
      selectedKeys={[`${value}`]}
      onClick={({ key }) => {
        changeSelect(key, 'select');
        isSelect = false;
      }}
    />
  );

  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        {title ? (
          <div
            className={returnClass(paddingSize ? paddingSize : 'normal')}
            style={{ marginRight: paddingSize ? '' : padding }}
          >
            {title}
          </div>
        ) : (
          <></>
        )}

        <div
          className={
            size === 'normal'
              ? 'zl-large-screen-setting-unit-content'
              : 'zl-large-screen-setting-unit-content-large'
          }
        >
          <Dropdown
            overlayClassName="zl-ls-numberinput-select-font"
            overlay={menu}
            trigger={['click']}
          >
            <div className="zl-ls-numberinput-select-wrap">
              <InputNumber
                placeholder={placeholder}
                value={value}
                controls={false}
                size="small"
                onChange={(value) => {
                  changeSelect(value, 'change');
                }}
                onPressEnter={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  if (e?.target?.value !== '' && !isNaN(e.target.value)) {
                    let value = e.target.value < min ? min : e.target.value;
                    let newValue = value > max ? max : value;
                    changeSelect(newValue, 'blur');
                  } else {
                    changeSelect(value, 'blur');
                  }
                }}
                onBlur={(e) => {
                  if(isSelect) {return}
                  if (e?.target?.value !== '' && !isNaN(e.target.value)) {
                    let value = e.target.value < min ? min : e.target.value;
                    let newValue = value > max ? max : value;
                    changeSelect(newValue, 'blur');
                  } else {
                    changeSelect(value, 'blur');
                  }
                }}
              />
              <Icon
                classname="zl-large-screen-select-inputnumber-icon"
                name="icon-arrow-down-filling"
                style={{ width: '12px', height: '12px' }}
              />
            </div>
          </Dropdown>
        </div>
      </Wrap>
    );
  }, [value, options]);

  return Redio;
}

export default LabelNumberInputSelect;

export interface ILabelNumberInputSelect {
  label?: string;
  options?: string[] | number[];
  change?: Function;
  size?: string;
  value?: string | number;
  placeholder?: string;
  min?: number;
  max?: number;
  wrapStyle?: React.CSSProperties;
  paddingSize?: string;
  title?: string;
  padding?: number
}