<template>
  <nav class="navbar is-dark">
    <div class="navbar-brand pl-5">
      <a class="navbar-item" href="#">
        <b>YTPTube</b>
      </a>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <span class="icon-text" :class="config.isConnected ? 'has-text-success' : 'has-text-danger'">
          <span class="icon">
            <font-awesome-icon :icon="config.isConnected ? 'fa-solid fa-wifi' : 'fa-solid fa-signal'" />
          </span>
          <span>
            {{ config.isConnected ? 'Connected' : 'Connecting' }}
          </span>
        </span>
      </div>
      <div class="navbar-item">
        <button data-tooltip="Switch to Light theme" class="button is-dark has-tooltip-bottom"
          @click="selectedTheme = 'light'" v-if="selectedTheme == 'dark'">🌞</button>
        <button data-tooltip="Switch to Dark theme" class="button is-dark  has-tooltip-bottom"
          @click="selectedTheme = 'dark'" v-if="selectedTheme == 'light'">🌚</button>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { defineProps, watch, onMounted } from 'vue'
import { useStorage } from '@vueuse/core'

const selectedTheme = useStorage('theme', (() => window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')());

defineProps({
  config: {
    type: Object,
    required: true
  }
})

const applyPreferredColorScheme = (scheme) => {
  for (var s = 0; s < document.styleSheets.length; s++) {
    for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) {
      const rule = document.styleSheets[s].cssRules[i];

      if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
        switch (scheme) {
          case "light":
            rule.media.appendMedium("original-prefers-color-scheme");
            if (rule.media.mediaText.includes("light")) {
              rule.media.deleteMedium("(prefers-color-scheme: light)");
            }
            if (rule.media.mediaText.includes("dark")) {
              rule.media.deleteMedium("(prefers-color-scheme: dark)");
            }
            break;
          case "dark":
            rule.media.appendMedium("(prefers-color-scheme: light)");
            rule.media.appendMedium("(prefers-color-scheme: dark)");
            if (rule.media.mediaText.includes("original")) {
              rule.media.deleteMedium("original-prefers-color-scheme");
            }
            break;
          default:
            rule.media.appendMedium("(prefers-color-scheme: dark)");
            if (rule.media.mediaText.includes("light")) {
              rule.media.deleteMedium("(prefers-color-scheme: light)");
            }
            if (rule.media.mediaText.includes("original")) {
              rule.media.deleteMedium("original-prefers-color-scheme");
            }
            break;
        }
      }
    }
  }
}

onMounted(() => {
  try {
    applyPreferredColorScheme(selectedTheme.value);
  } catch (e) {
    console.debug(e);
  }
})

watch(selectedTheme, (value) => {
  try {
    applyPreferredColorScheme(value);
  } catch (e) {
    console.debug(e);
  }
})

</script>
