<script lang="ts" setup>
import { vue } from '@factor/api'
import ElBrowserFrameDevice from '@factor/ui/ElBrowserFrameDevice.vue'
import type { Site } from '../site'

defineProps({
  site: { type: Object as vue.PropType<Site>, default: undefined },
})
const deviceModes = [
  { name: 'desktop', icon: 'i-tabler-device-desktop' },
  { name: 'mobile', icon: 'i-tabler-device-mobile' },
  { name: 'tablet', icon: 'i-tabler-device-ipad' },
  { name: 'landscape', icon: 'i-tabler-device-ipad-horizontal' },
] as const
 type DeviceMode = typeof deviceModes[number]['name']

const activeDeviceMode = vue.ref<DeviceMode>('desktop')
</script>

<template>
  <div v-if="site" class="min-h-0 p-4">
    <div
      class="relative mx-auto py-4"
      :class="
        activeDeviceMode === 'mobile'
          ? 'w-[60%] max-w-xs'
          : activeDeviceMode === 'tablet'
            ? 'w-[85%] max-w-md'
            : activeDeviceMode === 'landscape'
              ? 'w-[85%] max-w-lg'
              : 'w-full'
      "
    >
      <ElBrowserFrameDevice
        :device-mode="activeDeviceMode"
        class="rounded-md shadow-md ring-1 ring-black/5"
        :url="site.previewUrl.value"
        frame-id="site-builder-iframe"
      />
      <div
        class="mt-4 flex justify-center space-x-2 "
      >
        <div
          v-for="(mode, i) in deviceModes"
          :key="i"
          class="inline-flex cursor-pointer select-none items-center rounded px-2 py-1 font-semibold space-x-1"
          :class="
            activeDeviceMode === mode.name
              ? 'bg-theme-400 text-theme-100'
              : 'text-theme-400 bg-theme-200 hover:text-white hover:bg-primary-500'
          "
          @click.stop="activeDeviceMode = mode.name"
        >
          <div class="text-xl">
            <div :class="mode.icon" />
          </div>
          <div class="capitalize tracking-tight text-[10px]">
            {{ mode.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
