import { Button, Empty, message, Modal, Space } from "antd"
import React, { 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 MediaList from "./mediaList"

interface Props extends CLOUDNEW.SelectCloudNewProps {
    tabType: Array<'1' | '2'>
}

/**
 * 选择素材
 * @param param0 
 * @returns 
 */
const SelectCloudComponent: React.FC<Props> = ({ tabType, visible, defaultParams, num, isGroup, onChange, onClose, accountCreateLogs, putInType, title }) => {

    /************************************/
    const [checkedFolderList, setCheckedFolderList] = useState<any[]>([])
    const [active, setActive] = useState<number>()
    const [SCKType, setSCKType] = useState<string>(tabType[0])
    /************************************/


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

    return <Modal
        title={<div className={'SCK_header'}>
            {[{ label: title || '云端素材库', value: '1' }, { label: '本地素材库', value: '2' }].filter(item => tabType.includes(item.value as any)).map(item => <div
                className={item.value === SCKType ? 'selected' : ''}
                key={item.value}
                onClick={() => {
                    setSCKType(item.value)
                    if (isGroup) {
                        setCheckedFolderList([])
                    }
                }}>
                {item.label}
            </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>
                            <img src={item.material_type === 'image' ? item.oss_url : item.materialType === 1 ? 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' ? <SelectGroupCloudNew
            num={num}
            defaultParams={defaultParams}
            checkedFolderList={checkedFolderList}
            setCheckedFolderList={setCheckedFolderList}
            accountCreateLogs={accountCreateLogs}
            putInType={putInType}
            active={active}
        /> : SCKType === '2' ? <MediaList
            num={num}
            defaultParams={defaultParams}
            checkedFolderList={checkedFolderList}
            setCheckedFolderList={setCheckedFolderList}
            active={active}
            uploadVisible={false}
            setUploadVisible={() => {}}
        /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="请选择其它TAB"/>}

    </Modal>
}

export default React.memo(SelectCloudComponent)