<template>
  <section class="feature-grid feature-grid--tasks">
    <article class="feature-panel app-panel">
      <h3>Grouped config</h3>
      <div v-for="group in groups" :key="group.name" class="config-group">
        <h4>{{ group.name }}</h4>
        <div v-for="item in group.items" :key="item.key" class="config-row">
          <label :for="item.key">{{ item.key }}</label>
          <div v-if="item.sensitive && !item.editing" class="row-actions">
            <input :id="item.key" :aria-label="item.key" value="••••••••••••" type="text" readonly />
            <button type="button" @click="$emit('toggle-sensitive-edit', item.key)">Edit {{ item.key }}</button>
          </div>
          <input v-else :id="item.key" :aria-label="item.key" :value="item.value" type="text" @input="$emit('update-config', item.key, ($event.target as HTMLInputElement).value)" />
          <label v-if="item.directoryLike" :for="`${item.key}-suggestion`">Path suggestion for {{ item.key }}</label>
          <input v-if="item.directoryLike" :id="`${item.key}-suggestion`" :aria-label="`Path suggestion for ${item.key}`" :value="suggestionKeyword" type="text" placeholder="Type path prefix" @input="$emit('update:suggestion-keyword', ($event.target as HTMLInputElement).value)" />
          <div v-if="item.directoryLike && item.validationMessage" class="form-error">{{ item.validationMessage }}</div>
        </div>
      </div>
    </article>

    <article class="feature-panel app-panel">
      <h3>Path suggestions</h3>
      <div class="suggestion-list">
        <div v-for="item in suggestions" :key="item" class="row-card">{{ item }}</div>
      </div>
      <button type="button" @click="$emit('save')">Save config</button>
    </article>
  </section>
</template>

<script setup lang="ts">
import type { SystemConfigItem } from '../../types/config'

defineProps<{
  groups: Array<{ name: string; items: Array<SystemConfigItem & { directoryLike?: boolean }> }>
  suggestions: string[]
  suggestionKeyword: string
}>()

defineEmits<{
  'update:suggestion-keyword': [value: string]
  'update-config': [key: string, value: string]
  'toggle-sensitive-edit': [key: string]
  save: []
}>()
</script>
