import {PdRender, parseScheme} from '@wisdom-cesium/cesium'
import { useRef , useEffect } from 'react'
import { connect } from 'react-redux'
import { actionCreators } from '@/containers/App/store';
const cesiumMap = props => {
    const ref = useRef(null)
    const storeRef = useRef(null)
    useEffect(() => {
        const mapConfig3d = props.globalConfig?.mapConfig3d 
        if(!(props.globalConfig.mapsettings?.areasettings && globalConfig.mapsettings?.basemaps?.length > 0)) return
        if(storeRef.current) return
        const {widgets} = mapConfig3d
        const schemes = parseScheme.parseSchemes(mapConfig3d)
        const schemeData = parseScheme.parseDatas(schemes)
        const pdView = new PdRender({
            el: ref.current,
            widgets,
            delayWidgetRender : true,
            ...schemeData
        }) 
        storeRef.current = pdView
        props.updatePdCesiumView(pdView)
    }, [props.globalConfig?.mapConfig3d ?? {}])
    
    return (<div style={{
        inset: 0,
        position : "absolute"
    }} ref = {ref}></div>)
}

const mapStateToProps = state => ({
    globalConfig : state.getIn(['global','globalConfig'])
})

const mapDispatchToProps = dispatch => ({
    updatePdCesiumView(pdView) {
        dispatch(actionCreators.updatePdCesiumView(pdView))
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(cesiumMap)
