//公共的style标签，以供异步的css写入
let publicStyle: any = document.createElement('style');
publicStyle.setAttribute('class', 'sdk-controller-public');
document.getElementsByTagName('head')[0].appendChild(publicStyle);
publicStyle.addStyle = function (styleText: string) {
  this.appendChild(document.createTextNode(styleText))
};
(window as any).publicStyle = publicStyle;

declare interface Dictionary<T> {
  [key: string]: T;
}

export interface SDKControllerUIComponent {
  name: string
  classname: string
  hide?: boolean
  texture: Dictionary<string>
  defaultStatus: string
  type: string
  desc: string
}

export let SDKControllerUIComponents: Dictionary<SDKControllerUIComponent> = {
  'backward': {
    name: 'backward',
    classname: 'button-backward',
    texture: {
      normal: 'https://rs.hdkj.zmlearn.com/atlas/controller/backward_normal.png',
      unabled: 'https://rs.hdkj.zmlearn.com/atlas/controller/backward_unabled.png',
    },
    defaultStatus: 'normal',
    type: 'button',
    desc: '快退',
  },
  'forward': {
    name: 'forward',
    classname: 'button-forward',
    texture: {
      normal: 'https://rs.hdkj.zmlearn.com/atlas/controller/forward_normal.png',
      unabled: 'https://rs.hdkj.zmlearn.com/atlas/controller/forward_unabled.png',
    },
    defaultStatus: 'normal',
    type: 'button',
    desc: '快退',
  },
  'play': {
    name: 'play',
    classname: 'button-play',
    texture: {
      play: 'https://rs.hdkj.zmlearn.com/atlas/controller/play_normal.png',
      pause: 'https://rs.hdkj.zmlearn.com/atlas/controller/pause_normal.png',
    },
    defaultStatus: 'play',
    type: 'button',
    desc: '播放',
  },
  'prev': {
    name: 'prev',
    classname: 'button-prev',
    texture: {
      normal: 'https://rs.hdkj.zmlearn.com/atlas/controller/prev_normal.png',
      unabled: 'https://rs.hdkj.zmlearn.com/atlas/controller/prev_unabled.png',
    },
    defaultStatus: 'normal',
    type: 'button',
    desc: '前一条',
  },
  'next': {
    name: 'next',
    classname: 'button-next',
    texture: {
      normal: 'https://rs.hdkj.zmlearn.com/atlas/controller/next_normal.png',
      unabled: 'https://rs.hdkj.zmlearn.com/atlas/controller/next_unabled.png',
    },
    defaultStatus: 'normal',
    type: 'button',
    desc: '后一条',
  },
  'prevCheck': {
    name: 'prevCheck',
    classname: 'button-prev-check',
    texture: {
      normal: 'https://rs.hdkj.zmlearn.com/atlas/controller/prev_check_normal.png',
      unabled: 'https://rs.hdkj.zmlearn.com/atlas/controller/prev_check_unabled.png',
    },
    defaultStatus: 'normal',
    type: 'button',
    desc: '前一关',
  },
  'nextCheck': {
    name: 'nextCheck',
    classname: 'button-next-check',
    texture: {
      normal: 'https://rs.hdkj.zmlearn.com/atlas/controller/next_check_normal.png',
      unabled: 'https://rs.hdkj.zmlearn.com/atlas/controller/next_check_unabled.png',
    },
    defaultStatus: 'normal',
    type: 'button',
    desc: '下一关',
  },
  'controll': {
    name: 'controll',
    classname: 'checkbox-controll',
    texture: {
      teacher: 'https://rs.hdkj.zmlearn.com/atlas/controller/controll_teacher.png',
      student: 'https://rs.hdkj.zmlearn.com/atlas/controller/controll_student.png'
    },
    defaultStatus: 'teacher',
    type: 'checkbox',
    desc: '控制权切换'
  },
  'split': {
    name: 'split',
    classname: 'checkbox-split',
    texture: {
      full: 'https://rs.hdkj.zmlearn.com/atlas/controller/screen_full.png',
      split: 'https://rs.hdkj.zmlearn.com/atlas/controller/screen_split.png',
    },
    defaultStatus: 'full',
    type: 'checkbox',
    desc: '分屏切换'
  }
}

