<script setup>
// Quellenauswahl (Typ-Buttons + Link-Feld/Ordnerwahl), geteilt zwischen dem Anlegen-Panel
// und dem Bearbeiten-Panel der Sidebar. v-model trägt { type, ort }.
const props = defineProps({
  modelValue: { type: Object, required: true },   // { type, ort }
  folders: { type: Object, default: () => ({}) }, // { projekt: [...], uni: [...] }
})
const emit = defineEmits(['update:modelValue', 'submit'])

const TYPES = [
  { key: 'thema', label: 'Thema' },
  { key: 'link', label: 'Link' },
  { key: 'projekt', label: 'Projekt' },
  { key: 'uni', label: 'Uni' },
]

function setType(key) {
  emit('update:modelValue', { type: key, ort: '' })  // Typwechsel verwirft den alten Ort
}
function setOrt(ort) {
  emit('update:modelValue', { ...props.modelValue, ort })
}
</script>

<template>
  <div class="dlg-sources">
    <button v-for="t in TYPES" :key="t.key" :class="{ active: modelValue.type === t.key }"
            @click="setType(t.key)">{{ t.label }}</button>
  </div>
  <input
    v-if="modelValue.type === 'link'"
    class="dlg-input" :value="modelValue.ort"
    placeholder="https://…"
    @input="setOrt($event.target.value)"
    @keyup.enter="emit('submit')"
  />
  <select
    v-else-if="modelValue.type === 'projekt' || modelValue.type === 'uni'"
    class="dlg-input" :value="modelValue.ort"
    @change="setOrt($event.target.value)"
  >
    <option value="" disabled>Ordner wählen…</option>
    <option v-for="fo in (folders[modelValue.type] || [])" :key="fo.location" :value="fo.location">{{ fo.name }}</option>
  </select>
</template>

<style scoped>
.dlg-sources { display: flex; gap: 0.3rem; }
.dlg-sources button {
  flex: 1;
  padding: 0.35rem 0.2rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
}
.dlg-sources button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dlg-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}
.dlg-input:focus { outline: none; border-color: var(--accent); }
select.dlg-input { cursor: pointer; }
</style>
