import React, { useMemo, useState } from 'react'
import { Button, Form, Input, InputNumber, message, Modal, Space, Upload } from 'antd'
import { useModel } from 'umi'
import { RcFile } from 'antd/lib/upload'
import CropperImg from '../Cropper'
import { UploadOutlined } from '@ant-design/icons'
import style from './index.less'
import '../../../../pages/launchSystemV3/tencentAdPutIn/index.less'

/**新建非图文素材 */
let ImgModal = React.memo((props: { isAll?: boolean }) => {

    /*****========STA=========*****/
    const { isAll } = props
    const [queryForm, setQueryForm] = useState<{ title: string, sort: number, file: any }>({ title: '', sort: 0, file: null })
    const [fileList, setFileList] = useState<any>([])
    const [fileUrl, setFileUrl] = useState<string>('')
    const [previewVisible, setPreviewVisible] = useState<boolean>(false)
    const [visible, setVisible] = useState<boolean>(false)
    const { state, typeEnum, addFile, offEditFile } = useModel(isAll ? 'useLaunchAdq.useBdMedia' : 'useLaunchAdq.useBdMediaPup')
    const { imgVisrible, mediaType, actionItem, upLoadLoading } = state
    /*****========END=========*****/


    const handleOk = (e: any) => {
        e?.stopPropagation()
        if (queryForm.file) {
            addFile({ ...queryForm });
        } else {
            message.error('请上传素材')
        }
    }

    const getVideo = useMemo(() => {
        if (mediaType === 'VIDEO') {
            if (queryForm?.file) {
                return <video src={URL.createObjectURL(queryForm?.file)} style={{ width: 200 }} controls />
            } else {
                return null
            }
        } else {
            return null
        }
    }, [queryForm?.file])

    return <div>
        <Modal
            title={<strong>{(actionItem ? '编辑' : '新建') + typeEnum[mediaType as keyof typeof typeEnum]}</strong>}
            open={imgVisrible}
            onOk={(e) => { handleOk(e) }}
            confirmLoading={upLoadLoading}
            onCancel={() => {
                offEditFile();
            }}
            width={700}
            destroyOnClose
            maskClosable={false}
            className='modalResetCss'
        >
            <Form
                name="basic"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
                autoComplete="off"
                colon={false}
                labelAlign="left"
            >
                <Form.Item label={<strong>图片名称</strong>}>
                    <Input value={queryForm.title} onChange={(e) => setQueryForm({ ...queryForm, title: e.target.value })} placeholder="请输入图片名称" />
                </Form.Item>
                <Form.Item
                    label={<strong>排序</strong>}
                    tooltip="数值越大越靠前"
                >
                    <InputNumber value={queryForm.sort} onChange={(e) => setQueryForm({ ...queryForm, sort: e || 0 })} placeholder="请输入排序" />
                </Form.Item>
                <Form.Item label={<strong>{'上传' + typeEnum[mediaType as keyof typeof typeEnum]}</strong>}>
                    {mediaType === 'IMG' ? <Space>
                        <Upload
                            listType="picture-card"
                            accept='image/gif,image/jpeg,image/png,image/jpg'
                            beforeUpload={(file: RcFile) => {
                                return false
                            }}
                            fileList={fileList}
                            onChange={(newFileList: any) => {
                                console.log('newFileList-->', newFileList)
                                setQueryForm({ ...queryForm, file: newFileList.file })
                                setFileList([...newFileList.fileList])
                            }}
                            onPreview={(file: any) => {
                                setPreviewVisible(true)
                                setFileUrl(file.thumbUrl)
                            }}
                            onRemove={() => {
                                setQueryForm({ ...queryForm, file: null })
                            }}
                        >
                            {fileList?.length < 1 && '普通上传'}
                        </Upload>
                        {
                            fileList?.length === 0 && <Upload
                                listType="picture-card"
                                accept='image/gif,image/jpeg,image/png,image/jpg'
                                beforeUpload={(file: RcFile) => {
                                    return false
                                }}
                                fileList={fileList}
                                onChange={(newFileList: any) => {
                                    setQueryForm({ ...queryForm, file: newFileList.file })
                                    setVisible(true)
                                }}
                                onRemove={() => {
                                    setQueryForm({ ...queryForm, file: null })
                                }}
                                onPreview={(file: any) => {
                                    setPreviewVisible(true)
                                    setFileUrl(file.thumbUrl)
                                }}
                            >
                                {fileList?.length < 1 && '裁剪上传'}
                            </Upload>
                        }
                    </Space> : <>
                        <div className={style.file}>
                            <Button type='primary'><UploadOutlined />上传视频</Button>
                            <input type='file' onChange={(e) => {
                                if (e?.target?.files) {
                                    setQueryForm({ ...queryForm, file: e?.target?.files[0] })
                                }
                            }} accept="video/*" />
                        </div>
                        {
                            queryForm?.file && <>
                                <p>{queryForm?.file?.name}</p>
                                {getVideo}
                            </>
                        }
                    </>}

                </Form.Item>
            </Form>
        </Modal>

        <Modal
            open={previewVisible}
            footer={null}
            onCancel={() => {
                setPreviewVisible(false)
            }}
        >
            <img alt="example" style={{ width: '100%' }} src={fileUrl} />
        </Modal>

        {/* 裁剪 */}
        {visible && <CropperImg visible={visible} onClose={() => setVisible(false)} file={queryForm.file} onChange={(fileList: any[], file: any) => { setFileList(fileList); setQueryForm({ ...queryForm, file: file }); setVisible(false) }} />}
    </div>
})
export default React.memo(ImgModal)