
import EmbeddedSpineCheckbox from "./EmbeddedSpineCheckbox.js";
import {SETTINGS} from "../../constants/constants";
import EmbeddedSpineSlider from "./EmbeddedSpineSlider.js";
import EmbeddedSpineButton from "./EmbeddedSpineButton.js";
import {Skin} from "@pixi-spine/runtime-4.1";
import TextAttachment from "../TextAttachment.js";
import {createStyles} from "../../utils/styles";
import Locator from "../../services/Locator";
import {Assets, Container, Sprite, Texture} from "pixi.js";
import {Spine} from "pixi-spine";
import {ANALYTICS_EVENTS} from "../../services";

let track = 0;

const style = createStyles({
  skinFolder: "desktop",
  "(max-height: 500px) and (orientation: landscape)": {
    skinFolder: "mobile",
  },
  "(orientation: portrait)": {
    skinFolder: "mobile",
  }
});

export default class GameSettings extends Container {
  constructor(inputs, options) {
    super();
    this._roundStarted = false;
    this.inputs = inputs;
    this.options = options;
    this.createOverlay();
    this.setupSpine();
    this.setupListeners();
    this.createTexts();
    this.visible = false;
    this.update(0);
  }

  createOverlay() {
    this.overlay = new Sprite(Texture.WHITE);
    this.overlay.width = SETTINGS.viewport.width;
    this.overlay.height = SETTINGS.viewport.height;
    this.overlay.tint = 0;
    this.overlay.alpha = 0.5;
    this.overlay.anchor.set(0.5);
    this.addChild(this.overlay);
    this.overlay.eventMode = "static";
    this.overlay.on("pointerup", this.globalUpHandler, this);
    this.overlay.on("pointerdown", this.globalDownHandler, this);
  }

  setupSpine() {
    this.spine = new Spine(Assets.get("game_settings").spineData);
    this.addChild(this.spine);
    this.spine.slotContainers[this.spine.skeleton.findSlotIndex("settings_bg")].eventMode = "static";
    new EmbeddedSpineButton(this.spine, "close_btn", ++track, ++track);
    this.turboSpinCheckbox = new EmbeddedSpineCheckbox(this.spine, "checkbox_turbo_spin", ++track, ++track, ++track);
    this.spaceBarCheckbox = new EmbeddedSpineCheckbox(this.spine, "checkbox_spacebar", ++track, ++track, ++track);
    this.musicCheckBox = new EmbeddedSpineCheckbox(this.spine, "checkbox_music", ++track, ++track, ++track);
    this.sfxCheckbox = new EmbeddedSpineCheckbox(this.spine, "checkbox_sfx", ++track, ++track, ++track);
    this.volumeSlider = new EmbeddedSpineSlider(this.spine, "slider_volume");
    this.volumeSlider.onchange = (e) => {
      this.inputs.volume = e.value;
    };
    this.volumeSlider.ondown = (e) => {
      this.inputs.isVolumeChanging = true;
    };
    this.volumeSlider.onup = (e) => {
      this.inputs.isVolumeChanging = false;

      Locator.analytics.track(ANALYTICS_EVENTS.VOLUME_CHANGED_UI, {
        volume: e.value,
      });
    };


    this.skin = new Skin("mixed");
  }

  setupListeners() {
    this.spine.state.addListener({
      event: (entry, event) => {
        if (event.data.name === "close_btn/up") this.inputs.isSettingsShown = false;
        if (event.data.name === "checkbox_turbo_spin/up") {
          this.inputs.isTurboButtonPressed = false;
          Locator.analytics.track(ANALYTICS_EVENTS.TURBOSPIN_CHANGED_PANEL, {
            enabled: this.inputs.isTurboModeActive,
          });
        }
        if (event.data.name === "checkbox_turbo_spin/down") this.inputs.isTurboButtonPressed = true;
        if (event.data.name === "checkbox_spacebar/up") this.inputs.isEnableSpaceBarButtonPressed = false;
        if (event.data.name === "checkbox_spacebar/down") this.inputs.isEnableSpaceBarButtonPressed = true;
        if (event.data.name === "checkbox_music/up") this.inputs.isMusicButtonPressed = false;
        if (event.data.name === "checkbox_music/down") this.inputs.isMusicButtonPressed = true;
        if (event.data.name === "checkbox_sfx/up") this.inputs.isSFXButtonPressed = false;
        if (event.data.name === "checkbox_sfx/down") this.inputs.isSFXButtonPressed = true;
      }
    });

    window.addEventListener('keydown', this.handleKeyDown.bind(this));
  }

  handleKeyDown(event) {
    if (event.keyCode === 27) {
      this.inputs.isSettingsShown = false;
    }
  }

  globalUpHandler() {
    this.inputs.isSettingsButtonPressed = false;
  }

  globalDownHandler(e) {
    this.inputs.isSettingsButtonPressed = true;
  }

