/*
 * @Author: your name
 * @Date: 2021-12-17 10:12:52
 * @Description:
 * @FilePath: \zl-business\src\components\Unit\colorPick\index.tsx
 */

import React, { useMemo } from 'react';
import Wrap from '../wrap/Wrap';
import { Upload } from 'antd';
import '../g.scss';

function UploadWrap(props: IUploadWrap) {
  const {
    value,
    change,
    imgText,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const rendertext = (imgText: any): any => {
    if (typeof imgText === 'string') {
      return <span>{imgText}</span>;
    } else {
      return (
        <span className="zl-large-screen-label-mask-layer-span-wrap">
          {Array.isArray(imgText) &&
            imgText?.length > 0 &&
            imgText.map((item, index) => {
              return (
                <span
                  key={index}
                  onClick={(e) => {
                    e.stopPropagation();
                    change?.(null, item);
                  }}
                >
                  {item}
                </span>
              );
            })}
        </span>
      );
    }
  };

  const Dom = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <Upload
          className="zl-large-screen-upload"
          // listType="picture-card"
          showUploadList={false}
          beforeUpload={(file, fileList) =>
            change?.([file, fileList], 'beforeUpload')
          }
          onChange={(file, fileList, event) =>
            change?.([file, fileList, event], 'change')
          }
        >
          <div className="zl-large-screen-upload-wrap">
            <img src={value} alt="背景图" />
            <div className="zl-large-screen-upload-wrap-mask-layer">
              {rendertext(imgText)}
            </div>
          </div>
        </Upload>
      </Wrap>
    );
  }, [value, imgText, wrapStyle]);

  return Dom;
}

export default UploadWrap;

export interface IUploadWrap {
  value: string;
  change?: Function;
  imgText?: any;
  wrapStyle: React.CSSProperties;
}