import React, { useState } from "react"
import style from './index.less'
import { Checkbox, Space, Tooltip } from "antd"
import { ReactComponent as AppiconChannelsSvg } from '../../../../../public/iconspull/appicon-channels.svg'
import { ReactComponent as AppiconMementsSvg } from '../../../../../public/iconspull/appicon-mements.svg'
import { ReactComponent as AppiconMpSvg } from '../../../../../public/iconspull/appicon-mp.svg'
import { ReactComponent as AppiconMinappSvg } from '../../../../../public/iconspull/appicon-minapp.svg'
import { ReactComponent as AppiconQqwebSvg } from '../../../../../public/iconspull/appicon-qqweb.svg'
import { ReactComponent as AppiconQbrowserSvg } from '../../../../../public/iconspull/appicon-qbrowser.svg'
import { ReactComponent as AppiconQqSvg } from '../../../../../public/iconspull/appicon-qq.svg'
import { ReactComponent as AppiconQmusicSvg } from '../../../../../public/iconspull/appicon-qmusic.svg'
import { ReactComponent as AppiconGameSvg } from '../../../../../public/iconspull/appicon-game.svg'
import { ReactComponent as AppiconVqqSvg } from '../../../../../public/iconspull/appicon-vqq.svg'
import { ReactComponent as AppiconAdnetSvg } from '../../../../../public/iconspull/appicon-adnet.svg'
import { ReactComponent as AppiconYybSvg } from '../../../../../public/iconspull/appicon-yyb.svg'
import { QuestionCircleFilled, RightOutlined, UpOutlined } from "@ant-design/icons"

import appiconAdnetImg from '../../../../../public/iconspull/appicon-adnet.png'

