import React, { useMemo, useRef } from 'react';

import Wrap from '../wrap/Wrap';
import Icon from 'src/components/Icon/index';

import { Select } from 'antd';
import { CaretDownOutlined } from '@ant-design/icons';

import '../g.scss';

const { Option } = Select;

function LabelIcontUploadSelect(props: ILabelIcontUploadSelect) {
  const {
    title = 'label',
    titleIcon,
    change,
    selectValue='',
    selectList=[],
    imgUrl,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const isShow = useRef(null);

  const enter = (e: any) => {
    isShow.current.style.display = 'block';
  };

  const leave = (e: any) => {
    isShow.current.style.display = 'none';
  };

  const returnOption = (rest: ISelectList, index: number) => {
    if (typeof rest.value === 'number') {
      return (
        <Option key={index} value={selectValue}>
          {rest?.value}
        </Option>
      );
    } else {
      return (
        <Option key={index} value={selectValue}>
          {rest?.value}
        </Option>
      );
    }
  };

  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className="zl-largen-screen-upload-select-wrap">
          <div className="zl-largen-screen-upload-select-wrap-title">
            {title}
            {titleIcon ? (
              <Icon
                name={titleIcon}
                style={{ marginLeft: '8px' }}
                click={() => {
                  change?.(null, 'icon');
                }}
              />
            ) : (
              <></>
            )}
          </div>
          <div
            className="zl-large-screen-label-upload-show-img"
            onMouseEnter={enter}
            onMouseLeave={leave}
            style={{ marginBottom: '5px' }}
          >
            {imgUrl ? <img src={imgUrl} alt="图片" /> : <></>}
            <div
              className="zl-large-screen-label-upload-show-mask-layer"
              ref={isShow}
            >
              <span className="zl-large-screen-label-mask-layer-span-wrap">
                <span
                  className="zl-large-screen-label-mask-layer-updata"
                  onClick={(e) => {
                    e.stopPropagation();
                    change?.(null, '上传');
                  }}
                >
                  上传
                </span>
                <span
                  className="zl-large-screen-label-mask-layer-del"
                  onClick={(e) => {
                    e.stopPropagation();
                    change?.(null, '更改');
                  }}
                >
                  删除
                </span>
              </span>
            </div>
          </div>
          <Select
            size="middle"
            value={selectValue}
            onChange={(value) => change?.(value, 'select')}
            dropdownClassName='zl-large-screen-select'
            suffixIcon={
              <CaretDownOutlined
                style={{ color: '#fff' }}
                defaultValue={selectValue}
              />
            }
          >
            {Array.isArray(selectList) &&
              selectList?.length > 0 &&
              selectList?.map((item, index) => {
                return returnOption(item, index);
              })}
          </Select>
        </div>
      </Wrap>
    );
  }, [title, selectValue, titleIcon, imgUrl, selectList]);

  return Redio;
}

export default LabelIcontUploadSelect;

export interface ILabelIcontUploadSelect {
  title?: any;
  change?: Function;
  size?: string;
  titleIcon?: string;
  imgUrl?: string;
  selectList: ISelectList[];
  selectValue?: string | number;
  wrapStyle?: React.CSSProperties;
}
export interface ISelectList {
  key: string | number;
  value?: number | string;
}