'use strict'

import React from 'react'
import { TheTalk, TheTalkStyle } from 'the-talk'
import { TheSpinStyle } from 'the-spin'
import { TheButtonStyle } from 'the-button'
import { TheRTCClient } from 'the-rtc-client'

class ExampleComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      localClient: null,
      remoteClients: {}
    }
    this.renderRemoteClient = this.renderRemoteClient.bind(this)
    this.rtcClient = null
    this.renderLocalClient = this.renderLocalClient.bind(this)
  }

  componentDidMount () {
    void this.joinToTalk()
  }

  async joinToTalk () {
    const rtcClient = new TheRTCClient({
      // Additional info
      info: {
        userAgent: navigator.userAgent,
        who: `user-${new Date().getTime()}`
      },
      onLocal: (localClient) => {
        this.setState({localClient})
      },
      onRemote: (remoteClient) => {
        const {rid} = remoteClient
        this.setState({
          remoteClients: {
            ...this.state.remoteClients,
            [rid]: remoteClient,
          },
        })
      }
    })
    await rtcClient.connect(`http://localhost:3000`)
    await rtcClient.join(`the-talk-example-room-${new Date().getFullYear()}`)
    this.rtcClient = rtcClient
  }

  render () {
    const {localClient, remoteClients} = this.state
    return (
      <div>
        <TheSpinStyle/>
        <TheButtonStyle/>
        <TheTalkStyle/>
        <TheTalk {...{localClient, remoteClients}}
                 onToggleVideo={(videoEnabled) => this.rtcClient.toggleVideoEnabled(videoEnabled)}
                 onToggleAudio={(audioEnabled) => this.rtcClient.toggleAudioEnabled(audioEnabled)}
                 renderRemoteClient={this.renderRemoteClient}
                 renderLocalClient={this.renderLocalClient}
        />
      </div>

    )
  }

  renderRemoteClient (state) {

  }

  renderLocalClient ({info}) {
    return (
      <span>{`${info.who} (${info.userAgent})`}</span>
    )
  }
}

export default ExampleComponent