import React, { useMemo } from 'react';
import Wrap from '../wrap/Wrap';
import Icon from '../Icons/index';
import { Select } from 'antd';
import { CaretDownOutlined } from '@ant-design/icons';
import { returnClass } from '../unit';

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

function SelectBtn(props: ILabelSelect) {
  const {
    title,
    disabled,
    selectList = [],
    change,
    size = 'normal',
    value,
    paddingSize = 'small',
    selectLoading,
    suffixIcon,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    btnText,
    isEdit
  } = props;

  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">
            <span>{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 Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        {title ? (
          <div className={returnClass(paddingSize)}>{title}</div>
        ) : (
          <></>
        )}
        <div
          className={
            size === 'normal'
              ? 'zl-large-screen-setting-unit-content'
              : 'zl-large-screen-setting-unit-content-large'
          }
        >
          {typeof selectList !== 'string' ? (
            <Select
              suffixIcon={<CaretDownOutlined style={{ color: '#5d6773' }} />}
              loading={selectLoading}
              size="small"
              onChange={(value) => change?.('select', value)}
              listHeight={260}
              // defaultValue={'1'}
              value={value}
              // suffixIcon={<Icon name={suffixIcon} />}
              style={{ width: 'calc(100% - 42px)' }}
              dropdownClassName="zl-large-screen-select"
            >
              {Array.isArray(selectList) &&
                selectList?.length > 0 &&
                selectList?.map((item, index) => {
                  return returnOption(item, index);
                })}
            </Select>
          ) : (
            <div className="select-content">{selectList} </div>
          )}
          {btnText ? (
            <span
              onClick={() => change?.('selectBtn', btnText)}
              className={
                disabled || isEdit
                  ? 'select-btns select-btns-disabled'
                  : 'select-btns'
              }
            >
              {btnText}
            </span>
          ) : (
            <></>
          )}
        </div>
      </Wrap>
    );
  }, [selectList, value, title, disabled]);

  return Redio;
}

export default SelectBtn;

export interface ILabelSelect {
  title: string | number;
  selectList: ISelectList[];
  change: Function;
  size: string;
  value?: string | number;
  paddingSize?: string;
  selectLoading?: boolean;
  suffixIcon?: any;
  wrapStyle?: React.CSSProperties;
  btnText?: string;
  disabled?: boolean;
  isEdit?: boolean;
}

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