import React from 'react';
import { useSelector } from 'react-redux';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import './index.less';
import ActionDock from './components/ActionDock';
import Title from './components/Title';
import { getLayout, hidePanels } from '../../models/map/selectors';
import PanelIndex from './PanelIndex';
import MapCtrl from './MapCtrl';
import InfoDlg from './InfoDlg';
import clsx from 'clsx';
import Calculating from './components/Calculating';
//import SocketCtrl from './components/SocketCtrl';


export default function Demo1() {
  const layout = useSelector(getLayout);
  const hp = useSelector(hidePanels);
  console.log("hp",hp);
  
  return (
    <div className="demo1">
      <div style={{ position: 'absolute', left: 0, bottom: 0, right: 0, top: 0, zIndex: 0 }}>
        <MapCtrl />
      </div>
      <div className="bottom">
        <ActionDock />
      </div>
      {
        !hp && (
          <TransitionGroup className={clsx('left', 'dp-panel-container', layout.leftFullHeight && 'fullheight')}>
            {
              layout.left.map(({ key, ...params }) => (
                <CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">
                  <PanelIndex name={key} {...params} />
                </CSSTransition>
              ))
            }

          </TransitionGroup>
        )
      }
      <div className="center">
        <Title />
      </div>
      {
        !hp && (
          <TransitionGroup className={clsx('right', 'dp-panel-container', layout.rightFullHeight && 'fullheight')}>
            {
              layout.right.map(({ key, ...params }) => (
                <CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">
                  <PanelIndex name={key} {...params} />
                </CSSTransition>
              ))
            }
          </TransitionGroup>
        )
      }
      <InfoDlg />
      <Calculating />
    </div>
  )
}