export const themeChangeMixin = {
  data() {
    return {
      theme: "",
      observe: null,
    };
  },
  mounted() {
    const bodyEle = document.querySelector("body");
    this.getTheme(bodyEle);
    this.observeThemeChange(bodyEle);
  },

  methods: {
    getTheme(el) {
      const themeClass = Array.from(el.classList).filter((item) =>
        item.startsWith("eui-theme")
      );
      if (themeClass && themeClass[0]) {
        this.theme =
          themeClass[0].split("-")[themeClass[0].split("-").length - 1];
      }
    },

    observeThemeChange(el) {
      if (this.observe) return;
      this.observe = new MutationObserver((e) => {
        this.getTheme(el);
        // if (this.theme === 'black') {
        //   document.cookie = `theme=black; path=/`;
        // } else {
        //   document.cookie = `theme=metrogreen; path=/`;
        // }
      });
      this.observe.observe(el, {
        attributes: true,
      });
    },
  },
};
