import { h, Host } from '@stencil/core';
export class VideoDanmu {
  constructor() {
    this.list = [];
    this.danmuElList = [];
    this.currentTime = 0;
    this.enable = false;
    this.danmuList = [];
  }
  ensureProperties(danmu) {
    const clonedDanmu = Object.assign({}, danmu);
    if (!('time' in danmu)) {
      clonedDanmu.time = this.currentTime;
    }
    clonedDanmu.key = Math.random();
    clonedDanmu.bottom = `${Math.random() * 90 + 5}%`;
    return clonedDanmu;
  }
  async sendDanmu(danmuList = []) {
    if (Array.isArray(danmuList)) {
      this.list = [
        ...this.list,
        ...danmuList.map(danmu => this.ensureProperties(danmu))
      ];
    }
    else {
      const danmu = danmuList;
      this.list = [
        ...this.list,
        Object.assign({}, this.ensureProperties(danmu))
      ];
    }
  }
  async tick(currentTime) {
    this.currentTime = currentTime;
    if (!this.enable)
      return;
    const danmuList = this.list;
    /**
     * @todo 这个判断对拖拽进度的处理不严谨
     */
    const newDanmuList = danmuList.filter(({ time }) => {
      return currentTime - time < 4 && currentTime > time;
    });
    let shouldUpdate = false;
    const oldDanmuList = this.danmuList;
    if (newDanmuList.length !== oldDanmuList.length) {
      shouldUpdate = true;
    }
    else {
      shouldUpdate = newDanmuList.some(({ key }) => {
        return oldDanmuList.every((danmu) => {
          return key !== danmu.key;
        });
      });
    }
    if (shouldUpdate) {
      this.danmuList = newDanmuList;
    }
  }
  componentDidUpdate() {
    requestAnimationFrame(() => {
      setTimeout(() => {
        const danmuElList = this.danmuElList.splice(0);
        danmuElList.forEach(danmu => {
          danmu.style.left = '0';
          danmu.style.webkitTransform = 'translateX(-100%)';
          danmu.style.transform = 'translateX(-100%)';
        });
      });
    });
  }
  render() {
    if (!this.enable)
      return '';
    return (h(Host, { class: 'taro-video-danmu' }, this.danmuList.map(({ text, color, bottom, key }) => (h("p", { class: 'taro-video-danmu-item', key: key, style: {
        color,
        bottom
      }, ref: ref => {
        if (ref) {
          this.danmuElList.push(ref);
        }
      } }, text)))));
  }
  static get is() { return "taro-video-danmu"; }
  static get properties() {
    return {
      "enable": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "enable",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get states() {
    return {
      "danmuList": {}
    };
  }
  static get methods() {
    return {
      "sendDanmu": {
        "complexType": {
          "signature": "(danmuList?: Partial<Danmu> | Partial<Danmu>[]) => Promise<void>",
          "parameters": [{
              "tags": [],
              "text": ""
            }],
          "references": {
            "Promise": {
              "location": "global"
            },
            "Partial": {
              "location": "global"
            },
            "Danmu": {
              "location": "local"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      },
      "tick": {
        "complexType": {
          "signature": "(currentTime: number) => Promise<void>",
          "parameters": [{
              "tags": [],
              "text": ""
            }],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      }
    };
  }
}
//# sourceMappingURL=video-danmu.js.map
