"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.onChangeColorMode = exports.colorModeLocalStorageKey = exports.ColorModePlugin = void 0;
var _vue = require("vue");
var _utils = require("@grozav/utils");
const onChangeColorMode = colorMode => {
  let color;
  if (colorMode === "system") {
    color = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  } else {
    color = colorMode;
  }
  (0, _utils.removeClass)(document.body, "light-theme dark-theme");
  (0, _utils.addClass)(document.body, `${color}-theme`);
};
exports.onChangeColorMode = onChangeColorMode;
const colorModeLocalStorageKey = "inkline-color-mode";
exports.colorModeLocalStorageKey = colorModeLocalStorageKey;
const ColorModePlugin = {
  install: (app, {
    inkline,
    renderMode
  }) => {
    if (typeof window !== "undefined") {
      const onDarkModeMediaQueryChange = () => {
        if (inkline.options.colorMode === "system") {
          onChangeColorMode(inkline.options.colorMode);
        }
      };
      const darkModeMediaQuery = matchMedia("(prefers-color-scheme: dark)");
      if (darkModeMediaQuery.addEventListener) {
        darkModeMediaQuery.addEventListener("change", onDarkModeMediaQueryChange);
      } else {
        darkModeMediaQuery.addListener(onDarkModeMediaQueryChange);
      }
      (0, _vue.watch)(() => inkline.options.colorMode, colorMode => {
        onChangeColorMode(colorMode);
        if (inkline.options.colorModeStrategy === "localStorage") {
          localStorage.setItem(colorModeLocalStorageKey, colorMode);
        }
      });
      if (inkline.options.colorModeStrategy === "localStorage" && renderMode === "client") {
        const storedColorMode = localStorage.getItem(colorModeLocalStorageKey);
        if (storedColorMode) {
          inkline.options.colorMode = storedColorMode;
        }
      } else {
        onChangeColorMode(inkline.options.colorMode);
      }
    }
  }
};
exports.ColorModePlugin = ColorModePlugin;