<template>
  <div>
    <h4 :class="headingClass">Wertanzeige</h4>
    <div :class="rowClass"><label :class="labelClass">Quelle</label>
      <select :class="inputClass" v-model.number="widget.textSrc">
        <optgroup v-for="group in groupedSources(sourceOptions.arc)" :key="group.label" :label="group.label">
          <option v-for="opt in group.values" :key="opt" :value="opt">{{ textSources[opt] }}</option>
        </optgroup>
      </select>
    </div>
    <div v-if="widget.textSrc === 0" :class="rowClass">
      <label :class="labelClass">Statisch</label>
      <input :class="inputClass" type="number" min="0" max="100" v-model="widget.text">
    </div>
    <div :class="rowClass"><label :class="labelClass">KNX Lese</label>
      <select :class="inputClass" v-model.number="widget.knxAddr">
        <option :value="0">-- Keine --</option>
        <option v-for="addr in readableAddresses" :key="`${addr.addr}-${addr.index}`" :value="addr.addr">
          GA {{ addr.addrStr }} (GO{{ addr.index }})
        </option>
      </select>
    </div>
    <div :class="rowClass"><label :class="labelClass">KNX Schreib</label>
      <select :class="inputClass" v-model.number="widget.knxAddrWrite">
        <option :value="0">-- Keine --</option>
        <option v-for="addr in writeableAddresses" :key="`${addr.addr}-${addr.index}`" :value="addr.addr">
          GA {{ addr.addrStr }} (GO{{ addr.index }})
        </option>
      </select>
    </div>
    <div v-if="!store.knxAddresses.length" :class="noteClass">Keine KNX-Adressen geladen (Dev-API?).</div>
    <div :class="rowClass"><label :class="labelClass">Von</label><input :class="inputClass" type="number" v-model.number="widget.arcMin"></div>
    <div :class="rowClass"><label :class="labelClass">Bis</label><input :class="inputClass" type="number" v-model.number="widget.arcMax"></div>
    <div :class="rowClass"><label :class="labelClass">Einheit</label>
      <select :class="inputClass" v-model.number="widget.arcUnit">
        <option :value="0">Keine</option>
        <option :value="1">%</option>
        <option :value="2">C</option>
      </select>
    </div>
    <div :class="rowClass"><label :class="labelClass">Wert anzeigen</label>
      <input class="accent-[var(--accent)]" type="checkbox" v-model="widget.arcShowValue">
    </div>

    <h4 :class="headingClass">Skala</h4>
    <div :class="rowClass"><label :class="labelClass">Abstand</label>
      <input :class="inputClass" type="number" v-model.number="widget.arcScaleOffset">
    </div>
    <div :class="rowClass"><label :class="labelClass">Farbe</label>
      <input :class="colorInputClass" type="color" v-model="widget.arcScaleColor">
    </div>

    <h4 :class="headingClass">Wert</h4>
    <div :class="rowClass"><label :class="labelClass">Farbe</label>
      <input :class="colorInputClass" type="color" v-model="widget.arcValueColor">
    </div>
    <div :class="rowClass"><label :class="labelClass">Groesse</label>
      <select :class="inputClass" v-model.number="widget.arcValueFontSize">
        <option v-for="(size, idx) in fontSizes" :key="idx" :value="idx">{{ size }}</option>
      </select>
    </div>

    <h4 :class="headingClass">Stil</h4>
    <div :class="rowClass"><label :class="labelClass">Indikator</label><input :class="colorInputClass" type="color" v-model="widget.textColor"></div>
    <div :class="rowClass"><label :class="labelClass">Track</label><input :class="colorInputClass" type="color" v-model="widget.bgColor"></div>
    <div :class="rowClass"><label :class="labelClass">Track Opa</label><input :class="inputClass" type="number" min="0" max="255" v-model.number="widget.bgOpacity"></div>
    <div :class="rowClass"><label :class="labelClass">Linienbreite</label><input :class="inputClass" type="number" min="2" max="48" v-model.number="widget.radius"></div>

    <h4 :class="headingClass">Rand</h4>
    <div :class="rowClass"><label :class="labelClass">Breite</label><input :class="inputClass" type="number" min="0" max="32" v-model.number="widget.borderWidth"></div>
    <div :class="rowClass"><label :class="labelClass">Farbe</label><input :class="colorInputClass" type="color" v-model="widget.borderColor"></div>
    <div :class="rowClass"><label :class="labelClass">Deckkraft</label><input :class="inputClass" type="number" min="0" max="255" v-model.number="widget.borderOpacity"></div>

    <h4 :class="headingClass">Schatten</h4>
    <div :class="rowClass"><label :class="labelClass">Aktiv</label><input class="accent-[var(--accent)]" type="checkbox" v-model="widget.shadow.enabled"></div>
    <div :class="rowClass"><label :class="labelClass">X</label><input :class="inputClass" type="number" v-model.number="widget.shadow.x"></div>
    <div :class="rowClass"><label :class="labelClass">Y</label><input :class="inputClass" type="number" v-model.number="widget.shadow.y"></div>
    <div :class="rowClass"><label :class="labelClass">Blur</label><input :class="inputClass" type="number" min="0" max="40" v-model.number="widget.shadow.blur"></div>
    <div :class="rowClass"><label :class="labelClass">Spread</label><input :class="inputClass" type="number" min="0" max="20" v-model.number="widget.shadow.spread"></div>
    <div :class="rowClass"><label :class="labelClass">Farbe</label><input :class="colorInputClass" type="color" v-model="widget.shadow.color"></div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useEditorStore } from '../../../stores/editor';
import { sourceOptions, textSources, textSourceGroups, fontSizes } from '../../../constants';
import { rowClass, labelClass, inputClass, headingClass, colorInputClass, noteClass } from '../shared/styles';

defineProps({
  widget: { type: Object, required: true }
});

const store = useEditorStore();
const readableAddresses = computed(() => store.knxAddresses);
const writeableAddresses = computed(() => store.knxAddresses.filter(a => a.write));

function groupedSources(options) {
  const allowed = new Set(options || []);
  return textSourceGroups
    .map((group) => ({
      label: group.label,
      values: group.values.filter((value) => allowed.has(value))
    }))
    .filter((group) => group.values.length > 0);
}
</script>
