<script setup lang="ts">
import { nextTick, ref } from "vue"

const props = defineProps<{
  zoneIndex?: number
  isLast?: boolean
}>()

const emit = defineEmits<{
  activate: [content: string]
  focus: []
  blur: []
  "navigate-up": []
  "navigate-down": []
}>()

const hovered = ref(false)
const focused = ref(false)
const rootEl = ref<HTMLElement | null>(null)
const inputEl = ref<HTMLInputElement | null>(null)

function onKeydown(e: KeyboardEvent) {
  if (e.key === "ArrowUp") {
    e.preventDefault()
    emit("navigate-up")
    return
  }

  if (e.key === "ArrowDown") {
    e.preventDefault()
    emit("navigate-down")
    return
  }

  if (e.key === "Escape") {
    e.preventDefault()
    focused.value = false
    emit("blur")
    return
  }

  if (e.key === "Enter") {
    e.preventDefault()
    emit("activate", "")
    return
  }

  if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
    e.preventDefault()
    emit("activate", e.key)
    return
  }
}

function onPaste(e: ClipboardEvent) {
  e.preventDefault()
  const text = e.clipboardData?.getData("text/plain") ?? ""
  emit("activate", text)
}

function onFocus() {
  focused.value = true
  emit("focus")
  nextTick(() => inputEl.value?.focus())
}

function onBlur() {
  focused.value = false
  emit("blur")
}

defineExpose({ focus: () => rootEl.value?.focus() })
</script>

<template>
  <div
    ref="rootEl"
    class="relative outline-none cursor-text select-none transition-[height,background-color] duration-300 ease-in-out"
    :class="focused ? 'h-12 bg-(--ui-primary)/[0.04]' : (isLast ? 'h-8' : 'h-2') + ' bg-transparent'"
    :data-zone-index="zoneIndex"
    :data-drop-target="''"
    tabindex="0"
    role="button"
    aria-label="Insert block"
    @paste="onPaste"
    @click="rootEl?.focus()"
    @focus="onFocus"
    @mouseenter="hovered = true"
    @mouseleave="hovered = false"
  >
    <!-- Hover: a whisper, not a shout -->
    <Transition
      enter-active-class="transition-opacity duration-200"
      leave-active-class="transition-opacity duration-100"
      enter-from-class="opacity-0"
      leave-to-class="opacity-0"
    >
      <div
        v-if="hovered && !focused"
        class="absolute inset-0 flex items-center justify-center gap-2.5 text-(--ui-text-dimmed)"
      >
        <div class="flex-1 h-px bg-(--ui-border)" />
        <span class="flex items-center gap-1.5 text-xs italic">
          <UIcon name="i-lucide-pencil-line" class="size-3 not-italic" />
          write something
        </span>
        <div class="flex-1 h-px bg-(--ui-border)" />
      </div>
    </Transition>

    <!-- Focused: paper opening up -->
    <Transition
      enter-active-class="transition-opacity duration-250"
      enter-from-class="opacity-0"
    >
      <div
        v-if="focused"
        class="absolute inset-0 flex items-center gap-2 px-1"
      >
        <input
          ref="inputEl"
          class="w-full ml-2 bg-transparent outline-none text-sm italic text-(--ui-text-dimmed) placeholder-(--ui-text-dimmed)/60"
          :style="{ caretColor: 'var(--ui-primary)' }"
          placeholder="What's on your mind?"
          @keydown.stop="onKeydown"
          @paste="onPaste"
          @blur="onBlur"
        />
      </div>
    </Transition>
  </div>
</template>
