<template>
  <q-layout>
    <q-page-container class="flex column items-center q-pt-lg" style="padding-top: 128px">
      <div class="theme-toggle show-animation" :style="{ animationDelay: '400ms' }">
        <div :class="['theme-toggle-bg', themeMode]"></div>
        <button
          :class="{ active: themeMode === 'light' }"
          @click="setAppTheme('light')"
          aria-label="Light theme"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
        </button>
        <button
          :class="{ active: themeMode === 'system' }"
          @click="setAppTheme('system')"
          aria-label="System theme"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>
        </button>
        <button
          :class="{ active: themeMode === 'dark' }"
          @click="setAppTheme('dark')"
          aria-label="Dark theme"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
        </button>
      </div>

      <div class="row show-animation" :style="{ animationDelay: '0ms' }">
        <img src="/logo.svg" style="height: 128px" alt="MōBrowser logo"/>
      </div>
      <div class="row show-animation" :style="{ animationDelay: '80ms' }">
        <div class="text-h3 q-my-lg text-weight-bold" style="font-size: 2.5rem">
          Welcome to MōBrowser!
        </div>
      </div>
      <div class="row show-animation" :style="{ animationDelay: '160ms' }">
        <div class="text-body1 q-my-md">
          Please enter your name and click the button.
        </div>
      </div>
      <div class="row items-center show-animation" :style="{ animationDelay: '240ms' }">
        <div class="col-8">
          <q-input outlined id="greet-input" placeholder="Your name" v-model="name"
                   v-on:keyup.enter="sayHello" :dense="true"/>
        </div>
        <div class="col-0">
          <q-btn id="greet-btn" color="white" style="margin-left: 8px" text-color="black" label="Greet"
                 @click="sayHello"/>
        </div>
      </div>
      <div id="greet-msg" class="text-body2 q-my-md show-animation" :style="{ animationDelay: '320ms' }">{{ greetMessage }}</div>
      <div v-if="isMacOS" class="draggable"></div>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { Dark } from "quasar";
import { ipc } from "./gen/ipc";

const name = ref("");
const greetMessage = ref("");
const isMacOS = ref(window.navigator.userAgent.indexOf('Mac') !== -1);
const themeMode = ref(localStorage.getItem("app-theme") || "system");

const applyQuasarTheme = (mode) => {
  if (mode === 'system') {
    Dark.set('auto');
  } else if (mode === 'dark') {
    Dark.set(true);
  } else {
    Dark.set(false);
  }
}

onMounted(() => {
  applyQuasarTheme(themeMode.value);
});

watch(themeMode, (newVal) => {
  applyQuasarTheme(newVal);
});

const setAppTheme = (newTheme) => {
  localStorage.setItem("app-theme", newTheme);
  ipc.app.SetTheme({ theme: newTheme }).then(() => {
    themeMode.value = newTheme;
  });
};

const sayHello = () => {
  ipc.greet.SayHello({ name: name.value }).then((message) => {
    greetMessage.value = message.value;
  });
}
</script>