import { Spine } from "pixi-spine";
import { Assets } from "pixi.js";
import { createStyles } from "../utils/styles.js";
import EmbeddedSpineButton from "../components/ui/EmbeddedSpineButton.js";
import {State} from "@popiplay/state-machine";
import Scene from "./Scene";
import {SETTINGS} from "../constants/constants";
import Locator from "../services/Locator";

const styles = createStyles({
  prefix: "desktop/>",
  "(orientation: landscape) and (max-height: 500px)": {
    prefix: "mobile/>"
  }
});

const SOUND_INDICATION_STATES = {
  INACTIVE: 0,
  ACTIVE: 1,
}

export class StartScreenUI extends Scene {
  constructor() {
    super("start_page_ui");
    this.inputs = {}
  }

  create() {
    this.spine = new Spine(Assets.get("start_page_ui").spineData);
    this.addChild(this.spine);
    this.spine.state.addListener({
      event: (entry, event) => {
        Locator.events.emit(event.data.name, event);
      }
    });
    this.autoUpdate = false;
    let track = 0;
    new EmbeddedSpineButton(this.spine, "sound_on_btn", ++track, ++track);
    new EmbeddedSpineButton(this.spine, "sound_off_btn", ++track, ++track);
    this.setupListeners();
    this.createSoundIndicator()
  }

  setupListeners() {
    this.spine.state.addListener({
      event: (entry, event) => {
        if (event.data.name === "sound_on_btn/down") this.inputs.isSoundOnButtonPressed = true;
        if (event.data.name === "sound_off_btn/down") this.inputs.isSoundOffButtonPressed = true;
        if (event.data.name === "sound_on_btn/down") this.inputs.isSoundOnButtonPressed = false;
        if (event.data.name === "sound_off_btn/down") this.inputs.isSoundOffButtonPressed = false;
      }
    });
  }

  createSoundIndicator() {
    this.soundIndicatorStates = [
      new SoundIndicatorInactiveState(this),
      new SoundIndicatorActiveState(this)
    ]
    this.setSoundIndicatorState(SOUND_INDICATION_STATES.INACTIVE);
  }

  setSoundIndicatorState(state) {
    this.currentSoundIndicatorState = this.soundIndicatorStates[state];
    this.currentSoundIndicatorState.enter();
  }

  update(dt) {
    this.currentSoundIndicatorState.handleInput(!this.inputs.isMute);
  }

  stop() {
    this.spine.destroy({ children: true });
  }

  get resizeSkinPrefix() {
    return styles.prefix;
  }

  handleAudioSoundOff() {
    this.spine.state.setAnimation(0, "commands/sound_off", false);
  }

  handleAudioSoundOn() {
    this.spine.state.setAnimation(0, "commands/sound_on", false);
  }

  resize(resizeData) {
    this.spine.skeleton.setSkinByName(this.resizeSkinPrefix + Math.floor(Locator.viewport.cropWidthRatio * 10) * 10);
    this.spine.position.set(resizeData.center.x, resizeData.center.y);
    this.spine.skeleton.findBone("right").x = resizeData.visibleWidth * 0.5;
    this.spine.skeleton.findBone("left").x = -resizeData.visibleWidth * 0.5;
    this.spine.skeleton.findBone("top").y = resizeData.viewportHeight * 0.5;

    const portraitScaleBone = this.spine.skeleton.findBone("portrait_scale/>20");
    const portraitScale = Math.min(Locator.viewport.cropWidthRatio * SETTINGS.viewport.width / 250, 1);
    portraitScaleBone.scaleX = portraitScale;
    portraitScaleBone.scaleY = portraitScale;
  }
}

class SoundIndicatorInactiveState extends State{
  constructor(scene) {
    super("SoundIndicatorInactiveState");
    this.scene = scene;
  }

  enter() {
    this.scene.handleAudioSoundOff()
  }

  handleInput(inputState) {
    if (inputState === true) {
      this.scene.setSoundIndicatorState(SOUND_INDICATION_STATES.ACTIVE)
    }
  }
}

class SoundIndicatorActiveState extends State{
  constructor(scene) {
    super("SoundIndicatorActiveState");
    this.scene = scene;
  }

  enter() {
    this.scene.handleAudioSoundOn()
  }

  handleInput(inputState) {
    if (inputState === false) {
      this.scene.setSoundIndicatorState(SOUND_INDICATION_STATES.INACTIVE)
    }
  }
}
