<template>
  <section class="settings-section">
    <button class="settings-section-toggle" type="button" :aria-expanded="!collapsed" @click="$emit('toggle')">
      <span><component :is="icon" :size="18" /></span>
      <div>
        <h3>{{ section.section }}</h3>
        <p>{{ description }}</p>
      </div>
      <span class="panel-toggle" :title="collapsed ? 'Expand section' : 'Collapse section'">
        <component :is="collapsed ? ChevronDown : ChevronUp" :size="14" />
      </span>
    </button>
    <div v-if="!collapsed" class="settings-section-body">
      <div v-for="{ row, key } in section.rows" :key="key" class="setting-row">
        <div class="setting-copy">
          <span>{{ labelFor(key) }}</span>
          <small>{{ descriptionFor(key) }}</small>
          <code>{{ key }}</code>
        </div>
        <div class="setting-control">
          <button
            v-if="isBooleanSetting(row.value)"
            type="button"
            :class="['switch-control', { active: normalizedBooleanSetting(row.value) }]"
            :aria-pressed="normalizedBooleanSetting(row.value)"
            @click="$emit('toggle-boolean', row)"
          >
            <i></i>
            <strong>{{ normalizedBooleanSetting(row.value) ? 'Enabled' : 'Disabled' }}</strong>
          </button>
          <textarea v-else-if="key === 'trusted_origins'" v-model="row.value" class="settings-input settings-textarea" :placeholder="placeholderFor(key)"></textarea>
          <input v-else v-model="row.value" :type="isSecretSetting(key) ? 'password' : 'text'" class="settings-input" :placeholder="placeholderFor(key)" />
        </div>
        <span :class="['setting-source', row.source]">{{ sourceLabel(row.source) }}</span>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ChevronDown, ChevronUp } from '@lucide/vue';

defineProps({
  section: { type: Object, required: true },
  icon: { type: [Object, Function], required: true },
  description: { type: String, required: true },
  collapsed: Boolean,
  labelFor: { type: Function, required: true },
  descriptionFor: { type: Function, required: true },
  placeholderFor: { type: Function, required: true },
  isSecretSetting: { type: Function, default: () => false },
  sourceLabel: { type: Function, required: true },
  isBooleanSetting: { type: Function, required: true },
  normalizedBooleanSetting: { type: Function, required: true }
});

defineEmits(['toggle', 'toggle-boolean']);
</script>
