import { useAjax } from "@/Hook/useAjax";
import { App, Button, Tooltip, Upload } from "antd";
import { SizeType } from "antd/es/config-provider/SizeContext";
import { RcFile } from "antd/es/upload";
import React from "react";
import { QuestionCircleOutlined } from '@ant-design/icons';
import { MediaTypeProps, saveMediaApi } from "../../API/weMaterial/weMaterial";
import { useOss } from "@/Hook/useOss";
import dayjs from 'dayjs'
import { getImgSize, videoMessage } from "@/utils/compress";
import { formatSize, getAudioTime } from "@/utils/utils";
export type CompareType = '<' | '<=' | '>' | '>=' | '=' | '!='
export interface MediaSize {
    // 大小
    size?: number,
    // 大小对比符
    evalS?: CompareType,
    // 宽度
    width?: number
    // 宽度对比符
    evalW?: CompareType,
    // 高度
    height?: number,
    // 高度对比符
    evalH?: CompareType,
    // 时长
    duration?: number,
    // 时长对比符
    evalD?: CompareType
    // 不符合提示
    msg?: string
}
interface Props {
    type?: MediaTypeProps,
    onChange?: (url: string, file?: RcFile, name?: string) => void
    disabled?: boolean
    size?: SizeType
    text: JSX.Element | string
    tooltip?: string
    mediaSize?: MediaSize
}
/**
 * 上传组件
 * @returns 
 */
const UploadButton: React.FC<Props> = ({ type = 'file', onChange, disabled, text, size, tooltip, mediaSize }) => {

    /******************************/
    const { message } = App.useApp();
    const saveMedia = useAjax((params) => saveMediaApi(params))
    const ossUpload = useOss()
    /******************************/

    return <Upload
        accept={type === 'file' ? '*' : type === 'image' ? 'image/png,image/jpg,image/jpeg' : type === 'video' ? 'video/mp4' : type === 'voice' ? '.amr' : '*'}
        action="#"
        showUploadList={false}
        customRequest={() => { }}
        beforeUpload={async (file: RcFile): Promise<any> => {
            if (mediaSize) {
                if (type === 'image') {
                    let imgData = await getImgSize(file as RcFile)
                    if (mediaSize?.size && mediaSize?.evalS && eval(`${file.size} ${mediaSize?.evalS} ${mediaSize.size}`)) {
                        message.error(`传入的图片大小不符, 上传图片大小${formatSize(file.size)}, ${mediaSize?.msg}`)
                        return
                    }
                    if ((mediaSize?.width && eval(`${imgData.width} ${mediaSize.evalW} ${mediaSize?.width}`)) || (mediaSize?.height && eval(`${imgData.height} ${mediaSize?.evalH} ${mediaSize?.height}`))) {
                        message.error(`传入的图片大小不符, 上传图片宽度${imgData.width}高度${imgData.height}, ${mediaSize?.msg}`)
                        return
                    }
                }
                if (type === 'video') {
                    let videoInfo: any = await videoMessage([file as RcFile])
                    if (mediaSize?.size && mediaSize?.evalS && eval(`${file.size} ${mediaSize?.evalS} ${mediaSize.size}`)) {
                        message.error(`传入的视频大小不符, 上传视频大小${formatSize(file.size)}, ${mediaSize?.msg}`)
                        return
                    }
                    if (mediaSize?.duration && mediaSize?.evalD && eval(`${videoInfo[0].videoLength} ${mediaSize?.evalD} ${mediaSize.duration}`)) {
                        message.error(`传入的视频时长不符, 上传视频时长${videoInfo[0].videoLength}″,  ${mediaSize?.msg}`)
                        return
                    }
                    if ((mediaSize?.width && eval(`${videoInfo[0].width} ${mediaSize.evalW} ${mediaSize?.width}`)) || (mediaSize?.height && eval(`${videoInfo[0].height} ${mediaSize?.evalH} ${mediaSize?.height}`))) {
                        message.error(`传入的视频大小不符, 上传视频宽度${videoInfo[0].width}高度${videoInfo[0].height}, ${mediaSize?.msg}`)
                        return   
                    }
                }
                if (type === 'voice') {
                    if (mediaSize?.size && mediaSize?.evalS && eval(`${file.size} ${mediaSize?.evalS} ${mediaSize.size}`)) {
                        message.error(`传入的音频大小不符, 上传音频大小${formatSize(file.size)}, ${mediaSize?.msg}`)
                        return
                    }
                    let times = await getAudioTime(file as RcFile)
                    if (mediaSize?.duration && mediaSize?.evalD && eval(`${times} ${mediaSize?.evalD} ${mediaSize.duration}`)) {
                        message.error(`传入的音频时长不符, 上传视频时长${times}″,  ${mediaSize?.msg}`)
                        return
                    }
                }
                if (type === 'file') {
                    if (mediaSize?.size && mediaSize?.evalS && eval(`${file.size} ${mediaSize?.evalS} ${mediaSize.size}`)) {
                        message.error(`传入的文件大小不符, 上传文件大小${formatSize(file.size)}, ${mediaSize?.msg}`)
                        return
                    }
                }
            } else {
                if (type === 'image' && file.size > 10485760) {
                    message.error('图片大小大于10M,请压缩在上传')
                    return
                } else if (type === 'video' && file.size > 10485760) {
                    message.error('视频大小大于10M,请压缩在上传')
                    return
                } else if (type === 'voice' && file.size > 2097152) {
                    message.error('语音大小大于2M,请压缩在上传')
                    return
                } else if (type === 'file' && file.size > 20971520) {
                    message.error('文件大小大于20M,请压缩在上传')
                    return
                }
            }
            let name = dayjs().valueOf().toString()
            ossUpload.run(file, name).then(async res => {
                if (res?.data) {
                    let [fileName, nameSuffix] = file.name.split('.')
                    saveMedia.run({ fileName: name || fileName, mediaType: type, suffix: nameSuffix, url: res?.data })
                    onChange?.(res.data, file, name)
                }
            })
        }}
    >
        <Button disabled={disabled} loading={ossUpload.loading} size={size} onClick={() => {
            console.log(type)
        }}>
            {text}
            {tooltip && <Tooltip placement="top" title={tooltip}><QuestionCircleOutlined /></Tooltip>}
        </Button>
    </Upload>
}

export default React.memo(UploadButton)