import { Col, ColorPicker } from "antd"
import React, { useContext } from "react"
import style from './index.less'
import { DispatchMiniPageCreate } from "./drawerMini";
import CenterTop from './centerTop'
import CenterCompt from "./centerCompt";

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

    /**************************************/
    const { pageSpecs, setPageSpecs } = useContext(DispatchMiniPageCreate)!;
    const { bgColor, pageType } = pageSpecs
    /**************************************/

    const installActiveNull = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        e.stopPropagation()
        const { pageElementsSpecList } = pageSpecs
        const newPageElementsSpecList = pageElementsSpecList?.map(item => ({ ...item, comptActive: false }))
        setPageSpecs({ ...pageSpecs, pageElementsSpecList: newPageElementsSpecList })
    }

    return <Col flex="auto" className={style.center} onClick={installActiveNull}>
        <div className={style.page} style={{ backgroundColor: bgColor || '#FFFFFF' }}>
            <div><CenterTop /></div>
            {pageType === 'LANDING_PAGE' && <>
                <div className={`comptPlaceholder lastChild`} id="comptCon">
                    <CenterCompt />
                </div>
                <div className={style.sidebar}>
                    <div>
                        <ColorPicker
                            onChange={(_, css) => {
                                setPageSpecs({ ...pageSpecs, bgColor: css })
                            }}
                            value={bgColor}
                        />
                        <div style={{ marginTop: 4 }}>背景</div>
                    </div>
                </div>
            </>}
        </div>
    </Col>
}

export default React.memo(Center)