import { useState, useEffect } from 'react'
import './index.less';
import { toPng } from '../../../utils/helper/helper';
import { Button, Checkbox, Space } from 'antd';
import { FilterOutlined } from '@ant-design/icons'
import Left from '../components/Home/Left';
import CdzyLeft from '../components/Cdzy/CdzyLeft';
import CdzyRight from '../components/Cdzy/CdzyRight';
import CdthLeft from '../components/Cdth/CdthLeft';
import YhswLeft from '../components/Yhsw/YhswLeft';
import YhswRight from '../components/Yhsw/YhswRight';
import StxfgcLeft from '../components/Stxfgc/StxfgcLeft';
import WlwsbLeft from '../components/Wlwsb/WlwsbLeft';
import CdzzyLeft from '../components/Cdzzy/CdzzyLeft';
import FilterPanel from './FilterPanel';
import CdzyFilter from '../components/Cdzy/CdzyFilter';
import CdthFilter from '../components/Cdth/CdthFilter';
import StxfgcFilter from '../components/Stxfgc/StxfgcFilter';
import CdzzyFilter from '../components/Cdzzy/CdzzyFilter';

const items = [{
    name: '草地资源',
    key: 'cdzy',
    LeftPanel: CdzyLeft,
    RightPanel: CdzyRight,
    Filter: CdzyFilter
}, {
    name: '草地退化',
    key: 'cdth',
    LeftPanel: CdthLeft,
    Filter: CdthFilter
}, {
    name: '有害生物',
    key: 'yhsw',
    LeftPanel: YhswLeft,
    RightPanel: YhswRight
}, {
    name: '生态修复工程',
    key: 'stxfgc',
    LeftPanel: StxfgcLeft,
    Filter: StxfgcFilter
}, {
    name: '草地征占用',
    key: 'cdzzy',
    LeftPanel: CdzzyLeft,
    Filter: CdzzyFilter
}, {
    name: '物联网设备',
    key: 'wlwsb',
    LeftPanel: WlwsbLeft,
}]

export default function Content(props) {
    const [current, setCurrent] = useState();
    const [filterVisible, setFilterVisible] = useState();

    const currentItem = items.find(item => item.key === current);
    const LeftPanel = currentItem?.LeftPanel;
    const RightPanel = currentItem?.RightPanel;
    const Filter = currentItem?.Filter;

    return <div className='wh100 main-content layout-h'>
        <div className='left-panel layout-v' style={{
            pointerEvents: "auto"
        }}>
            {LeftPanel ? <LeftPanel /> : <Left />}
        </div>
        <div className='fill relative'>
            <div style={{
                background: `url(${toPng('圆角矩形')})`,
                width: 206,
                height: 58,
                position: "absolute",
                left: 10,
                top: 10,
                cursor: "pointer",
                pointerEvents: "auto"
            }} className='layout-h center'>
                <img alt='' src={`${toPng('图层')}`} />
                <div className='layout-h center j-center fill' style={{
                    color: "#BED2E0",
                    fontSize: 20,
                    marginLeft: 16
                }}>
                    <span>图层列表</span>
                </div>
            </div>
            <div style={{
                width: 250,
                position: "absolute",
                top: 72,
                border: "1px solid 157dd0",
                borderRadius: 4,
                background: "rgba(2,38,65,0.85)",
                padding: 8,
                left: 16,
                paddingBottom: 0,

                pointerEvents: "auto"
            }}>
                {items.map((item, i) => {
                    return <div className='layout-h center' key={i} style={{
                        background: "rgba(7,77,136,0.3)",
                        borderRadius: 4,
                        padding: "4px 12px",
                        marginBottom: 8
                    }}>
                        <Checkbox checked={current === item.key} onChange={e => {
                            if (current === item.key) {
                                setCurrent(null)
                                props?.onLayerChange?.(null);
                            } else {
                                props?.onLayerChange?.(item.key);
                                setCurrent(item.key);
                            }
                            setFilterVisible(false)
                        }}>
                            <div style={{
                                fontSize: 16,
                                marginBottom: 2
                            }}>{item.name}</div>
                        </Checkbox>
                        <Button onClick={e => {
                            setCurrent(item.key);
                            setFilterVisible(true)
                        }} style={{
                            marginTop: 2
                        }} type="text" icon={<FilterOutlined />} shape='circle'></Button>
                    </div>
                })}
            </div>
            <FilterPanel title={currentItem?.name + '筛选'} visible={filterVisible} onCancel={e => {
                setFilterVisible(false)
            }} >
                {Filter && <Filter onOk={filterStr => {
                    props?.onFilterChange?.(filterStr)
                }} />}
            </FilterPanel>
        </div>
        <div className='right-panel layout-v' style={{
            pointerEvents: "auto"
        }}>
            {RightPanel ? <RightPanel /> : null}
        </div>
    </div>;
}