<script setup lang="ts">
import { ref } from 'vue';
import { useVibrate } from './index';

const presets: Record<string, number[]> = {
  Pulse: [200],
  Double: [100, 60, 100],
  SOS: [100, 60, 100, 60, 100, 200, 250, 60, 250, 60, 250, 200, 100, 60, 100, 60, 100],
  Heartbeat: [120, 100, 120, 500],
};

const { isSupported, pattern, vibrate, stop, intervalControls } = useVibrate({
  pattern: presets.Double,
  interval: 1500,
});

const activePreset = ref('Double');
const looping = intervalControls?.isActive;

function applyPreset(name: string): void {
  activePreset.value = name;
  pattern.value = presets[name];
  vibrate();
}

function toggleLoop(): void {
  if (intervalControls?.isActive.value)
    stop();
  else
    intervalControls?.resume();
}
</script>

<template>
  <div class="demo-stack max-w-sm">
    <div
      v-if="!isSupported"
      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
    >
      The Vibration API is not supported in this browser. Try a mobile device.
    </div>

    <div class="demo-card p-4">
      <div class="flex items-center justify-between">
        <span class="demo-label">
          Current pattern (ms)
        </span>
        <span
          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
          :class="isSupported
            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
            : 'border-border bg-bg-inset text-fg-muted'"
        >
          {{ isSupported ? 'supported' : 'unsupported' }}
        </span>
      </div>
      <div class="mt-2 overflow-x-auto rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
        [{{ Array.isArray(pattern) ? pattern.join(', ') : pattern }}]
      </div>
    </div>

    <div class="flex flex-col gap-2">
      <span class="demo-label">Presets</span>
      <div class="grid grid-cols-2 gap-2">
        <button
          v-for="(_, name) in presets"
          :key="name"
          type="button"
          :disabled="!isSupported"
          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
          :class="activePreset === name
            ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
          @click="applyPreset(name)"
        >
          {{ name }}
        </button>
      </div>
    </div>

    <div class="flex flex-wrap gap-2">
      <button
        type="button"
        :disabled="!isSupported"
        class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
        @click="vibrate()"
      >
        Vibrate now
      </button>
      <button
        type="button"
        :disabled="!isSupported"
        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
        @click="toggleLoop"
      >
        {{ looping ? 'Stop loop' : 'Loop every 1.5s' }}
      </button>
      <button
        type="button"
        :disabled="!isSupported"
        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
        @click="stop"
      >
        Stop
      </button>
    </div>
  </div>
</template>
