interface SequenceState {
  name : string,
  hash : string,
  progress : number
}

interface State {
  width? : number,
  height? : number,
  sequence? : SequenceState
}

class Client {
  private client : WebSocket;
  private connected : boolean = false;
  private progress : HTMLProgressElement;

  constructor () {
    let uri : string = 'ws://localhost:8082';
    this.progress = document.getElementById('progress') as HTMLProgressElement;
    this.client = new WebSocket(uri);
    this.client.onopen = this.onOpen.bind(this);
    this.client.onmessage = this.onMessage.bind(this);
  }

  private onMessage (event : any) {
    const state : State = JSON.parse(event.data) as State;
    if (typeof state.sequence !== 'undefined' && state.sequence !== null) {
      this.setSequence(state.sequence);
    }
  }

  private onOpen (event : any) {
    console.log('Connected');
    this.connected = true;
  }

  private setSequence(sequence : SequenceState) {
    const percent : number = sequence.progress * 100.0;
    this.progress.value = percent;
    this.progress.innerText = `${Math.floor(percent)}%`;
  }

  public cameraOpen () {
    console.log('camera open');
    this.client.send(JSON.stringify({ cmd : 'open' }));
  }
}

const client : Client = new Client();