import { Col, Radio } from "antd"
import React, { useContext } from "react"
import style from './index.less'
import { useDrag } from "ahooks";
import { ReactComponent as TopImgSvg } from '../../../../public/svg/topimg.svg'
import { ReactComponent as TopVideoSvg } from '../../../../public/svg/topvideo.svg'
import { ReactComponent as ImgSvg } from '../../../../public/svg/img.svg'
import { ReactComponent as TextSvg } from '../../../../public/svg/text.svg'
import { ReactComponent as FloatbuttonSvg } from '../../../../public/svg/floatbuttonSvg.svg'
import { ReactComponent as WxAutoSvg } from '../../../../public/svg/wxAutoSvg.svg'
import { DispatchMiniPageCreate } from "./drawerMini";
import DragItem from "./dragItem";

const Left: React.FC = () => {

    /**************************************/
    const { setDragging, setDraggingCon, pageSpecs, setPageSpecs, isNewAdd } = useContext(DispatchMiniPageCreate)!;
    const { pageElementsSpecList, globalElementsSpecList, pageType } = pageSpecs
    /**************************************/

    const getDragProps = useDrag({
        onDragStart: (data) => {
            setDragging(data);
        },
        onDragEnd: () => {
            setDragging(null);
        },
    });


    const getDragPropsCon = useDrag({
        onDragStart: (data) => {
            setDraggingCon(data);
        },
        onDragEnd: () => {
            setDraggingCon(null);
        },
    });


    return <Col flex="320px" className={style.right}>
        <div className={style.title}>落地页类型</div>
        <Radio.Group style={{ marginBottom: 15 }} disabled={!isNewAdd} value={pageType} buttonStyle="solid" onChange={(e) => {
            setPageSpecs({ 
                bgColor: e.target.value === 'VIDEO' ? '#000000' : '#FFFFFF',
                pageType: e.target.value,
                pageElementsSpecList: [{ elementType: 'empty' }]
            });
        }}>
            <Radio.Button value="LANDING_PAGE">小说落地页</Radio.Button>
            <Radio.Button value="VIDEO">视频落地页</Radio.Button>
        </Radio.Group>
        {pageType === 'LANDING_PAGE' ? <>
            <div className={style.title}>顶部组件</div>
            <div className={style.assembly}>
                <DragItem icon={<TopImgSvg />} title="图片" dragProps={getDragProps(`TOP_IMAGE`)} disabled={pageElementsSpecList?.[0].elementType !== 'empty'} />
                <DragItem icon={<TopVideoSvg />} title="视频" dragProps={getDragProps(`TOP_VIDEO`)} disabled={pageElementsSpecList?.[0].elementType !== 'empty'} />
            </div>

            <div className={style.title}>基础组件</div>
            <div className={style.assembly}>
                <DragItem icon={<ImgSvg />} title="图片" dragProps={getDragPropsCon(`IMAGE`)} />
                <DragItem icon={<TextSvg />} title="文字" dragProps={getDragPropsCon(`TEXT`)} />
            </div>

            <div className={style.title}>营销组件</div>
            <div className={style.assembly}>
                <DragItem icon={<FloatbuttonSvg />} title="悬浮组件" dragProps={getDragPropsCon(`FLOAT_BUTTON`)} disabled={globalElementsSpecList?.some(item => item.elementType === 'FLOAT_BUTTON')} />
                <DragItem icon={<WxAutoSvg />} title="添加商家微信" dragProps={getDragPropsCon(`QR_CODE`)} />
            </div>
        </> : <>
            <div className={style.title}>顶部组件</div>
            <div className={style.assembly}>
                <DragItem icon={<TopVideoSvg />} title="短视频播放" dragProps={getDragProps(`TOP_SHORT_VIDEO`)} disabled={pageElementsSpecList?.[0].elementType !== 'empty'} />
            </div>
        </>}
    </Col>
}

export default React.memo(Left)