import { h, Component } from 'preact';
import PropTypes from 'prop-types';
import { getTwilioToken } from './actions';

export default class Video extends Component {
  constructor(props) {
    super(props);
    this.state = {
      leftPx: 200,
      topPx: 200,
      pageX: null,
      pageY: null,
      token: null,
      room: null,
      participants: []
    }
  }
  componentDidMount() {
    getTwilioToken('private-video-channel-'+this.props.activeChannelId, this.setupCallChannel)
  }

  componentWillUnmount() {
    this.state.room.disconnect();
  }

  setupCallChannel = (response) => {
    const component = this;
    import('twilio-video')
    .then(({ connect, createLocalVideoTrack }) => {
      connect(response.token,
        {
          name:`private-video-channel-${this.props.activeChannelId}`,
          audio: true,
          type: 'peer-to-peer',
          video: { width: 640 }
        }).then(function(room) {
        component.setState({token: response.token, room: room})
        createLocalVideoTrack().then(track => {
          let localMediaContainer = document.getElementById('videolocalscreen');
          localMediaContainer.appendChild(track.attach());
        });
        let roomParticipants = []
        room.participants.forEach(participant => {
          component.triggerRemoteJoin(participant);
          roomParticipants.push(participant);
        });
        component.setState({participants: roomParticipants})
        room.on('participantConnected', function(participant) {
          component.triggerRemoteJoin(participant);
          let roomParticipants = []
          room.participants.forEach(participant => {
            roomParticipants.push(participant);
          });
          component.setState({participants: roomParticipants})
          room.on('participantDisconnected', function(participant) {
            component.props.onExit()
          });
        })
      }, function(error) {
        document.getElementById('videoremotescreen').innerHTML = "";
          console.error('Unable to connect to Room: ' +  error.message);
      });
    });
  }

  triggerRemoteJoin = (participant) => {
    // document.getElementById('videoremotescreen').innerHTML = ""
    participant.on('trackAdded', track => {
      document.getElementById('videoremotescreen').appendChild(track.attach());
    });
  }

  handleDrag = e => {
    if (!this.state.pageX) {
      this.setState({pageX:e.pageX,
        pageY: e.pageY,
        offsetDiffX: e.pageX - e.target.offsetLeft,
        offsetDiffY: e.pageY - e.target.offsetTop,
      })
    } else if (e.pageX != 0){
      this.setState({
        leftPx: this.state.pageX + e.pageX - this.state.pageX - this.state.offsetDiffX,
        topPx: this.state.pageY + e.pageY - this.state.pageY - this.state.offsetDiffY
      })
    } else if (e.pageX === 0) {
      this.setState({pageX:null,
        pageY: null,
        offsetDiffX: null,
        offsetDiffY: null,
      })
    }
  }

  render() {
    return (
      <div
        className="chat__videocall"
          id="chat__videocall"
          draggable="true"
          onDrag={this.handleDrag}
          style={{left:this.state.leftPx+'px', top: this.state.topPx+'px'}}
          >
        <div id="videoremotescreen" class={'chat__remotevideoscreen-'+this.state.participants.length}></div>
        <div className="chat__localvideoscren" id="videolocalscreen"></div>
        <button className="chat__videocallexitbutton" onClick={this.props.onExit}>
          ×
        </button>
      </div>
    )
  }
}









