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);
  const yyRes = useSelector(s => s.runtime.yyObj);
  const isSc = useSelector(s => s.runtime.scya);
  return (
    <div className="demo1">
        <div style={{ position: 'absolute', left: 0, bottom: 0, right: 0, top: 0, zIndex: 0 }}>
        <MapCtrl />
      </div> 
      
        {
        yyRes.yy &&
        <>
          <img src={`${process.env.PUBLIC_URL}/assets/yytc.png`} alt="" style={{ zIndex: 0.1, position: 'absolute' }} />
          <img src={`${process.env.PUBLIC_URL}/assets/yy.png`} alt="" style={{ zIndex: 0.2, position: 'absolute',bottom:150,left:'32%',width:700 }} />
        </>
      }
      
      {
        isSc &&<img src={`${process.env.PUBLIC_URL}/assets/scdd.jpg`} alt="" style={{ zIndex: 0.1, position: 'absolute',width:'100%' }} />
      }
          
      
      <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>
  )
}