<template>
  <div>
    <h4 :class="headingClass">Buttons</h4>
    <div :class="rowClass">
      <label :class="labelClass">Matrix</label>
      <textarea
        :class="`${inputClass} min-h-[74px] resize-y`"
        v-model="widget.text"
        placeholder="z.B. 1;2;3\n4;5;6"
      ></textarea>
    </div>
    <div :class="noteClass">Spalten mit `;` oder `,` trennen, Zeilen mit Enter.</div>

    <h4 :class="headingClass">Stil</h4>
    <div :class="rowClass"><label :class="labelClass">Textfarbe</label><input :class="colorInputClass" type="color" v-model="widget.textColor"></div>
    <div :class="rowClass"><label :class="labelClass">Buttonfarbe</label><input :class="colorInputClass" type="color" v-model="widget.bgColor"></div>
    <div :class="rowClass"><label :class="labelClass">Deckkraft</label><input :class="inputClass" type="number" min="0" max="255" v-model.number="widget.bgOpacity"></div>
    <div :class="rowClass"><label :class="labelClass">Radius</label><input :class="inputClass" type="number" min="0" max="40" v-model.number="widget.radius"></div>

    <h4 :class="headingClass">Text</h4>
    <div :class="rowClass"><label :class="labelClass">Schriftgroesse</label>
      <select :class="inputClass" v-model.number="widget.fontSize">
        <option v-for="(size, idx) in fontSizes" :key="idx" :value="idx">{{ size }} px</option>
      </select>
    </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>

    <h4 :class="headingClass">Aktion</h4>
    <div :class="rowClass"><label :class="labelClass">Typ</label>
      <select :class="inputClass" v-model.number="widget.action">
        <option :value="BUTTON_ACTIONS.KNX">KNX</option>
        <option :value="BUTTON_ACTIONS.JUMP">Sprung</option>
        <option :value="BUTTON_ACTIONS.BACK">Zurueck</option>
      </select>
    </div>
    <div v-if="widget.action === BUTTON_ACTIONS.JUMP" :class="rowClass">
      <label :class="labelClass">Ziel</label>
      <select :class="inputClass" v-model.number="widget.targetScreen">
        <option v-for="s in store.config.screens" :key="s.id" :value="s.id">{{ s.name }}</option>
      </select>
    </div>
    <template v-if="widget.action === BUTTON_ACTIONS.KNX">
      <div :class="rowClass"><label :class="labelClass">Toggle</label><input class="accent-[var(--accent)]" type="checkbox" v-model="widget.isToggle"></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>
    </template>
  </div>
</template>

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

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

const store = useEditorStore();
const writeableAddresses = computed(() => store.knxAddresses.filter(a => a.write));
</script>