  update() {
    if (this.visible && !this.inputs.isSettingsShown) {
      this.hide();
    } else if (!this.visible && this.inputs.isSettingsShown) {
      this.show();
    }
    if (!this.visible) return;

    this.spine.update(0);
    this.turboSpinCheckbox.checked = this.inputs.isTurboModeActive;
    this.spaceBarCheckbox.checked = this.inputs.isSpaceBarHandlingActive;
    this.musicCheckBox.checked = !this.inputs.isMusicMute;
    this.sfxCheckbox.checked = !this.inputs.isSFXMute;
    this.volumeSlider.position = this.inputs.volume;
  }

  resize() {
    this.position.set(SETTINGS.viewport.width * 0.5, SETTINGS.viewport.height * 0.5);

    this.skin.clear();
    this.skin.addSkin(this.spine.spineData.findSkin(this.buildPositionSkinName()));
    this.spine.skeleton.setSkin(null);
    this.spine.skeleton.setToSetupPose();
    this.spine.skeleton.setSkin(this.skin);

    //portrait_scale_control
    const mobileScaleBone = this.spine.skeleton.findBone("portrait_scale_control");
    const mobileScale = Math.min(Locator.viewport.cropWidthRatio * SETTINGS.viewport.width / 220, 1.3);
    mobileScaleBone.scaleX = mobileScaleBone.scaleY = mobileScale;
  }

  get resizeSkinPrefix() {
    return style.skinFolder + "/" + ">";
  }

  buildPositionSkinName() {
    return this.resizeSkin;
  }

  get resizeSkin() {
    return this.resizeSkinPrefix + Math.floor(Locator.viewport.cropWidthRatio * 10) * 10;
  }

  show() {
    this.visible = true;
  }

  hide() {
    this.visible = false;
  }

  createTexts() {
    this.titleText = new TextAttachment({width: 180, height: 24}, this.options);
    this.titleText.content = {key: "ui_settings_title"};
    this.titleText.style = {
      fill: 0xffffff,
      fontFamily: "Oxanium, Opensans",
      fontSize: 22,
      fontWeight: "bold",
    };
    this.titleText.autoScaleToFit = true;
    this.titleText.boundaries = false;
    this.titleText.attachTo(this.spine, "txt_Settings");

    this.turboText = new TextAttachment({width: 150, height: 14}, this.options);
    this.turboText.content = {key: "ui_settings_turbo"};
    this.turboText.style = {
      fill: 0xffffff,
      fontFamily: "Oxanium, Opensans",
      fontSize: 20,
      fontWeight: "normal",
    };
    this.turboText.autoScaleToFit = true;
    this.turboText.boundaries = false;
    this.turboText.attachTo(this.spine, "txt_Turbospin");

    this.turboText = new TextAttachment({width: 150, height: 14}, this.options);
    this.turboText.content = {key: "ui_settings_spacebar"};
    this.turboText.style = {
      fill: 0xffffff,
      fontFamily: "Oxanium, Opensans",
      fontSize: 20,
      fontWeight: "normal",
    };
    this.turboText.autoScaleToFit = true;
    this.turboText.boundaries = false;
    this.turboText.attachTo(this.spine, "txt_Spacebar to spin");

    this.audioText = new TextAttachment({width: 150, height: 24}, this.options);
    this.audioText.content = {key: "ui_settings_audio"};
    this.audioText.style = {
      fill: 0xffffff,
      fontFamily: "Oxanium, Opensans",
      fontSize: 18,
      fontWeight: "bold",
    };
    this.audioText.autoScaleToFit = true;
    this.audioText.boundaries = false;
    this.audioText.attachTo(this.spine, "txt_Audio");

    this.volumeText = new TextAttachment({width: 150, height: 20}, this.options);
    this.volumeText.content = {key: "ui_settings_volume"};
    this.volumeText.style = {
      fill: 0xffffff,
      fontFamily: "Oxanium, Opensans",
      fontSize: 18,
      fontWeight: "bold",
    };
    this.volumeText.autoScaleToFit = true;
    this.volumeText.boundaries = false;
    this.volumeText.attachTo(this.spine, "txt_Volume");

    this.musicText = new TextAttachment({width: 150, height: 14}, this.options);
    this.musicText.content = {key: "ui_settings_music"};
    this.musicText.style = {
      fill: 0xffffff,
      fontFamily: "Oxanium, Opensans",
      fontSize: 20,
      fontWeight: "normal",
    };
    this.musicText.autoScaleToFit = true;
    this.musicText.boundaries = false;
    this.musicText.attachTo(this.spine, "txt_Music");

    this.soundText = new TextAttachment({width: 150, height: 14}, this.options);
    this.soundText.content = {key: "ui_settings_sound"};
    this.soundText.style = {
      fill: 0xffffff,
      fontFamily: "Oxanium, Opensans",
      fontSize: 20,
      fontWeight: "normal",
    };
    this.soundText.autoScaleToFit = true;
    this.soundText.boundaries = false;
    this.soundText.attachTo(this.spine, "txt_Sound FX");
  }
}
