/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

import { GroupCallParticipant } from "../../layer";
import type { GroupCallOutputSource } from "../../lib/appManagers/appGroupCallsManager";
import { i18n } from "../../lib/langPack";
import PeerTitle from "../peerTitle";
import { getGroupCallParticipantMutedState } from ".";
import GroupCallParticipantMutedIcon from "./participantMutedIcon";
import GroupCallParticipantStatusElement from "./participantStatus";
import GroupCallInstance from "../../lib/calls/groupCallInstance";
import callVideoCanvasBlur from "../call/videoCanvasBlur";
import getPeerId from "../../lib/appManagers/utils/peers/getPeerId";
import { AppManagers } from "../../lib/appManagers/managers";

const className = 'group-call-participant-video';

export type GroupCallParticipantVideoType = 'video' | 'presentation';
export default class GroupCallParticipantVideoElement {
  public container: HTMLElement;
  private peerTitle: PeerTitle;
  private subtitle: HTMLElement;
  private info: HTMLElement;
  private left: HTMLElement;
  private right: HTMLElement;
  private header: HTMLElement;
  private groupCallParticipantMutedIcon: GroupCallParticipantMutedIcon;
  private groupCallParticipantStatus: GroupCallParticipantStatusElement;

  constructor(private managers: AppManagers, private instance: GroupCallInstance, public source: GroupCallOutputSource) {
    this.container = document.createElement('div');
    this.container.classList.add(className + '-container');

    this.info = document.createElement('div');
    this.info.classList.add(className + '-info');

    this.left = document.createElement('div');
    this.left.classList.add(className + '-info-left');

    this.right = document.createElement('div');
    this.right.classList.add(className + '-info-right');

    this.info.append(this.left, this.right);
    
    this.container.append(this.info);
  }

  public setPinned(value: boolean) {
    if(!value) {
      if(this.header) {
        this.header.remove();
        this.header = undefined;
      }

      return;
    } else if(this.header) {
      return;
    }
    
    // if(!this.header) {
      this.header = document.createElement('div');
      this.header.classList.add(className + '-header');
  
      const icon = document.createElement('i');
      icon.classList.add('group-call-pin-icon', 'tgico-pin');
      this.header.append(icon);
  
      this.container.append(this.header);
    // }
    
    // this.container.classList.toggle('is-pinned', value);
  }

  public setParticipant(participant: GroupCallParticipant, type: GroupCallParticipantVideoType, video: HTMLVideoElement) {
    let peerTitleElement: HTMLElement;
    if(participant.pFlags.self) {
      peerTitleElement = i18n('VoiceChat.Status.You');
      peerTitleElement.classList.add('peer-title');
    } else {
      this.peerTitle = new PeerTitle({
        peerId: getPeerId(participant.peer)
      });

      peerTitleElement = this.peerTitle.element;
    }

    this.groupCallParticipantMutedIcon = new GroupCallParticipantMutedIcon(false);
    this.groupCallParticipantStatus = new GroupCallParticipantStatusElement([type]);

    this.left.append(peerTitleElement, this.groupCallParticipantStatus.container);

    this.right.append(this.groupCallParticipantMutedIcon.container);

    video.classList.add(className, 'call-video');

    if(video.paused) {
      video.play();
    }

    const canvas = callVideoCanvasBlur(video);
    canvas.classList.add(className + '-blur');
    
    this.container.prepend(canvas, video);

    this.updateParticipant(participant);
  }

  public updateParticipant(participant: GroupCallParticipant) {
    const state = getGroupCallParticipantMutedState(participant);

    this.groupCallParticipantMutedIcon.setState(state);
    this.groupCallParticipantStatus.setState(state, participant);
  }

  public destroy() {
    this.groupCallParticipantMutedIcon.destroy();
  }
}
