<script setup lang="ts">
import { useFullscreen } from "@vueuse/core";

const app = useAppStore();

const showFullscreenBtn = ref(true);
const { isFullscreen, toggle: toggleFullscreen } = useFullscreen();

const open = ref(false);

onMounted(() => {
  if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
    showFullscreenBtn.value = false;
  }
});
</script>

<template>
  <div class="fixed bottom-4 right-4 flex flex-row items-center">
    <UPopover
      v-model:open="open"
      :content="{ side: 'top', align: 'center' }"
      :ui="{ content: 'bg-transparent border-0 ring-0 shadow-none' }"
    >
      <template #default>
        <UButton
          :icon="
            app.settings.volume === 0
              ? 'i-heroicons-speaker-x-mark'
              : 'i-heroicons-speaker-wave'
          "
          color="neutral"
          variant="link"
          size="xl"
          :class="[
            'transition-opacity',
            open
              ? 'opacity-100 text-highlighted'
              : 'opacity-50 hover:opacity-100',
          ]"
        />
      </template>

      <template #content>
        <div class="flex items-center justify-center h-24">
          <USlider
            :model-value="app.settings.volume * 100"
            :min="0"
            :max="100"
            :step="2"
            orientation="vertical"
            color="neutral"
            @keydown.prevent
            @mouseup="($event.target as HTMLElement).blur()"
            @update:model-value="
              (v) => {
                app.settings.volume = (v ?? 100) / 100;
                app.save();
              }
            "
          />
        </div>
      </template>
    </UPopover>

    <UButton
      v-if="showFullscreenBtn"
      :icon="
        isFullscreen
          ? 'i-heroicons-arrows-pointing-in'
          : 'i-heroicons-arrows-pointing-out'
      "
      color="neutral"
      variant="link"
      size="xl"
      class="opacity-50 hover:opacity-100 transition-opacity"
      @click="toggleFullscreen"
    />
  </div>
</template>
