import { defineStore } from "pinia";
import { ref, watch } from "vue";

export const useSettings = defineStore("settings", () => {
  const initialSettings = localStorage.getItem("settings");
  const settings = ref(
    initialSettings
      ? JSON.parse(initialSettings)
      : {
          resolution: {
            width: 1920,
            height: 1080,
          },
          carousel: false,
          carouselTime: 10, // s
          fullscreen: false,
          eqStatus: true,
        }
  );

  const clearFullscreenFlag = (e) => {
    if (!document.fullscreenElement) {
      settings.value.fullscreen = false;
    }
  };

  watch(
    () => settings.value.fullscreen,
    (val) => {
      const mainContainer = document.getElementById("main-container");
      if (val) {
        mainContainer.requestFullscreen().then(() => {
          document.removeEventListener("fullscreenchange", clearFullscreenFlag);
          document.addEventListener("fullscreenchange", clearFullscreenFlag);
        });
        return;
      }
      if (document.fullscreenElement) document.exitFullscreen();
    }
  );

  watch(
    () => settings.value,
    (val) => {
      localStorage.setItem("settings", JSON.stringify(val));
    },
    {
      immediate: true,
      deep: true,
    }
  );

  function rewriteSettings(payload) {
    settings.value = payload;
  }

  function updateSettings({ type, value }) {
    switch (type) {
      case "carousel":
        settings.value.carousel = !settings.value.carousel;
        break;
      case "fullscreen":
        settings.value.fullscreen = !settings.value.fullscreen;
        break;
      case "eq":
        settings.value.eqStatus = !settings.value.eqStatus;
        break;
      case "resolution":
        settings.value.resolution.height = value.height;
        settings.value.resolution.width = value.width;
        break;
    }
  }
  return { settings, updateSettings, rewriteSettings, changeScale };
});

function changeScale(elm, width, height) {
  const xScale = width / 1920;
  const yScale = height / 1080;
  const style = {
    transform: `scale(${xScale}, ${yScale}) !important`,
    transformOrigin: "top left",
  };
  elm.style.transform = style.transform;
  elm.style.transformOrigin = style.transformOrigin;
}

function resetScale(elm) {
  elm.style.transform = "initial";
  elm.style.transformOrigin = "initial";
}