const NewTree: React.FC<PULLIN.FormItemDataArrayProps> = ({ value = [], onChange, id }) => {

    // { lebel: ReactNode, value: string,  }
    /***********************************/
    const [open1, setOpen1] = useState<boolean>(false)
    const [open2, setOpen2] = useState<boolean>(false)
    /***********************************/


    const handleChange = (checkedValue: any[], isCheck: boolean, isYyb?: boolean) => {
        let newValue: string[] = JSON.parse(JSON.stringify(value)) || []
        if (isYyb) {
            newValue = isCheck ? checkedValue : []
        } else {
            if (isCheck) {
                newValue = newValue.concat(checkedValue)
                newValue = [...new Set(newValue.filter(item => item !== 'SITE_SET_MOBILE_YYB'))]
            } else {
                newValue = newValue.filter(item => !checkedValue.includes(item))
            }
        }
        onChange?.(newValue)
    }

    return <div className={style.newTree} id="id">
        <div className={style.newTree_col}>
            <div className={style.newTree_col_content}>
                <Checkbox
                    value={['SITE_SET_CHANNELS']}
                    checked={value.includes('SITE_SET_CHANNELS')}
                    onChange={(e) => {
                        handleChange(e.target.value, e.target.checked)
                    }}
                >
                    <Space>
                        <span>微信视频号</span>
                        <Tooltip title="向微信全场景内的视频号浏览用户展示的原生广告">
                            <QuestionCircleFilled />
                        </Tooltip>
                    </Space>
                </Checkbox>
                <div className={style.icons}>
                    <AppiconChannelsSvg />
                </div>
            </div>
        </div>
        <div className={style.newTree_col}>
            <div className={style.newTree_col_content}>
                <Checkbox
                    value={['SITE_SET_MOMENTS']}
                    checked={value.includes('SITE_SET_MOMENTS')}
                    onChange={(e) => {
                        handleChange(e.target.value, e.target.checked)
                    }}
                >
                    <Space>
                        <span>微信朋友圈</span>
                        <Tooltip title="以类似朋友的原创内容形式在用户朋友圈进行展示的原生广告">
                            <QuestionCircleFilled />
                        </Tooltip>
                    </Space>
                </Checkbox>
                <div className={style.icons}>
                    <AppiconMementsSvg />
                </div>
            </div>
        </div>
        <div className={style.newTree_col}>
            <div className={style.newTree_col_content}>
                <div className={style.newTree_col_content_childs}>
                    <Checkbox
                        value={['SITE_SET_WECHAT', 'SITE_SET_WECHAT_PLUGIN']}
                        checked={value.includes('SITE_SET_WECHAT') && value.includes('SITE_SET_WECHAT_PLUGIN')}
                        onChange={(e) => {
                            handleChange(e.target.value, e.target.checked)
                        }}
                    >
                        <Space>
                            <span>微信公众号与小程序</span>
                            <Tooltip title="基于微信公众号、看一看与视频号评论区等信息流广告场景和基于小程序与小游戏的生态广告场景">
                                <QuestionCircleFilled />
                            </Tooltip>
                            <div
                                className={style.open}
                                onClick={(e) => {
                                    e.stopPropagation()
                                    e.preventDefault()
                                    setOpen1(!open1)
                                }}
                            >{open1 ? <UpOutlined /> : <RightOutlined />}</div>
                        </Space>
                    </Checkbox>
                    {open1 && <div className={style.child}>
                        <div>
                            <Checkbox
                                value={['SITE_SET_WECHAT']}
                                checked={value.includes('SITE_SET_WECHAT')}
                                disabled
                                onChange={(e) => {
                                    handleChange(e.target.value, e.target.checked)
                                }}
                            >微信公众号与小程序</Checkbox>
                            <Tooltip title="基于微信公众号、小程序与小游戏生态的广告场景">
                                <QuestionCircleFilled />
                            </Tooltip>
                        </div>
                        <div>
                            <Checkbox
                                value={['SITE_SET_WECHAT_PLUGIN']}
                                checked={value.includes('SITE_SET_WECHAT_PLUGIN')}
                                disabled
                                onChange={(e) => {
                                    handleChange(e.target.value, e.target.checked)
                                }}
                            >微信新闻插件</Checkbox>
                            <Tooltip title="微信内部的腾讯新闻以及微视短视频相关订阅插件场景">
                                <QuestionCircleFilled />
                            </Tooltip>
                        </div>
                    </div>}
                </div>
                <div className={style.icons} style={open1 ? { alignSelf: 'flex-start' } : {}}>
                    <AppiconMpSvg />
                    <AppiconMinappSvg />
                    <AppiconQqwebSvg />
                </div>
            </div>
        </div>
        <div className={style.newTree_col}>
            <div className={style.newTree_col_content}>
                <div className={style.newTree_col_content_childs}>
                    <Checkbox
                        value={['SITE_SET_KANDIAN', 'SITE_SET_QQ_MUSIC_GAME', 'SITE_SET_TENCENT_NEWS', 'SITE_SET_TENCENT_VIDEO']}
                        checked={value.includes('SITE_SET_KANDIAN') && value.includes('SITE_SET_QQ_MUSIC_GAME') && value.includes('SITE_SET_TENCENT_NEWS') && value.includes('SITE_SET_TENCENT_VIDEO')}
                        indeterminate={(value.includes('SITE_SET_KANDIAN') || value.includes('SITE_SET_QQ_MUSIC_GAME') || value.includes('SITE_SET_TENCENT_NEWS') || value.includes('SITE_SET_TENCENT_VIDEO')) && !(value.includes('SITE_SET_KANDIAN') && value.includes('SITE_SET_QQ_MUSIC_GAME') && value.includes('SITE_SET_TENCENT_NEWS') && value.includes('SITE_SET_TENCENT_VIDEO'))}
                        onChange={(e) => {
                            handleChange(e.target.value, e.target.checked)
                        }}
                    >
                        <Space>
                            <span>腾讯平台与内容媒体</span>
                            <Tooltip title="汇聚腾讯产品矩阵，全场景打通腾讯生态内优质媒体与平台">
                                <QuestionCircleFilled />
                            </Tooltip>
                            <div
                                className={style.open}
                                onClick={(e) => {
                                    e.stopPropagation()
                                    e.preventDefault()
                                    setOpen2(!open2)
                                }}
                            >{open2 ? <UpOutlined /> : <RightOutlined />}</div>
                        </Space>
                    </Checkbox>
                    {open2 && <div className={style.child}>
                        <div>
                            <Checkbox
                                value={['SITE_SET_KANDIAN']}
                                checked={value.includes('SITE_SET_KANDIAN')}
                                onChange={(e) => {
                                    handleChange(e.target.value, e.target.checked)
                                }}
                            >QQ 浏览器</Checkbox>
                            <Tooltip title="包括QQ 浏览器及QQ 看点等场景">
                                <QuestionCircleFilled />
                            </Tooltip>
                        </div>
                        <div>
                            <Checkbox
                                value={['SITE_SET_QQ_MUSIC_GAME']}
                                checked={value.includes('SITE_SET_QQ_MUSIC_GAME')}
                                onChange={(e) => {
                                    handleChange(e.target.value, e.target.checked)
                                }}
                            >QQ、腾讯音乐及游戏</Checkbox>
                            <Tooltip title="QQ 空间、公众号、小程序，QQ 音乐、全民K歌、腾讯游戏等场景">
                                <QuestionCircleFilled />
                            </Tooltip>
                        </div>
                        <div>
                            <Checkbox
                                value={['SITE_SET_TENCENT_NEWS']}
                                checked={value.includes('SITE_SET_TENCENT_NEWS')}
                                onChange={(e) => {
                                    handleChange(e.target.value, e.target.checked)
                                }}
                            >腾讯新闻</Checkbox>
                            <Tooltip title="腾讯新闻信息流、插件、闪屏等场景">
                                <QuestionCircleFilled />
                            </Tooltip>
                        </div>
                        <div>
                            <Checkbox
                                value={['SITE_SET_TENCENT_VIDEO']}
                                checked={value.includes('SITE_SET_TENCENT_VIDEO')}
                                onChange={(e) => {
                                    handleChange(e.target.value, e.target.checked)
                                }}
                            >腾讯视频</Checkbox>
                            <Tooltip title="腾讯视频信息流、焦点图、贴片、闪屏等场景">
                                <QuestionCircleFilled />
                            </Tooltip>
                        </div>
                    </div>}
                </div>
                <div className={style.icons} style={open2 ? { alignSelf: 'flex-start' } : {}}>
                    <AppiconQbrowserSvg />
                    <AppiconQqSvg />
                    <AppiconQmusicSvg />
                    <AppiconGameSvg />
                    <AppiconQqwebSvg />
                    <AppiconVqqSvg />
                </div>
            </div>
        </div>
        <div className={style.newTree_col}>
            <div className={style.newTree_col_content}>
                <Checkbox
                    value={['SITE_SET_MOBILE_UNION']}
                    checked={value.includes('SITE_SET_MOBILE_UNION')}
                    onChange={(e) => {
                        handleChange(e.target.value, e.target.checked)
                    }}
                >
                    <Space>
                        <span>优量汇</span>
                        <Tooltip title="集合数万优质媒体海量曝光，覆盖10亿+人群全营销场景的优量生态">
                            <QuestionCircleFilled />
                        </Tooltip>
                    </Space>
                </Checkbox>
                <div className={style.icons}>
                    <img src={appiconAdnetImg} width={20} height={20} alt="优量汇" />
                </div>
            </div>
        </div>
        {/* <div className={style.newTree_col}>
            <div className={style.newTree_col_content}>
                <Checkbox
                    value={['SITE_SET_MOBILE_YYB']}
                    checked={value.includes('SITE_SET_MOBILE_YYB')}
                    onChange={(e) => {
                        handleChange(e.target.value, e.target.checked, true)
                    }}
                >
                    <Space>
                        <span>应用宝</span>
                        <Tooltip title="应用宝场景，首页、搜索、分类页等位置">
                            <QuestionCircleFilled />
                        </Tooltip>
                    </Space>
                </Checkbox>
                <div className={style.icons}>
                    <AppiconYybSvg />
                </div>
            </div>
        </div> */}
    </div>
}

export default React.memo(NewTree)