<script setup lang="ts">
/**
 * Left rail: buttons that add a new element to the design. "Image" opens a file
 * picker and inlines the chosen file as a data URL (persisted with the
 * template). Operates on the injected `ldDesigner`.
 */
import type { LdElementType } from '~/composables/useLabelDesign'

const designer = inject('ldDesigner') as ReturnType<typeof useLabelDesign>

const tools: { type: LdElementType; icon: string; label: string }[] = [
  { type: 'text', icon: 'ti ti-typography', label: 'Text' },
  { type: 'barcode', icon: 'ti ti-barcode', label: 'Barcode' },
  { type: 'qr', icon: 'ti ti-qrcode', label: 'QR Code' },
  { type: 'datamatrix', icon: 'ti ti-grid-dots', label: 'DataMatrix' },
  { type: 'image', icon: 'ti ti-photo', label: 'Image' },
  { type: 'rect', icon: 'ti ti-square', label: 'Rectangle' },
  { type: 'ellipse', icon: 'ti ti-circle', label: 'Ellipse' },
  { type: 'line', icon: 'ti ti-line', label: 'Line' }
]

const fileInput = ref<HTMLInputElement | null>(null)

const add = (type: LdElementType) => {
  if (type === 'image') { fileInput.value?.click(); return }
  designer.addElement(type)
}

const onFile = (e: Event) => {
  const input = e.target as HTMLInputElement
  const file = input.files?.[0]
  if (!file) return
  const reader = new FileReader()
  reader.onload = () => {
    const dataUrl = String(reader.result || '')
    const img = new Image()
    img.onload = () => {
      const aspect = (img.naturalWidth || 1) / (img.naturalHeight || 1)
      const wMm = 30
      const hMm = round2(clamp(wMm / (aspect || 1), 5, 120))
      designer.addElement('image', { dataUrl, w: wMm, h: hMm } as any)
    }
    img.onerror = () => designer.addElement('image', { dataUrl } as any)
    img.src = dataUrl
  }
  reader.readAsDataURL(file)
  input.value = '' // allow re-picking the same file
}
</script>

<template>
  <div class="ldPalette">
    <p class="ldPalette__title">Elements</p>
    <button
      v-for="tool in tools"
      :key="tool.type"
      type="button"
      class="ldPalette__btn"
      @click="add(tool.type)"
    >
      <span class="ti" :class="tool.icon"></span>
      <span class="ldPalette__label">{{ tool.label }}</span>
    </button>
    <input ref="fileInput" type="file" accept="image/*" class="is-hidden" @change="onFile" />
  </div>
</template>

<style scoped>
.ldPalette {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}
.ldPalette__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.55;
  margin-bottom: 4px;
}
.ldPalette__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--theme-border, #e2e2e6);
  border-radius: 8px;
  background: var(--theme-bg-primary, #fff);
  color: var(--theme-text-primary, inherit);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ldPalette__btn:hover {
  background: var(--theme-bg-secondary, #f4f4f6);
  border-color: #3b82f6;
}
.ldPalette__btn .ti {
  font-size: 18px;
}
.ldPalette__label {
  font-weight: 500;
}
</style>
