import React, { useContext, useState, useEffect } from 'react';
import ControlGroupButton from '../Controls/ControlGroupButton';
import { Popover, Space, Image, Typography, Row, Col } from 'antd';
import { AppstoreOutlined } from '@ant-design/icons';
import { ImageWrapper } from './Styled';
import { getLayerById } from "../Map/Utils";
import MapContext from "../Map/MapContext";
import osm from './images/osm.png';
import bingAerial from './images/bing_aerial.png';
import bingRoads from './images/bing_roads.png';
import noLayer from './images/no_image.png';

const { Text, Link } = Typography;
/**
 * TODO
 */
function BaseLayerSwitcher (props) {

    const { t } = props;

    const { map } = useContext(MapContext);
    const [open, setOpen] = useState(false);
    const [selected, setSelected] = useState(undefined);

    const handleToggle = () => {
        setOpen((prevOpen) => !prevOpen);
    };

    const onChange = (e) => {
		map.getLayers().forEach(function (l, i) {
            if (l.baselayer) {
                l.setVisible(false);
            }
        });
        setSelected(e.currentTarget.id);
        let layer = getLayerById(map, e.currentTarget.id);
        layer.setVisible(true);
    };

    const getBaseLayers = () => {
        let baseLayers = new Array();
		map.getLayers().forEach(function (l, i) {
            if (l.baselayer) {
                baseLayers.push(l);
            }
        });
        return <Space align="start" style={{maxWidth: '300px', overflowX: 'auto', padding: '10px'}}>
            {baseLayers.map((l, i) => {
                let img = noLayer;
                if (l.type == 'OSM') {
                    img = osm;

                } else if (l.type == 'Bing') {
                    if (l.subtype == 'Road') {
                        img = bingRoads;

                    } else if (l.subtype == 'Aerial') {
                        img = bingAerial;
                    }
                }
                return <ImageWrapper id={l.id} onClick={onChange} style={{backgroundColor: selected === l.id ? '#4285f4' : '#ffffff'}}>
                    <Image preview={false} width={80} src={img} />
                    <Text type="secondary" style={{fontSize: '10px', color: selected === l.id ? '#ffffff' : '#70757a'}}>{l.title}</Text>
                </ImageWrapper>
            })}
        </Space>
        
    };

    useEffect(() => {
        if (!map) return;
        if (!selected) {
            map.getLayers().forEach(function (l, i) {
                if (l.baselayer) {
                    const layer = getLayerById(map, l.id);
                    if (l.default_baselayer) {
                        setSelected(l.id);
                    }
                }
            });
        }
    });

    const title = (
        <div style={{textAlign: 'center'}}>
            <h3 style={{color: '#666', marginTop: '0.5em'}}>{t('capasFondo')}</h3>
        </div>
    );

    return (
        <Popover
            title={title}
            content={getBaseLayers()}
            trigger="click"
            visible={open}
            placement="topLeft"
            onVisibleChange={handleToggle}
        >
        <ControlGroupButton
            icon={<AppstoreOutlined style={{ fontSize: '24px', marginTop: '4px'}}/>} 
            shape="circle"
            style={{ 
                color: '#80868b', 
                backgroundColor: '#ffffff', 
                border: 'none', 
                width: '40px', 
                height: '40px'
            }} />
        </Popover>
    );
};

export default BaseLayerSwitcher;