import React, { useMemo, useState } from 'react';
import Wrap from '../wrap/Wrap';
import Icon from 'src/components/Icon/index';
import { Select } from 'antd';

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

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

function LabelSelect(props: ILabelSelect) {
  const {
    title,
    selectList = [],
    change,
    size = 'normal',
    value,
    paddingSize,
    selectLoading,
    suffixIcon,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    padding,
    customStyle = {},
    dropdownMatchSelectWidth = true, // 下拉菜单和选择器同宽
    placement = 'bottomLeft', // 选择框弹出的位置
    isError,
    placeholder,
    allowClear = false,
    clearIcon,
    isRequired = false,
    mode
  } = props;
  const [selectValue, setSelectValue] = useState(value);

  const multipleChange = (value) => {
    setSelectValue(value);
  };

  const returnOption = (rest: ISelectList, index: number) => {
    if (rest?.type === 'one') {
      return (
        <Option key={index} value={rest?.key}>
          <div
            className="zl-large-screen-unit-select-item"
            style={{
              justifyContent: rest?.nameType ? '' : 'space-between'
            }}
          >
            {rest?.nameType ? (
              <span
                style={{ color: rest?.nameColor, borderColor: rest?.nameColor }}
                className="title-type"
              >
                {rest?.nameType}
              </span>
            ) : (
              <></>
            )}
            <span
              title={`${rest?.nameType ? rest?.name : ''}`}
              className={`${rest?.nameType ? 'title-value' : ''}`}
            >
              {rest?.name}
            </span>
          </div>
        </Option>
      );
    } else if (rest?.type === 'img') {
      return (
        <Option key={index} value={rest?.key}>
          <div className="zl-large-screen-unit-select-item-img">
            <img src={rest?.img} alt="" className="option-img" />
            <span className="zl-large-screen-unit-select-item-img-title">
              {rest?.name}
            </span>
          </div>
        </Option>
      );
    } else {
      return (
        <Option key={index} value={rest?.key}>
          <div className="zl-large-screen-unit-select-item">
            <span
              className={`zl-large-screen-unit-select-item-one ${
                value === rest.key
                  ? 'zl-large-screen-unit-select-item-one-active'
                  : ''
              }`}
            >
              {rest?.name}
            </span>
            <span className="zl-large-screen-unit-select-item-two">
              {rest?.names}
            </span>
          </div>
        </Option>
      );
    }
  };

  const tagRender = (props) => {
    const { value } = props;
    return value ? <span>{value},</span> : null;
  };

  const Redio = useMemo(() => {
    return (
      <Wrap
        wrapStyle={
          (isError &&
            (mode === 'multiple' ? selectValue?.length > 0 : value) &&
            (mode === 'multiple'
              ? !selectValue?.every((num) =>
                  selectList.some((obj) => obj.key === num)
                )
              : !selectList?.some((item) => item?.key === value))) ||
          (isError && !value)
            ? { alignItems: 'start', ...wrapStyle }
            : wrapStyle
        }
      >
        {title ? (
          <div
            className={returnClass(paddingSize ? paddingSize : 'normal')}
            style={
              (isError &&
                (mode === 'multiple' ? selectValue?.length > 0 : value) &&
                (mode === 'multiple'
                  ? !selectValue?.every((num) =>
                      selectList.some((obj) => obj.key === num)
                    )
                  : !selectList?.some((item) => item?.key === value))) ||
              (isError && !value)
                ? { marginRight: paddingSize ? '' : padding, marginTop: 5 }
                : { marginRight: paddingSize ? '' : padding }
            }
          >
            {title}
          </div>
        ) : (
          <></>
        )}
        <div
          style={
            (isError &&
              (mode === 'multiple' ? selectValue?.length > 0 : value) &&
              (mode === 'multiple'
                ? !selectValue?.every((num) =>
                    selectList.some((obj) => obj.key === num)
                  )
                : !selectList?.some((item) => item?.key === value))) ||
            (isError && !value)
              ? {
                  flexDirection: 'column',
                  overflow: 'visible',
                  alignItems: 'start'
                }
              : {}
          }
          className={
            size === 'normal'
              ? 'zl-large-screen-setting-unit-content'
              : 'zl-large-screen-setting-unit-content-large'
          }
        >
          <Select
            style={{
              ...customStyle,
              minHeight: mode === 'multiple' ? '30px' : '',
              height: mode === 'multiple' ? 'auto' : ''
            }}
            showSearch={false}
            mode={mode}
            allowClear={allowClear}
            size="small"
            onChange={(value) =>
              mode === 'multiple' ? multipleChange(value) : change?.(value)
            }
            onBlur={() => {
              if (mode === 'multiple') {
                change?.(selectValue);
              }
            }}
            showArrow={true}
            tagRender={tagRender}
            listHeight={260}
            // defaultValue={'1'}
            value={mode === 'multiple' ? selectValue : value}
            suffixIcon={<Icon name="icon-arrow-down-filling" />}
            dropdownClassName="zl-large-screen-select"
            placement={placement}
            dropdownMatchSelectWidth={dropdownMatchSelectWidth}
            clearIcon={
              allowClear ? (
                <Icon name={clearIcon} style={{ width: 10, height: 10 }} />
              ) : (
                <></>
              )
            }
            status={
              (isError && !value && isRequired) ||
              (isError &&
                (mode === 'multiple' ? selectValue?.length > 0 : value) &&
                (mode === 'multiple'
                  ? !selectValue?.every((num) =>
                      selectList.some((obj) => obj.key === num)
                    )
                  : !selectList?.some((item) => item?.key === value)))
                ? 'error'
                : ''
            }
            placeholder={placeholder}
          >
            {Array.isArray(selectList) &&
              selectList?.length > 0 &&
              selectList?.map((item, index) => {
                return returnOption(item, index);
              })}
          </Select>
          {isError ? (
            <span className="select-error-text">
              {isError &&
              (mode === 'multiple' ? selectValue?.length > 0 : value) &&
              (mode === 'multiple'
                ? !selectValue?.every((num) =>
                    selectList.some((obj) => obj.key === num)
                  )
                : !selectList?.some((item) => item?.key === value))
                ? '字段失效请重新选择'
                : isError && !value && isRequired
                ? '该字段是必填字段'
                : ''}
            </span>
          ) : (
            <></>
          )}
        </div>
      </Wrap>
    );
  }, [selectList, value, title, allowClear, selectValue]);

  return Redio;
}

export default LabelSelect;

export interface ILabelSelect {
  title: string | number;
  selectList: ISelectList[];
  change: Function;
  size: string;
  value?: any;
  paddingSize?: string;
  selectLoading?: boolean;
  suffixIcon?: any;
  wrapStyle?: React.CSSProperties;
  padding?: number;
  customStyle?: React.CSSProperties;
  dropdownMatchSelectWidth?: boolean;
  placement?: string;
  isError?: boolean;
  placeholder?: string;
  allowClear?: boolean;
  clearIcon?: string;
  mode?: string;
  isRequired?: boolean;
}

export interface ISelectList {
  key: number | string;
  name: string | number;
  type: string;
  names?: string;
  img?: string;
  nameType?: string;
  nameColor?: string;
}