export class DOMComponent {
  public domElem: any
  public status: string
  public name: string
  public top: any
  constructor(comp: SDKControllerUIComponent, top: any) {
    this.top = top;
  }
  public show() {
    this.domElem.style.display = 'block';
  }
  public hide() {
    this.domElem.style.display = 'none';
  }
  //设置为可用
  public setStatus(status: string) {
    if (this.status)
      this.domElem.classList.remove(this.status);
    this.domElem.classList.add(status);
    this.status = status;
  }
}
export class DOMButton extends DOMComponent {
  //目前的按钮只有normal 和 unabled
  constructor(comp: SDKControllerUIComponent, top: any) {
    super(comp, top);
    let button = document.createElement('div');
    button.classList.add('sdk-ui-button');
    button.classList.add(comp.classname);
    button.classList.add(comp.defaultStatus);
    this.status = comp.defaultStatus;
    this.name = comp.name;
    for (let p in comp.texture) {
      publicStyle.addStyle(`.sdk-ui-button.${comp.classname}.${p}{background-image:url('${comp.texture[p]}')}`)
    }
    this.domElem = button;
    //click是移动端和pc端通用的
    this.domElem.addEventListener('click', function (e: any) {
      this.onClick(e);
      this.onMouseOver();
    }.bind(this), false);
    this.domElem.addEventListener('mouseover', function (e: any) {
      this.onMouseOver(e);
    }.bind(this), false);
    this.domElem.addEventListener('mouseout',function(e:any){
      this.onMouseOut(e);
    }.bind(this),false);
  }
  //e 原生事件
  public onClick(e: any) { console.log('组件' + this.name); }
  public onMouseOver(e: any) {}
  public onMouseOut(e: any){}
}

export class DOMCheckbox extends DOMComponent {
  private statusList: Array<string> = [];
  constructor(comp: SDKControllerUIComponent, top: any) {
    super(comp, top);
    let checkbox = document.createElement('div');
    checkbox.classList.add('sdk-ui-checkbox');
    checkbox.classList.add(comp.classname);
    checkbox.classList.add(comp.defaultStatus);
    this.status = comp.defaultStatus;
    this.name = comp.name;
    for (let p in comp.texture) {
      this.statusList.push(p);
      publicStyle.addStyle(`.sdk-ui-checkbox.${comp.classname}.${p}{background-image:url('${comp.texture[p]}')}`)
    }
    this.domElem = checkbox;
    this.domElem.addEventListener('click', function (e: any) {
      let next = this.statusList.indexOf(this.status);
      if (next < this.statusList.length - 1) next++;
      else next = 0;
      next = this.statusList[next];
      this.setStatus(next);
      this.onClick(e);
      this.onMouseOver();
    }.bind(this), false);
    this.domElem.addEventListener('mouseover', function (e: any) {
      this.onMouseOver(e);
    }.bind(this), false);
    this.domElem.addEventListener('mouseout',function(e:any){
      this.onMouseOut(e);
    }.bind(this),false);
  }
  //e 原生事件
  public onClick(e: any) { console.log('组件' + this.name); }
  public onMouseOver(e: any) {}
  public onMouseOut(e: any){}
}


/**
 * 设置固有style 
 * */
