import Icon, { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import { Upload, message } from 'antd';
import type { RcFile } from 'antd/es/upload/interface';
import React, { useEffect, useState } from 'react';
import styles from './UploadVideo.module.less';
import { review, deleteIcon } from "./icon"
import schema from "./schema"
import FormItem from '../FormItem/FormItem'
import Preview from "./preview"
import { ChangeImgUrl, getItemProps } from "../../utils"
import OCR from "../../utils/ocr"
const UploadImg = (item: any) => {
  const data: any = getItemProps(schema, item)
  const { UploadProps, otherProps, componentType, FormItemProps, beforeUploadRules, callback, Type, form, ocr } = data
  const [imageUrl, setImageUrl] = useState<string>("");
  const [loading, setLoading] = useState(false);
  const { uploadText, imageUrl: _imageUrl } = otherProps
  const [isPreview, setIsPreview] = useState(false)
  useEffect(() => {
    _imageUrl ? setImageUrl(_imageUrl) : null
  }, [])

  const UploadButton = () => {
    return <div className={styles.U_B_Wapper}>
      <div className={styles.Up_Btn}>
        {loading ? <LoadingOutlined /> : <>
          <PlusOutlined style={{ fontSize: "18px", margin: "2px 0" }} />
          {uploadText ? <div style={{ fontSize: "12px" }}>{uploadText}</div> : null}
        </>}
      </div>
    </div>
  }

  const AfterButon = () => {
    return <div className={styles.U_B_Wapper} onClick={e => {
      e.stopPropagation()
    }}>
      <video style={{ height: '100%' }}>
        <source src="https://www.ailieyun.com/static/media/intro.2795aa73f0c6e8323c14.mp4" type="video/mp4" />
      </video>
      <div className={styles.Up_Btn_2}>
        <Icon component={review} onClick={() => setIsPreview(true)} />
        {Type === "upload" ? <Icon onClick={() => {
          form && form?.setFieldValue(FormItemProps?.name, '')
          setImageUrl("")
        }
        } component={deleteIcon} /> : null}
      </div>
    </div>
  }

  const beforeUpload = (file: RcFile) => {
    const { fileSize } = beforeUploadRules
    const isLt2M = file.size / 1024 / 1024 < fileSize;
    if (!isLt2M) {
      message.error(`图片大小不能超过${fileSize}MB!`);
    }
    return isLt2M;
  };

  const handleChange = async (fileInput: any): Promise<any> => {
    const { file } = fileInput;
    if (file.status === 'uploading') {
      setLoading(true);
      return '';

    }
    if (file.status === 'done') {
      let url = ChangeImgUrl(file.response.data);
      if (ocr) {
        OCR({
          code: ocr,
          facePhotoUrl: file.response.data
        })
      }
      setLoading(false);
      setImageUrl(url);
      callback && callback(url)
      return '';
    }
  };

  return <>
    {isPreview ? <Preview setIsPreview={setIsPreview} imageUrl={imageUrl || "https://www.ailieyun.com/static/media/intro.2795aa73f0c6e8323c14.mp4"} /> : null}
    {
      componentType === 'FormItem' ? <FormItem
        label={FormItemProps?.label}
        style={FormItemProps?.style}
        required={FormItemProps?.required}
      >
        <FormItem
          noStyle
          name={FormItemProps?.name}
          rules={FormItemProps?.required ? [{
            required: true,
            message: `请上传${FormItemProps?.label || "视频"}`
          }] : []}
          valuePropName={FormItemProps.name}
          getValueFromEvent={(info: any) => {
            if (info.file.status == 'done') {
              return info.file.response.data;
            }
          }}
        >
          <Upload
            {...UploadProps}
            beforeUpload={beforeUpload}
            onChange={handleChange}
          >
            {imageUrl ? <AfterButon /> : <UploadButton />}
          </Upload>
        </FormItem>
        <div className={styles.tips}>{beforeUploadRules?.tips}</div>
      </FormItem> : <Upload
        {...UploadProps}
        beforeUpload={beforeUpload}
        onChange={handleChange}
      >
        {imageUrl ? <AfterButon /> : <UploadButton />}
      </Upload>
    }
  </>
};

export default UploadImg;