<script setup lang="ts">
/**
 * Label size + background controls. Preset dropdown (LABEL_SIZE_PRESETS) plus
 * custom width/height (mm), an orientation swap, and the label background
 * colour. Mutates the injected `ldDesigner` via setSize/setBackground.
 */
const designer = inject('ldDesigner') as ReturnType<typeof useLabelDesign>
const { template } = designer

const num = (e: Event) => Number((e.target as HTMLInputElement).value) || 0
const val = (e: Event) => (e.target as HTMLInputElement).value

const currentPreset = computed(() => template.value.size.preset || 'custom')

const onPreset = (e: Event) => {
  const name = val(e)
  if (name === 'custom') {
    designer.setSize(template.value.size.wMm, template.value.size.hMm, undefined)
    return
  }
  const p = LABEL_SIZE_PRESETS.find(x => x.name === name)
  if (p) designer.setSize(p.wMm, p.hMm, p.name)
}

const onWidth = (e: Event) => designer.setSize(num(e), template.value.size.hMm, undefined)
const onHeight = (e: Event) => designer.setSize(template.value.size.wMm, num(e), undefined)
const swap = () => designer.setSize(template.value.size.hMm, template.value.size.wMm, undefined)
</script>

<template>
  <div class="ldFormat">
    <div class="ldFormat__field">
      <label>Label size</label>
      <div class="select is-small"><select :value="currentPreset" @change="onPreset">
        <option v-for="p in LABEL_SIZE_PRESETS" :key="p.name" :value="p.name">{{ p.name }}</option>
        <option value="custom">Custom…</option>
      </select></div>
    </div>
    <div class="ldFormat__dims">
      <input type="number" min="5" step="1" class="input is-small" :value="template.size.wMm" @change="onWidth" />
      <span class="ldFormat__x">×</span>
      <input type="number" min="5" step="1" class="input is-small" :value="template.size.hMm" @change="onHeight" />
      <span class="ldFormat__unit">mm</span>
      <button type="button" class="button is-small" title="Swap width / height" @click="swap"><span class="ti ti-arrows-exchange"></span></button>
    </div>
    <div class="ldFormat__field ldFormat__bg">
      <label>Background</label>
      <input type="color" class="ldFormat__color" :value="template.background" @change="designer.setBackground(val($event))" />
    </div>
  </div>
</template>

<style scoped>
.ldFormat { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ldFormat__field { display: flex; flex-direction: column; gap: 3px; }
.ldFormat__field > label { font-size: 11px; opacity: 0.7; }
.ldFormat__dims { display: flex; align-items: center; gap: 6px; }
.ldFormat__dims .input { width: 72px; }
.ldFormat__x { opacity: 0.6; }
.ldFormat__unit { font-size: 12px; opacity: 0.6; }
.ldFormat__color { width: 40px; height: 30px; border: 1px solid var(--theme-border, #e2e2e6); border-radius: 6px; cursor: pointer; padding: 2px; background: none; }
</style>
