import { Button, Image, message, Modal, Space, Tabs, Tooltip } from "antd"
import React, { useEffect, useState } from "react"
import { useModel } from "umi"
import FileBoxAD from "@/components/FileBoxAD"
import { CloseCircleFilled, QuestionCircleFilled } from "@ant-design/icons"
import style from './index.less'
import LookLanding from "../lookLanding"
import '../../../launchSystemV3/tencentAdPutIn/index.less'

interface Props {
    visible?: boolean,
    onChange?: (content: string[]) => void,
    onClose?: () => void,
    sliderImgContent?: { url: string, width?: number, height?: number }[]
    isBack?: boolean
    isGroup?: boolean
}
/**
 * 选择素材
 * @returns 
 */
const SelectCloud: React.FC<Props> = (props) => {

    /**================================**/
    const { visible, onChange, onClose, sliderImgContent, isBack = true, isGroup } = props
    const { state, set, getList } = useModel('useLaunchAdq.useBdMediaPup')
    const { mediaType, belongUser, parentId, selectItem, num } = state

    const [lookVisible, setLookVisible] = useState<boolean>(false)
    const [id, setId] = useState<number>(0)
    /**================================**/

    useEffect(() => {
        if (sliderImgContent && sliderImgContent?.length > 0) {
            setTimeout(() => {
                set({ selectItem: sliderImgContent })
            }, 100)
        } else {
            setTimeout(() => {
                set({ selectItem: [] })
            }, 100)
        }
    }, [])

    const handleOk = () => {
        if (isGroup && num && selectItem && num > selectItem?.length) {
            message.error(`当前选择了组图${num}图，当前选择了${selectItem.length}个图片`)
            return
        }
        if (selectItem && selectItem?.length > 0) {
            onChange && onChange(selectItem)
        } else {
            message.error('请选择')
        }
    }

    /**加载组件或数据更新执行请求列表 */
    useEffect(() => {
        if (belongUser === '1' || belongUser === '0') {
            getList()
        }
    }, [mediaType, belongUser, parentId])

    const clearImg = (id: number) => {
        set({ selectItem: selectItem?.filter(item => item.id !== id) })
    }

    return <Modal
        title={<Space>
            <strong>选择素材</strong>
            {(selectItem && num && selectItem?.length > 0 && num > 1) && <div className={style.selected}>
                {mediaType === 'IMG' ? <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                    <Image.PreviewGroup>
                        <div className={style.images}>
                            {selectItem?.map((item: any, index: number) => (<div className={style.antImg} key={index}>
                                <CloseCircleFilled className={style.clear} onClick={() => { clearImg(item?.id) }} />
                                <Image
                                    className={style.imgAnt}
                                    src={item?.url}
                                    style={{ maxWidth: 30, maxHeight: 30, minHeight: 20, minWidth: 30 }}
                                />
                            </div>))}
                        </div>
                    </Image.PreviewGroup>
                    <span style={{ color: '#1890ff' }}>已选：{selectItem.length}</span>
                </div> : selectItem?.map((item: any, index: number) => (
                    <div key={index} className={style.antImg} style={{ paddingTop: 6 }}>
                        <CloseCircleFilled className={style.clear} onClick={() => { clearImg(item?.id) }} />
                        <video className={style.imgAnt} src={item?.url} style={{ maxWidth: 30, maxHeight: 25, minHeight: 25, minWidth: 30 }} />
                    </div>
                ))}
            </div>}
        </Space>}
        open={visible}
        onOk={handleOk}
        onCancel={() => { onClose && onClose() }}
        width={1220}
        destroyOnClose
        maskClosable={false}
        bodyStyle={{ padding: 0 }}
        className='modalResetCss'
    >
        <Tabs
            tabBarStyle={{ marginBottom: 0 }} onChange={(activeKey: any) => { set({ belongUser: activeKey }) }}
            activeKey={belongUser}
            style={{ margin: '0 24px' }}
            tabBarExtraContent={<Space>
                {mediaType === 'PAGE' ? null : <Button size='small' type="primary" onClick={() => { set({ imgVisrible: true }) }}>新建素材</Button>}
                <Tooltip title="功能都在下方内容区右键" placement="left">
                    <QuestionCircleFilled />
                </Tooltip>
            </Space>}
            items={[
                { label: '个人本地', key: '1' },
                { label: '个人本地', key: '0' }
            ]}
        />
        <FileBoxAD isAll={false} noFile={true} isBack={isBack} setPage={(type, data) => {
            setId(data || 0)
            if (type === 1) {
                setLookVisible(true)
            }
        }} />

        {/* 查看落地页 */}
        {lookVisible && <LookLanding visible={lookVisible} onClose={() => setLookVisible(false)} id={id} />}
    </Modal>
}

export default React.memo(SelectCloud)