import React, { useMemo, useState } from 'react';
import Wrap from '../wrap/Wrap';
import Icon from '../../Icon/index';
import { Radio, Upload } from 'antd';
import delIcon from './删除.svg';

import '../g.scss';
let timer = null;
function LabelRadioGroup(props: ILabelRadioGroup) {
  const {
    title,
    selectList = [],
    change,
    value,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    titleStyle = { width: '72px' },
    isShowContent,
    defaultImgList,
    imgListActive,
    precisionCustom,
    nameType
  } = props;

  const [delIconShow, setDelIconShow] = useState(false);

  const Redio = useMemo(() => {
    return (
      <>
        <Wrap wrapStyle={wrapStyle}>
          {title ? <span style={titleStyle}>{title}</span> : <></>}
          <div className="zl-large-screen-label-radio-wrap">
            <Radio.Group
              options={selectList}
              onChange={(e) => change?.('changeControls', e.target.value)}
              value={value}
            />
          </div>
        </Wrap>
        {isShowContent ? (
          <Wrap wrapStyle={wrapStyle}>
            {value === 'default' && (
              <div className="default-img-list">
                {defaultImgList?.length > 0 &&
                  defaultImgList?.map((item, index) => {
                    return (
                      <div
                        key={item?.key}
                        className="img-wrap"
                        style={{
                          marginRight: (index + 1) % 4 !== 0 ? 10 : 0,
                          borderColor: `${
                            imgListActive === item?.key ? '#526CFD' : '#1C2229'
                          }`
                        }}
                        onClick={() => {
                          change?.('selectIcon', item?.key);
                        }}
                      >
                        <img src={item?.url} alt={item?.key} />
                      </div>
                    );
                  })}
              </div>
            )}
            {value === 'custom' && nameType === 'precision' && (
              <Upload
                accept=".png,.jpeg,.gif,.jpg,.svg"
                name="file"
                listType="text"
                showUploadList={false}
                beforeUpload={(info, fileList) => {
                  //防抖
                  clearTimeout(timer);
                  timer = setTimeout(() => {
                    change?.('customUpload', {
                      file: info,
                      fileList: fileList
                    });
                  }, 300);
                  return false;
                }}
              >
                <div
                  className="custom-img"
                  onMouseOver={() => {
                    setDelIconShow(true);
                  }}
                  onMouseOut={() => {
                    setDelIconShow(false);
                  }}
                >
                  {precisionCustom?.url !== '' ? (
                    <img
                      className="show-upload-img"
                      src={precisionCustom?.url}
                      alt={precisionCustom?.key}
                    />
                  ) : (
                    <></>
                  )}

                  <img
                    src={delIcon}
                    alt="icon"
                    className="del-icon"
                    style={{ display: delIconShow ? 'block' : 'none' }}
                    onClick={(e) => {
                      e.stopPropagation();
                      change('customDel', precisionCustom?.key);
                    }}
                  />
                  {precisionCustom?.url === '' ? (
                    <div className="add-icon-wrap">
                      <Icon name="icon-tianjia" classname="add-icon" />
                    </div>
                  ) : (
                    <></>
                  )}
                </div>
              </Upload>
            )}
          </Wrap>
        ) : (
          <></>
        )}
      </>
    );
  }, [
    title,
    value,
    defaultImgList,
    imgListActive,
    delIconShow,
    precisionCustom,
    nameType
  ]);

  return Redio;
}

export default LabelRadioGroup;

export interface ILabelRadioGroup {
  title: string;
  selectList: ISelectList[];
  wrapStyle?: React.CSSProperties;
  titleStyle?: React.CSSProperties;
  change?: Function;
  value?: string;
  isShowContent: boolean;
  defaultImgList?: IDefaultImgList[];
  imgListActive?: string;
  precisionCustom?: IPrecisionCustom;
  nameType?: string;
}

export interface ISelectList {
  key: number | string;
  name: string | number;
  type: string;
  names?: string;
}
export interface IDefaultImgList {
  key: string;
  active?: boolean;
  url: string;
}

export interface IPrecisionCustom {
  key: string;
  url: string;
}