import React, {useEffect, useState} from 'react';
// import Icon from './icon';
import './video-player.scss';
// import { AgoraElectronStream, StreamType, nativeRTCClient as nativeClient } from '../utils/agora-electron-client';
// import { useRoomState } from '../containers/root-container';
// import { platform } from '../utils/platform';
import {makeStyles} from "@material-ui/core/styles";
import { endPoint } from '../services/agora-end-points';

// const contentMode = 0;


const useStyles = makeStyles({
  style1 : {
    display: 'flex',
    flexDirection: 'column',
    width: '100%', // 'calc(100% - 280px)'
    height: '100%'
  },
  style2 : {
    display: 'flex',
    flexDirection: 'row'
  },
  style3:{
    height: 30,
    flex: 1
  },
  style4: {
    height: 36,
    width: 100,
    flex: 0
  },
  frm: {
    flex: 1,
    border: 0,
  },
  fixParent :{
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  }
});
const CourseWareFrame: React.FC = () => {
  const classes = useStyles();
  // `${ENDPOINT}/airclass_ol?token=${this.userToken}`;
  const cw_src = endPoint.getCourseUrl();
  const [src, setSrc] = useState<string>(cw_src);
  let refDom: any = null;
  const saveRef = (ref: any) => {refDom = ref};
  useEffect(() => {
    const hel = document.querySelector('.on-show')
    let helh = 0;
    if (hel){
      helh = hel.clientHeight;
    }
    if (helh && refDom) {
      const  hh = 48 + helh + 8;
      refDom.style.height = `${document.body.clientHeight - hh}px`;
    }

    return () => {
      setSrc('about:blank');
      console.log('iframe to blank');
    }
    // eslint-disable-next-line
  }, []);

  return (
      <div ref={saveRef} className={classes.style1}>
        {/*<svg viewBox="0 0 0 0"></svg>*/}
        <iframe title="courseware-player " id="cwFrame" src={src} className={classes.frm}></iframe>
      </div>
  )
}

export default React.memo(CourseWareFrame);
