import React, { useMemo } from 'react';
import Wrap from '../wrap/Wrap';
import Icon from '../../Icon/index';
import { Select } from 'antd';
import { returnClass } from '../unit';

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

function LabelSearchSelect(props: ILabelSearchSelect) {
  const {
    title = 'label',
    size = 'lager',
    value,
    disabled=false,
    paddingSize = 'normal',
    placeholderValue='',
    selectList=[],
    selectLoading,
    change,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const optionsDom = () => {
    Array.isArray(selectList) &&
      selectList?.length > 0 &&
      selectList?.map((item) => {
        return (
          <Option key={item?.key} value={value}>
            {item?.name}
          </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
            mode="tags"
            placeholder={placeholderValue}
            allowClear
            disabled={disabled}
            dropdownClassName="zl-large-screen-select-wrapper"
            // value={value}
            tokenSeparators={[',']}
            loading={selectLoading}
            onChange={(value) => {
              change?.(value);
            }}

          >
            {optionsDom}
          </Select>
        </div>
      </Wrap>
    );
  }, [
    value,
    title,
    paddingSize,
    placeholderValue,
    selectList,
    selectList,
    selectLoading
  ]);

  return Redio;
}

export default LabelSearchSelect;

export interface ILabelSearchSelect {
  title: string | number;
  change: Function;
  size: string;
  value?: string | number;
  paddingSize?: string;
  placeholderValue?: string;
  selectList?: any[];
  disabled?: boolean;
  selectLoading?: boolean;
  wrapStyle?: React.CSSProperties;
}