export function setDefaultStyle() {
  publicStyle.addStyle(`
        /*这些是按钮ui的style*/
        #controllCenter{position:fixed;width:100%;height:100%;left:0;top:0;z-index:1001;pointer-events:none;}
        .sdk-ui-button{position:absolute;background-size:100% 100%;transition:transform 0.2s;transform:translate(-50%, -50%);pointer-events:auto;}
        .sdk-ui-button:not(.unabled):hover{transform:translate(-50%, -50%) scale(1.15);}
        .sdk-ui-button:not(.unabled):active{transform:translate(-50%, -50%) scale(0.9);}
        .button-prev{width:0.91rem;height:0.94rem;top:50%;left:0.63rem;}
        .button-next{width:0.91rem;height:0.94rem;top:50%;right:0.10rem;}
        .button-prev-check{width:1.93rem;height:0.87rem;bottom:-0.26rem;left:50%;margin-left:-1.34rem;}
        .button-next-check{width:1.93rem;height:0.87rem;bottom:-0.26rem;left:50%;margin-left:1.34rem;}
        .button-play{width:0.91rem;height:0.94rem;left:50%;bottom:-0.37rem;}
        .button-pause{width:0.91rem;height:0.94rem;left:50%;bottom:-0.37rem;}
        .button-backward{width:0.91rem;height:0.94rem;left:50%;margin-left:-1.78rem;bottom:-0.37rem;}
        .button-forward{width:0.91rem;height:0.94rem;left:50%;margin-left:1.78rem;bottom:-0.37rem;}
        .sdk-ui-checkbox{position:absolute;background-size:100% 100%;pointer-events:auto;}
        .checkbox-split{width:1.7rem;height:0.72rem;right:0.15rem;top:0.17rem;}
        .checkbox-controll{width:1.76rem;height:0.96rem;right:0.19rem;bottom:0.15rem;}
        /*这些是分屏ui的style*/
        body{overflow:hidden;background-color:transparent !important;}
        #childIframes{width:19.2rem;height:10.8rem;position:absolute;left:50%;top:50%;margin-left:-9.6rem;margin-top:-5.4rem;}
        .inspliting{background-color:#2F2F37;}
        .inspliting canvas{display:none}
        .inspliting video{display:none}
        .sdk-child{position:absolute;display:none;}
        .sdk-child-iframe{position:absolute;outline:none;border:none;z-index:2;background-color:#ccc;}
        .sdk-child-name{color:#fff;position:absolute;bottom:0;}

        .split1 .sdk-child:nth-child(1){display:block}
        .split1 .sdk-child{width:14.5rem;height:9rem;left:2.35rem;top:1.2rem;}
        .split1 .sdk-child-iframe{width:14.5rem;height:8.12rem;}
        .split1 .sdk-child-name{line-height:0.88rem;height:0.88rem;font-size:0.36rem;text-indent:0.05rem;}

        .split2 .sdk-child:nth-child(1),.split2 .sdk-child:nth-child(2){display:block}
        .split2 .sdk-child{width:8.88rem;height:5.6rem;left:50%;top:2.7rem;margin-left:0.19rem;}
        .split2 .sdk-child:nth-child(1){margin-left:-9.07rem;}
        .split2 .sdk-child-iframe{width:8.88rem;height:5rem;}
        .split2 .sdk-child-name{line-height:0.6rem;height:0.6rem;font-size:0.32rem;text-indent:0.03rem;}

        .split3 .sdk-child:nth-child(1),.split3 .sdk-child:nth-child(2),.split3 .sdk-child:nth-child(3){display:block}
        .split3 .sdk-child{width:5.2rem;height:3.28rem;left:50%;top:3.6rem;margin-left:3.16rem;}
        .split3 .sdk-child:nth-child(1){margin-left:-8.36rem;}
        .split3 .sdk-child:nth-child(2){margin-left:-2.6rem;}
        .split3 .sdk-child-iframe{width:5.2rem;height:2.88rem;}
        .split3 .sdk-child-name{line-height:0.4rem;height:0.4rem;font-size:0.24rem;text-indent:0.02rem;}

        .split4 .sdk-child:nth-child(1), .split4 .sdk-child:nth-child(2), .split4 .sdk-child:nth-child(3), .split4 .sdk-child:nth-child(4){display:block}
        .split4 .sdk-child{width:6rem;height:4.02rem;left:50%;top:50%;margin-top:0.2rem;}
        .split4 .sdk-child:nth-child(1), .split4 .sdk-child:nth-child(2){margin-top:-4.22rem;}
        .split4 .sdk-child:nth-child(3), .split4 .sdk-child:nth-child(4){margin-top:0.2rem;}
        .split4 .sdk-child:nth-child(1), .split4 .sdk-child:nth-child(3){margin-left:-6.33rem;}
        .split4 .sdk-child:nth-child(2), .split4 .sdk-child:nth-child(4){margin-left:0.33rem;}
        .split4 .sdk-child-iframe{width:6rem;height:3.38rem;}
        .split4 .sdk-child-name{line-height:0.64rem;height:0.64rem;font-size:0.26rem;text-indent:0.02rem;}

        .split5 .sdk-child:nth-child(1), .split5 .sdk-child:nth-child(2), .split5 .sdk-child:nth-child(3), .split5 .sdk-child:nth-child(4), .split5 .sdk-child:nth-child(5){display:block}
        .split5 .sdk-child{width:5.2rem;height:3.28rem;left:50%;top:50%;}
        .split5 .sdk-child:nth-child(1), .split5 .sdk-child:nth-child(2), .split5 .sdk-child:nth-child(3){margin-top:-3.48rem;}
        .split5 .sdk-child:nth-child(4), .split5 .sdk-child:nth-child(5){margin-top:0.2rem;}
        .split5 .sdk-child:nth-child(1){margin-left:-8.36rem;}
        .split5 .sdk-child:nth-child(2){margin-left:-2.6rem;}
        .split5 .sdk-child:nth-child(3){margin-left:3.16rem;}
        .split5 .sdk-child:nth-child(4){margin-left:-5.48rem;}
        .split5 .sdk-child:nth-child(5){margin-left:0.28rem;}
        .split5 .sdk-child-iframe{width:5.2rem;height:2.88rem;}
        .split5 .sdk-child-name{line-height:0.4rem;height:0.4rem;font-size:0.24rem;text-indent:0.02rem;}

        .split6 .sdk-child:nth-child(1), .split6 .sdk-child:nth-child(2), .split6 .sdk-child:nth-child(3), .split6 .sdk-child:nth-child(4), .split6 .sdk-child:nth-child(5), .split6 .sdk-child:nth-child(6){display:block}
        .split6 .sdk-child{width:5.2rem;height:3.28rem;left:50%;top:50%;}
        .split6 .sdk-child:nth-child(1), .split6 .sdk-child:nth-child(2), .split6 .sdk-child:nth-child(3){margin-top:-3.48rem;}
        .split6 .sdk-child:nth-child(4), .split6 .sdk-child:nth-child(5), .split6 .sdk-child:nth-child(6){margin-top:0.2rem;}
        .split6 .sdk-child:nth-child(1), .split6 .sdk-child:nth-child(4){margin-left:-8.36rem;}
        .split6 .sdk-child:nth-child(2), .split6 .sdk-child:nth-child(5){margin-left:-2.6rem;}
        .split6 .sdk-child:nth-child(3), .split6 .sdk-child:nth-child(6){margin-left:3.16rem;}
        .split6 .sdk-child-iframe{width:5.2rem;height:2.88rem;}
        .split6 .sdk-child-name{line-height:0.4rem;height:0.4rem;font-size:0.24rem;text-indent:0.02rem;}
    `);
}

