<script setup lang="ts">
import type { DocksContext } from '@devframes/hub/client'
import type { SharedState } from 'devframe/utils/shared-state'
import type { HubDocksUserSettings } from '../../state/dock-settings'
import { computed } from 'vue'
import { colorSchemePreference, setColorSchemePreference } from '../../state/color-mode'
import { sharedStateToRef } from '../../state/docks'
import { isDockPopupSupported, requestDockPopupOpen, useIsDockPopupOpen } from '../../state/popup'

const props = defineProps<{
  context: DocksContext
  settingsStore: SharedState<HubDocksUserSettings>
}>()

const settings = sharedStateToRef(props.settingsStore)
const panelStore = props.context.panel.store
const isEmbedded = props.context.clientType === 'embedded'
const isDockPopupOpen = useIsDockPopupOpen()

const dockModeOptions = computed(() => {
  const options = [
    { value: 'float', label: 'Float', icon: 'i-ph-cards-three-duotone' },
    { value: 'edge', label: 'Edge', icon: 'i-ph-square-half-bottom-duotone' },
  ]
  if (isDockPopupSupported()) {
    options.push({ value: 'popup', label: 'Popup', icon: 'i-ph-arrow-square-out-duotone' })
  }
  return options
})

const currentDockMode = computed(() => panelStore.mode)

const colorModeOptions = [
  { value: 'auto', label: 'Auto', icon: 'i-ph-laptop-duotone' },
  { value: 'light', label: 'Light', icon: 'i-ph-sun-duotone' },
  { value: 'dark', label: 'Dark', icon: 'i-ph-moon-duotone' },
] as const

function setDockMode(mode: string) {
  if (mode === 'popup') {
    requestDockPopupOpen(props.context)
  }
  else {
    panelStore.mode = mode as 'float' | 'edge'
  }
}
</script>

<template>
  <div class="flex flex-col gap-4">
    <!-- Color mode -->
    <div class="flex flex-col gap-2">
      <div class="flex flex-col">
        <span class="text-sm">Color mode</span>
        <span class="text-xs op50">Theme for Devframes and its inner panels</span>
      </div>
      <div class="flex items-center gap-1 bg-gray/10 rounded-lg p1 w-fit">
        <button
          v-for="option of colorModeOptions"
          :key="option.value"
          class="flex items-center gap-1.5 px3 py1.5 rounded-md text-sm transition-all"
          :class="colorSchemePreference === option.value
            ? 'bg-base shadow text-primary font-medium'
            : 'op60 hover:op100 hover:bg-gray/10'"
          @click="setColorSchemePreference(option.value)"
        >
          <div :class="option.icon" class="w-4 h-4" />
          {{ option.label }}
        </button>
      </div>
    </div>

    <!-- Dock mode -->
    <div v-if="isEmbedded && !isDockPopupOpen" class="flex flex-col gap-2">
      <div class="flex flex-col">
        <span class="text-sm">Dock mode</span>
        <span class="text-xs op50">How the Devframes panel is displayed</span>
      </div>
      <div class="flex items-center gap-1 bg-gray/10 rounded-lg p1 w-fit">
        <button
          v-for="option of dockModeOptions"
          :key="option.value"
          class="flex items-center gap-1.5 px3 py1.5 rounded-md text-sm transition-all"
          :class="currentDockMode === option.value
            ? 'bg-base shadow text-primary font-medium'
            : 'op60 hover:op100 hover:bg-gray/10'"
          @click="setDockMode(option.value)"
        >
          <div :class="option.icon" class="w-4 h-4" />
          {{ option.label }}
        </button>
      </div>
    </div>

    <!-- Show iframe address bar toggle -->
    <label class="flex items-center gap-3 cursor-pointer group">
      <button
        class="w-10 h-6 rounded-full transition-colors relative shrink-0"
        :class="settings.showIframeAddressBar ? 'bg-primary' : 'bg-gray/30'"
        @click="settingsStore.mutate((s) => { s.showIframeAddressBar = !s.showIframeAddressBar })"
      >
        <div
          class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
          :class="settings.showIframeAddressBar ? 'translate-x-5' : 'translate-x-1'"
        />
      </button>
      <div class="flex flex-col">
        <span class="text-sm">Show iframe address bar</span>
        <span class="text-xs op50">Display navigation controls and URL bar for iframe views</span>
      </div>
    </label>

    <!-- Close on outside click toggle -->
    <label class="flex items-center gap-3 cursor-pointer group">
      <button
        class="w-10 h-6 rounded-full transition-colors relative shrink-0"
        :class="settings.closeOnOutsideClick ? 'bg-primary' : 'bg-gray/30'"
        @click="settingsStore.mutate((s) => { s.closeOnOutsideClick = !s.closeOnOutsideClick })"
      >
        <div
          class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
          :class="settings.closeOnOutsideClick ? 'translate-x-5' : 'translate-x-1'"
        />
      </button>
      <div class="flex flex-col">
        <span class="text-sm">Close panel on outside click</span>
        <span class="text-xs op50">Close the Devframes panel when clicking outside of it (embedded mode only)</span>
      </div>
    </label>
  </div>
</template>
