import videojs from "video.js";
import { DISPLAY_FORMAT } from "../constants/displayFormat.js";
import "../styles/replay-overlay.css";

const Component = videojs.getComponent("Component");

/**
 * Centered replay control shown after playback ends.
 * Uses the Video.js icon font `vjs-icon-replay`
 * (https://videojs.github.io/font/).
 *
 * Options (passed via addChild, not player.options_):
 *   - audioOnlyMode {boolean}
 *   - displayFormat {number} — wrapper DISPLAY_FORMAT value
 */
class ReplayOverlay extends Component {
  constructor(player, options) {
    super(player, options);

    // this.on(...) auto-unbinds on dispose.
    this.on(player, "ended", this.handleEnded);
    this.on(player, "play", this.hide);
    this.on(player, "loadstart", this.hide);
    this.on(player, "error", this.hide);
    // seeking: hide early while scrubbing away from the end.
    // seeked: required so scrubbing *to* the end can show the overlay
    // (ended may only be true after the seek completes; without this the
    // control-bar PlayButton can show Replay while the overlay stays hidden).
    this.on(player, "seeking", this.syncFromSeek);
    this.on(player, "seeked", this.syncFromSeek);
    this.on("click", this.handleClick);
  }

  createEl() {
    const el = super.createEl("button", {
      className: "videojs-drm-replay-overlay",
      type: "button",
    });
    el.setAttribute("aria-label", this.localize("replay"));
    el.style.display = "none";
    // Icon from Video.js font: https://videojs.github.io/font/
    el.innerHTML = `<span class="vjs-icon-replay" aria-hidden="true"></span>`;
    return el;
  }

  /**
   * Normal video always qualifies. Audio-only only when there is a black
   * content band (displayFormat VIDEO_AREA / 2).
   *
   * displayFormat / audioOnlyMode come from component options_ (passed at
   * addChild time). They are stripped from the Video.js player options
   * before construction, so player.options_ must not be used here.
   */
  canShow() {
    const player = this.player();
    if (!player || (typeof player.error === "function" && player.error())) {
      return false;
    }
    if (this.options_?.audioOnlyMode) {
      return this.options_?.displayFormat === DISPLAY_FORMAT.VIDEO_AREA;
    }
    return true;
  }

  handleEnded() {
    this.show();
  }

  syncFromSeek() {
    if (this.player().ended()) {
      this.show();
    } else {
      this.hide();
    }
  }

  show() {
    if (!this.canShow() || !this.el()) {
      return;
    }
    this.el().style.display = "flex";
    this.player().addClass("vjs-has-replay-overlay");
  }

  hide() {
    if (!this.el()) {
      return;
    }
    this.el().style.display = "none";
    this.player().removeClass("vjs-has-replay-overlay");
  }

  handleClick(event) {
    event.preventDefault();
    event.stopPropagation();

    const player = this.player();
    this.hide();
    player.currentTime(0);
    const playPromise = player.play();
    if (playPromise && typeof playPromise.catch === "function") {
      playPromise.catch(() => {
        // Autoplay / gesture restrictions; user can retry via control bar.
      });
    }
  }
}

videojs.registerComponent("ReplayOverlay", ReplayOverlay);

export default ReplayOverlay;
