import logo from '../images/logo_online_48x48.png';
import { Config  } from '../config/Config';

import React, { useContext, useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import {useTranslation} from "react-i18next";
import { actionSetInitialState } from '../redux/actions/main';
import MapContainer from "../containers/Map/MapContainer";
import DrawerContainer from '../containers/Drawer/DrawerContainer';
import ControlsContainer from '../containers/Controls/ControlsContainer';
import LayerTreeContainer from '../containers/LayerTree/LayerTreeContainer';
import ZoomIn from '../components/Controls/ZoomIn';
import ZoomOut from '../components/Controls/ZoomOut';
import CurrentLocation from '../components/Controls/CurrentLocation';
import BaseLayerSwitcher from '../components/BaseLayerSwitcher/BaseLayerSwitcher';
import { VerticalIconSeparator } from '../components/Controls/styled';
import ThemeContext from '../theme/ThemeContext';
import { Tabs, Spin } from 'antd';
import { AppstoreAddOutlined } from '@ant-design/icons';
const { TabPane } = Tabs;

const AppContainer = () => {
	
    const {t, i18n} = useTranslation('common');
	const theme = useContext(ThemeContext);

	const [isLoading, setLoading] = useState(true);

	const dispatch = useDispatch();
	dispatch(actionSetInitialState({
		loading: {
			isLoading: false,
			message: ''
		},
		sidebar: {
			collapsed: false, 
			selected: 'main_tab',
			width: 520
		}
	}));

	const getRemoteConfig = () => {
        setLoading(false);
    };

	useEffect(() => {
		getRemoteConfig();
  
	  }, [isLoading]);

	return (
		isLoading ? (
            <Spin style={{ position: 'absolute', top: '50%', left: '50%' }} tip="Cargando visor ..."></Spin>
        ) : (
            <MapContainer config={Config}>
				<DrawerContainer t={t} logo={logo}>
					<TabPane tab={<span style={{color: theme.titleColor, textShadow: 'none'}}> <AppstoreAddOutlined />{t('sidebar.layers')}</span>} key="layers">
						<LayerTreeContainer config={Config} t={t} />
					</TabPane>
				</DrawerContainer>
				<ControlsContainer position={'top-left'} orientation={'vertical'}>
                    <BaseLayerSwitcher  t={t}/>
                </ControlsContainer>
				<ControlsContainer position={'top-right'} orientation={'vertical'}>
					<ZoomIn  t={t}/>
					<ZoomOut t={t}/>
					<VerticalIconSeparator />
					<CurrentLocation t={t}/>
				</ControlsContainer>
			</MapContainer>
        )
	);
}

export default AppContainer;