import React, { useMemo } from 'react';

import Wrap from '../wrap/Wrap';

import { Upload } from 'antd';

import '../g.scss';

function ClickButtonUpload(props: IButtonAdd) {
  let timer = null;
  const {
    title = '',
    change,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    type,
    labelIcon = <></>,
    style,
    labelWarpStyle
  } = props;

  const Dom = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <Upload
          maxCount={1}
          accept=".png,.jpeg,.gif,.jpg,.mp4,.avi,.webm"
          name="file"
          listType="text"
          showUploadList={false}
          onChange={(info) => {
            change?.(info, 'changeUpload');
            return false;
          }}
          beforeUpload={(info, fileList) => {
            //防抖
            clearTimeout(timer);
            timer = setTimeout(() => {
              change?.({ file: info, fileList: fileList }, 'beforeUpload');
            }, 300);
            return false;
          }}
        >
          <div
            style={style ? style : { width: '201px' }}
            className={
              type === 'haveStyle'
                ? 'zl-large-screen-setting-unit-click-btn'
                : 'zl-large-screen-setting-unit-click-title'
            }
          >
            <span style={labelWarpStyle ? labelWarpStyle : {}}>
              {labelIcon}
              {title}
            </span>
          </div>
        </Upload>
      </Wrap>
    );
  }, [title, type]);

  return Dom;
}

export default ClickButtonUpload;

export interface IButtonAdd {
  title?: string | number;
  change?: Function;
  wrapStyle?: React.CSSProperties;
  style?: React.CSSProperties;
  labelWarpStyle?: React.CSSProperties;
  type?: string;
  labelIcon?: React.ReactNode;
}