import React, { useMemo } from 'react';

import Wrap from '../wrap/Wrap';

import { Input, Select } from 'antd';
import { returnClass } from '../unit';

import '../g.scss';
const { Option } = Select;

function LabelselectAndNumberInput(props: ISelectAndNumberInput) {
  const {
    title = 'lable',
    selectValue,
    disabledStatus,
    value,
    selectList,
    change,
    size = 'normal',
    paddingSize = 'normal',
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const returnOption = (rest: any, index: number) => {
    return (
      <Option key={index} value={rest}>
        {rest}
      </Option>
    );
  };

  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className={returnClass(paddingSize)}>{title}</div>
        <div
          className={
            size === 'normal'
              ? 'zl-large-screen-setting-unit-content'
              : 'zl-large-screen-setting-unit-content-large'
          }
        >
          <Select
            size="small"
            value={selectValue}
            listHeight={260}
            onChange={(e) => change?.(e, 'select')}
            dropdownClassName="zl-large-screen-select"
          >
            {Array.isArray(selectList) &&
              selectList?.length > 0 &&
              selectList?.map((item, index) => {
                return returnOption(item.name, index);
              })}
          </Select>
          <Input
            style={{ marginLeft: 4, width: 60 }}
            value={disabledStatus ? '' : value}
            size="small"
            disabled={disabledStatus}
            onChange={(e) => change?.(e.target.value, 'change')}
            onPressEnter={(e) => {
              e.preventDefault();
              e.stopPropagation();
              change?.(e.target.value, 'blur');
            }}
            onBlur={(e) => change?.(e.target.value, 'blur')}
          />
        </div>
      </Wrap>
    );
  }, [title, value, disabledStatus, selectList, selectValue, paddingSize]);

  return Redio;
}

export default LabelselectAndNumberInput;

export interface ISelectAndNumberInput {
  title?: string | number;
  selectValue?: string | number;
  disabledStatus?: boolean;
  value?: string | number;
  selectList?: ISelectList[];
  change?: Function;
  size?: string;
  paddingSize?: string;
  wrapStyle?: React.CSSProperties;
}

export interface ISelectList {
  key: number | string;
  name: string | number;
}