import React, { useEffect } from 'react';
import { useSelector, useDispatch } 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 VideoPlayer from './components/VideoCom/index';
//import SocketCtrl from './components/SocketCtrl';


export default function Demo1() {
  const dispatch = useDispatch();
  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);
  const wg = useSelector(s => s.runtime.shkshObj)
  console.log('wg', wg);



  return (
    <div className="demo1">
      <div style={{ position: 'absolute', left: 0, bottom: 0, right: 0, top: 0, zIndex: 0 }}>
        <MapCtrl />
      </div>

      {
        yyRes.yy &&
        <VideoPlayer
          videoUrl={`${process.env.PUBLIC_URL}/assets/gaoguan.mp4`}
          date=""
          odd={true}
        />
        // <>
        //   <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 }) => {
                if (key != '网格') {
                  return (
                    <CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">
                      <PanelIndex name={key} {...params} />
                    </CSSTransition>
                  )
                } else if (wg) {
                  return (
                    <CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">
                      <PanelIndex name={key} {...params} />
                    </CSSTransition>
                  )
                }
              }
              )
            }
          </TransitionGroup>
        )
      }
      <InfoDlg />
      <Calculating />
    </div>
  )
}