/**
 * 设置观察者style 
 * */
export function setObserverStyle() {
  publicStyle.addStyle(`
        /*这些是按钮ui的style*/
        #controllCenter{position:fixed;width:100%;height:100%;left:0;top:0;z-index:1001;pointer-events:auto;}
        .sdk-ui-button{position:absolute;background-size:100% 100%;transition:transform 0.2s;transform:translate(-50%, -50%);pointer-events:none;}
        .sdk-ui-button:not(.unabled):hover{transform:translate(-50%, -50%) scale(1.15);}
        .sdk-ui-button:not(.unabled):active{transform:translate(-50%, -50%) scale(0.9);}
        .button-prev{width:0.91rem;height:0.94rem;top:50%;left:0.63rem;}
        .button-next{width:0.91rem;height:0.94rem;top:50%;right:0.10rem;}
        .button-prev-check{width:1.93rem;height:0.87rem;bottom:-0.26rem;left:50%;margin-left:-1.34rem;}
        .button-next-check{width:1.93rem;height:0.87rem;bottom:-0.26rem;left:50%;margin-left:1.34rem;}
        .button-play{width:0.91rem;height:0.94rem;left:50%;bottom:-0.37rem;}
        .button-pause{width:0.91rem;height:0.94rem;left:50%;bottom:-0.37rem;}
        .button-backward{width:0.91rem;height:0.94rem;left:50%;margin-left:-1.78rem;bottom:-0.37rem;}
        .button-forward{width:0.91rem;height:0.94rem;left:50%;margin-left:1.78rem;bottom:-0.37rem;}
        .sdk-ui-checkbox{position:absolute;background-size:100% 100%;pointer-events:none;}
        .checkbox-split{width:1.7rem;height:0.72rem;right:0.15rem;top:0.17rem;}
        .checkbox-controll{width:1.76rem;height:0.96rem;right:0.19rem;bottom:0.15rem;}
        /*这些是分屏ui的style*/
        body{overflow:hidden;background-color:transparent !important;}
        #childIframes{width:19.2rem;height:10.8rem;position:absolute;left:50%;top:50%;margin-left:-9.6rem;margin-top:-5.4rem;}
        .inspliting{background-color:#2F2F37;}
        .inspliting canvas{display:none}
        .inspliting video{display:none}
        .sdk-child{position:absolute;display:none;}
        .sdk-child-iframe{position:absolute;outline:none;border:none;z-index:2;background-color:#ccc;}
        .sdk-child-name{color:#fff;position:absolute;bottom:0;}

        .split1 .sdk-child:nth-child(1){display:block}
        .split1 .sdk-child{width:14.5rem;height:9rem;left:2.35rem;top:1.2rem;}
        .split1 .sdk-child-iframe{width:14.5rem;height:8.12rem;}
        .split1 .sdk-child-name{line-height:0.88rem;height:0.88rem;font-size:0.36rem;text-indent:0.05rem;}

        .split2 .sdk-child:nth-child(1),.split2 .sdk-child:nth-child(2){display:block}
        .split2 .sdk-child{width:8.88rem;height:5.6rem;left:50%;top:2.7rem;margin-left:0.19rem;}
        .split2 .sdk-child:nth-child(1){margin-left:-9.07rem;}
        .split2 .sdk-child-iframe{width:8.88rem;height:5rem;}
        .split2 .sdk-child-name{line-height:0.6rem;height:0.6rem;font-size:0.32rem;text-indent:0.03rem;}

        .split3 .sdk-child:nth-child(1),.split3 .sdk-child:nth-child(2),.split3 .sdk-child:nth-child(3){display:block}
        .split3 .sdk-child{width:5.2rem;height:3.28rem;left:50%;top:3.6rem;margin-left:3.16rem;}
        .split3 .sdk-child:nth-child(1){margin-left:-8.36rem;}
        .split3 .sdk-child:nth-child(2){margin-left:-2.6rem;}
        .split3 .sdk-child-iframe{width:5.2rem;height:2.88rem;}
        .split3 .sdk-child-name{line-height:0.4rem;height:0.4rem;font-size:0.24rem;text-indent:0.02rem;}

        .split4 .sdk-child:nth-child(1), .split4 .sdk-child:nth-child(2), .split4 .sdk-child:nth-child(3), .split4 .sdk-child:nth-child(4){display:block}
        .split4 .sdk-child{width:6rem;height:4.02rem;left:50%;top:50%;margin-top:0.2rem;}
        .split4 .sdk-child:nth-child(1), .split4 .sdk-child:nth-child(2){margin-top:-4.22rem;}
        .split4 .sdk-child:nth-child(3), .split4 .sdk-child:nth-child(4){margin-top:0.2rem;}
        .split4 .sdk-child:nth-child(1), .split4 .sdk-child:nth-child(3){margin-left:-6.33rem;}
        .split4 .sdk-child:nth-child(2), .split4 .sdk-child:nth-child(4){margin-left:0.33rem;}
        .split4 .sdk-child-iframe{width:6rem;height:3.38rem;}
        .split4 .sdk-child-name{line-height:0.64rem;height:0.64rem;font-size:0.26rem;text-indent:0.02rem;}

        .split5 .sdk-child:nth-child(1), .split5 .sdk-child:nth-child(2), .split5 .sdk-child:nth-child(3), .split5 .sdk-child:nth-child(4), .split5 .sdk-child:nth-child(5){display:block}
        .split5 .sdk-child{width:5.2rem;height:3.28rem;left:50%;top:50%;}
        .split5 .sdk-child:nth-child(1), .split5 .sdk-child:nth-child(2), .split5 .sdk-child:nth-child(3){margin-top:-3.48rem;}
        .split5 .sdk-child:nth-child(4), .split5 .sdk-child:nth-child(5){margin-top:0.2rem;}
        .split5 .sdk-child:nth-child(1){margin-left:-8.36rem;}
        .split5 .sdk-child:nth-child(2){margin-left:-2.6rem;}
        .split5 .sdk-child:nth-child(3){margin-left:3.16rem;}
        .split5 .sdk-child:nth-child(4){margin-left:-5.48rem;}
        .split5 .sdk-child:nth-child(5){margin-left:0.28rem;}
        .split5 .sdk-child-iframe{width:5.2rem;height:2.88rem;}
        .split5 .sdk-child-name{line-height:0.4rem;height:0.4rem;font-size:0.24rem;text-indent:0.02rem;}

        .split6 .sdk-child:nth-child(1), .split6 .sdk-child:nth-child(2), .split6 .sdk-child:nth-child(3), .split6 .sdk-child:nth-child(4), .split6 .sdk-child:nth-child(5), .split6 .sdk-child:nth-child(6){display:block}
        .split6 .sdk-child{width:5.2rem;height:3.28rem;left:50%;top:50%;}
        .split6 .sdk-child:nth-child(1), .split6 .sdk-child:nth-child(2), .split6 .sdk-child:nth-child(3){margin-top:-3.48rem;}
        .split6 .sdk-child:nth-child(4), .split6 .sdk-child:nth-child(5), .split6 .sdk-child:nth-child(6){margin-top:0.2rem;}
        .split6 .sdk-child:nth-child(1), .split6 .sdk-child:nth-child(4){margin-left:-8.36rem;}
        .split6 .sdk-child:nth-child(2), .split6 .sdk-child:nth-child(5){margin-left:-2.6rem;}
        .split6 .sdk-child:nth-child(3), .split6 .sdk-child:nth-child(6){margin-left:3.16rem;}
        .split6 .sdk-child-iframe{width:5.2rem;height:2.88rem;}
        .split6 .sdk-child-name{line-height:0.4rem;height:0.4rem;font-size:0.24rem;text-indent:0.02rem;}
    `);
}