import { useState, useEffect, useContext } from 'react'
import { MapContext } from '../MapContext';
import GlobalContext from '../../../../utils/GlobalContext';
import { addGeoserverLayer } from '../utils/helper';
import _ from 'lodash';
import { Checkbox } from 'antd';
import './index.less';
const cacheLayers = [];
export default function BusinessLayer(props) {

    const { layerKey, viewer, filterStr } = useContext(MapContext);
    const { layers, initExtent } = useContext(GlobalContext);
    const [currentLegends, setCurrentLegends] = useState([]);
    // useEffect(() => {
    //     if (viewer) {
    //         cacheLayers.forEach(layer => {
    //             layer.layerInstance.show = false;
    //         })
    //         if (layerKey) {
    //             const layerOpt = layers[layerKey];
    //             const cacheLayer = cacheLayers.find(l => l.key === layerKey);
    //             if (cacheLayer) {
    //                 cacheLayer.layerInstance.show = true
    //             } else if (layerOpt) {
    //                 cacheLayers.push({
    //                     key: layerKey,
    //                     layerInstance: addGeoserverLayer({
    //                         layerName: layerOpt.layerName,
    //                         extent: initExtent,
    //                         viewer,
    //                         isWms: true
    //                     })
    //                 })
    //             }
    //         }
    //     }

    // }, [layerKey, layers, viewer, initExtent])

    useEffect(() => {
        if (viewer) {
            cacheLayers.forEach(layer => {
                viewer.imageryLayers.remove(layer.layerInstance);
            });

            setCurrentLegends([])
            if (layerKey) {
                const layerOpt = layers[layerKey];
                const cacheLayer = cacheLayers.find(l => l.key === layerKey);
                if (!layerOpt) {
                    return;
                }
                if (layerOpt?.legends) {
                    setCurrentLegends(layerOpt?.legends)
                }
                if (cacheLayer) {
                    _.remove(cacheLayers, item => item.key === layerKey);
                }
                cacheLayers.push({
                    key: layerKey,
                    layerInstance: addGeoserverLayer({
                        layerName: layerOpt.layerName,
                        extent: initExtent,
                        viewer,
                        isWms: true,
                        cql_filter: filterStr || '1=1'
                    })
                })
            }
        }
    }, [layerKey, filterStr, viewer, layers, initExtent])

    return <div className='business-layer' >
        {currentLegends?.length > 0 && <div className='legend-content' style={{
            marginTop: 12,
            padding: 0,
            width: 'auto',
            right: 500,
            position: 'absolute',
            bottom: 20
        }}>
            <div style={{
                textAlign: "center",
                padding: 5,
                background: "#0D1923"
            }}>图例</div>
            <div className='layout-v' style={{
                // marginTop: 8,
                padding: "8px 24px"
            }}>
                {currentLegends?.map(legend => {
                    let node = <div className='layout-h center layer-item'>
                        <div className='layout-v center j-center' style={{
                            width: 24,
                        }}>
                            <div className='circle-legend' style={{
                                background: legend.fillColor,
                                border: "1px solid " + legend.strokeColor
                            }}></div>
                        </div>
                        <div>{legend.name}</div>
                    </div>;
                    if (legend.image) {
                        node = <div className='layout-h center layer-item'>
                            <div className='layout-v center j-center' style={{
                                width: 24,
                            }}>
                                <img src={legend.image.src} alt="" style={{
                                    width: 16
                                }} />
                            </div>
                            <div>{legend.name}</div>
                        </div>;
                    }
                    return <div key={legend.name} className='layout-h center' style={{
                        fontSize: 12,
                        // fontStyle: "italic",
                        // marginLeft: 25,
                        color: "#ffffff"
                    }}>
                        <div className='rect-legend' style={{
                            background: legend.fillColor,
                            border: `1px solid ${legend.strokeColor}`
                        }}></div>
                        <div style={{
                            marginLeft: 8
                        }}>{legend.name}</div>
                    </div>
                })}
            </div>
        </div>}
    </div>;
}