<script setup lang="ts">
import { SheetRoot, SheetContent } from '@/components/ui/sheet'
import { Lucide } from '@/components/ui/lucide'
import { useColorSchemeStore, type ColorSchemes } from '@/stores/color-scheme'
import { useDarkModeStore } from '@/stores/dark-mode'
import { ref } from 'vue'

const themeSwitcherSheet = ref(false)
const setThemeSwitcherSheet = (value: boolean) => {
  themeSwitcherSheet.value = value
}

const setColorSchemeClass = () => {
  const el = document.querySelectorAll('html')[0]
  el?.setAttribute('data-theme', useColorSchemeStore().colorSchemeValue)
  if (useDarkModeStore().darkModeValue) el?.classList.add('dark')
}
const colorSchemeStore = useColorSchemeStore()
const switchColorScheme = (colorScheme: ColorSchemes) => {
  useColorSchemeStore().setColorScheme(colorScheme)
  setColorSchemeClass()
  setThemeSwitcherSheet(false)
}
setColorSchemeClass()

const setDarkModeClass = () => {
  const el = document.querySelectorAll('html')[0]
  useDarkModeStore().darkModeValue ? el?.classList.add('dark') : el?.classList.remove('dark')
}
const darkModeStore = useDarkModeStore()
const switchDarkMode = (darkMode: boolean) => {
  useDarkModeStore().setDarkMode(darkMode)
  setDarkModeClass()
  setThemeSwitcherSheet(false)
}
setDarkModeClass()

const colorSchemes: Array<ColorSchemes> = ['default', '1', '2', '3', '4', '5']

</script>

<template>
  <div>
    <SheetRoot :open="themeSwitcherSheet" @openChange="(details) => setThemeSwitcherSheet(details.open)">
      <SheetContent>
        <a class="absolute inset-y-0 left-0 right-auto my-auto ml-[60px] flex h-8 w-8 items-center justify-center rounded-full border border-white/90 bg-white/5 text-white/90 transition-all hover:rotate-180 hover:scale-105 hover:bg-white/10 focus:outline-none sm:ml-[105px] sm:h-14 sm:w-14"
          @click="
            (event: MouseEvent) => {
              event.preventDefault()
              setThemeSwitcherSheet(false)
            }
          ">
          <Lucide class="h-3 w-3 stroke-1 sm:h-8 sm:w-8" icon="X" />
        </a>
        <div class="absolute inset-0 px-7 py-5 overflow-y-scroll">
          <div class="flex flex-col">
            <div>
              <div class="text-base font-medium">Accent Colors</div>
              <div class="mt-0.5 opacity-70">Choose your accent color</div>
              <div class="mt-5 grid grid-cols-6 gap-x-3 gap-y-4">
                <div v-for="colorScheme in colorSchemes" :key="colorScheme">
                  <a @click="
                    (event: MouseEvent) => {
                      event.preventDefault()
                      switchColorScheme(colorScheme)
                    }
                  " :data-theme="colorScheme" :class="[
                    'h-10 cursor-pointer bg-primary block rounded-(--radius) transition-all duration-100 ring-offset-4 ring-offset-background hover:scale-[105%]',
                    colorSchemeStore.colorSchemeValue == colorScheme
                      ? 'ring-2 ring-foreground/20'
                      : 'ring-1 ring-foreground/10',
                  ]"></a>
                </div>
              </div>
            </div>
            <div class="border-b border-dashed border-foreground/15 my-5"></div>
            <div>
              <div class="text-base font-medium">Appearance</div>
              <div class="mt-0.5 opacity-70">Choose your appearance</div>
              <div class="mt-5 grid grid-cols-2 gap-x-5 gap-y-4">
                <div>
                  <a @click="
                    (event: MouseEvent) => {
                      event.preventDefault()
                      switchDarkMode(false)
                    }
                  " :class="[
                    'h-12 cursor-pointer bg-background block rounded-(--radius) transition-all duration-100 ring-offset-4 ring-offset-background hover:scale-[105%]',
                    !darkModeStore.darkModeValue
                      ? 'ring-2 ring-foreground/20'
                      : 'ring-1 ring-foreground/10',
                  ]">
                    <div class="h-full overflow-hidden rounded-(--radius) bg-slate-200"></div>
                  </a>
                  <div class="mt-2.5 text-center text-xs capitalize">Light</div>
                </div>
                <div>
                  <a @click="
                    (event: MouseEvent) => {
                      event.preventDefault()
                      switchDarkMode(true)
                    }
                  " :class="[
                    'h-12 cursor-pointer bg-background block rounded-(--radius) transition-all duration-100 ring-offset-4 ring-offset-background hover:scale-[105%]',
                    darkModeStore.darkModeValue
                      ? 'ring-2 ring-foreground/20'
                      : 'ring-1 ring-foreground/10',
                  ]">
                    <div class="h-full overflow-hidden rounded-(--radius) bg-slate-900"></div>
                  </a>
                  <div class="mt-2.5 text-center text-xs capitalize">Dark</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </SheetContent>
    </SheetRoot>
    <div :class="[
      'fixed inset-y-0 right-0 z-50 my-auto flex hover:w-20 transition-all w-14 h-12 cursor-pointer border-(--color)/50 items-center border justify-center rounded-l-full shadow-lg overflow-hidden bg-background/80 [--color:var(--color-primary)]',
      'before:bg-(--color)/20 before:absolute before:inset-0',
    ]" @click="
      (event: MouseEvent) => {
        event.preventDefault()
        setThemeSwitcherSheet(true)
      }
    ">
      <Lucide class="animate-spin" icon="Settings" />
    </div>
  </div>
</template>
