import { Button, message, Modal, Space } from "antd"
import React, { useEffect, useState } from "react"
import style from './index.less'
import './global.less'
import '../../tencentAdPutIn/index.less'
import { getVideoImgUrl } from "@/utils/utils"
import { DeleteOutlined, PlayCircleOutlined } from "@ant-design/icons"
import PlayVideo from "./playVideo"
import SelectGroupCloudNew from "./selectGroupCloudNew"
import SelectGroupUnitNew from "./selectGroupUnitNew"
import SelectComponentsUnit from "./selectComponentsUnit"
import ImageXXX from "../../components/AdsComponent/ImageXXX"
import MediaList from "./mediaList"

/**
 * 选择素材
 * @param param0 
 * @returns 
 */
const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defaultParams, num, sliderImgContent, isGroup, componentCount, onChange, onClose, accountCreateLogs, putInType, deliveryMode }) => {

    /************************************/
    const [checkedFolderList, setCheckedFolderList] = useState<any[]>([])
    const [SCKType, setSCKType] = useState<string>('1')

    const [uploadVisible, setUploadVisible] = useState<boolean>(false)
    const [active, setActive] = useState<number>()
    const [tabsList, setTabList] = useState<{label: string, value: string}[]>([])
    /************************************/

    useEffect(() => {
        if (sliderImgContent && sliderImgContent?.length > 0) {
            setCheckedFolderList(sliderImgContent as any || [])
        }
    }, [])

    useEffect(() => {
        if (isGroup && (componentCount && componentCount === 500) && deliveryMode === 'DELIVERY_MODE_COMPONENT') {
            setSCKType('4')
            setTabList([{ label: '业务单元组件', value: '4' }])
        } else {
            setTabList([{ label: '素材库', value: '1' }, { label: '账户组媒体素材', value: '2' }, { label: '业务单元素材', value: '3' }, ...(deliveryMode === 'DELIVERY_MODE_COMPONENT' ? [{ label: '业务单元组件', value: '4' }] : [])])
        }
    }, [isGroup, componentCount, deliveryMode])


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

    return <Modal
        title={<div className={'SCK_header'}>
            {tabsList.map(item => <div
                className={item.value === SCKType ? 'selected' : ''}
                key={item.value}
                onClick={() => {
                    if ((item.value === '4' || SCKType === '4') && checkedFolderList?.length) {
                        Modal.warning({
                            title: '警告',
                            content: '业务单元组件与其它素材库不同，选择将清空当前选择',
                            className: 'modalResetCss',
                            okText: '清空跳转',
                            keyboard: false,
                            closable: true,
                            okCancel: true,
                            onOk() {
                                setCheckedFolderList([])
                                setSCKType(item.value as any)
                            }
                        });
                    } else {
                        setSCKType(item.value as any)
                    }
                }}>
                {item.label}
            </div>)}
            {SCKType === '1' && <div><a style={{ marginLeft: 20, fontWeight: 'normal' }} onClick={() => setUploadVisible(true)}>上传素材</a></div>}
        </div>}
        open={visible}
        onCancel={onClose}
        width={1400}
        maskClosable={false}
        footer={<div className={style.divFooter}>
            {checkedFolderList.length > 0 ? <>
                <div className={style.selectedCloud}>
                    <div style={{ width: checkedFolderList.length * 58 + (checkedFolderList.length - 1) * 8 }}>
                        {checkedFolderList.map((item, index) => <div key={item.id + '_' + index} className={`${style.selectedCloud_col} ${active === index ? style.active : ''}`} onClick={() => isGroup && setActive(index)}>
                            <div className={style.cz}>
                                {item.material_type === 'video' && <PlayVideo videoUrl={item.oss_url}>{(onPlay) => <a onClick={onPlay}><PlayCircleOutlined /></a>}</PlayVideo>}
                                <a style={{ color: 'red' }} onClick={() => setCheckedFolderList(data => data.filter(i => i.id !== item.id))}><DeleteOutlined /></a>
                            </div>
                            {([4].includes(item.materialType) && item.componentSubType.includes('IMAGE_LIST')) ? <ImageXXX imageList={item?.oss_url} placement="top" /> : <img src={item.material_type === 'image' ? item.oss_url : [1, 4].includes(item.materialType) ? item.key_frame_image_url : getVideoImgUrl(item.oss_url)} className={style.coverImg} alt="" />}
                        </div>)}
                    </div>
                </div>
                {!!active && <a style={{ color: 'red' }} onClick={() => setActive(undefined)}>清除单独修改</a>}
                <a style={{ color: 'red' }} onClick={() => setCheckedFolderList([])}>清除所有</a>
            </> : <div></div>}
            <Space>
                <Button onClick={onClose}>取消</Button>
                <Button type="primary" onClick={handleOk} disabled={checkedFolderList.length === 0}>确定</Button>
            </Space>
        </div>}
        className={`modalResetCss selectModal SCK`}
        bodyStyle={{ backgroundColor: '#f1f4fc', height: 700, overflow: 'hidden', padding: '10px' }}
    >
        {SCKType === '1' ? <MediaList 
            num={num}
            defaultParams={defaultParams}
            checkedFolderList={checkedFolderList}
            setCheckedFolderList={setCheckedFolderList}
            active={active}
            uploadVisible={uploadVisible}
            setUploadVisible={setUploadVisible}
        /> : SCKType === '2' ? <SelectGroupCloudNew
            num={num}
            defaultParams={defaultParams}
            checkedFolderList={checkedFolderList}
            setCheckedFolderList={setCheckedFolderList}
            accountCreateLogs={accountCreateLogs}
            putInType={putInType}
            active={active}
        /> : SCKType === '3' ? <SelectGroupUnitNew
            num={num}
            defaultParams={defaultParams}
            checkedFolderList={checkedFolderList}
            setCheckedFolderList={setCheckedFolderList}
            accountCreateLogs={accountCreateLogs}
            putInType={putInType}
            active={active}
        /> : <SelectComponentsUnit
            num={num}
            defaultParams={defaultParams}
            checkedFolderList={checkedFolderList}
            setCheckedFolderList={setCheckedFolderList}
            accountCreateLogs={accountCreateLogs}
            putInType={putInType}
            active={active}
            isGroup={isGroup}
            componentCount={componentCount}
        />}
    </Modal>
}

export default React.memo(SelectCloudNew)