<script setup lang="ts">
defineProps<{
  columns: string[]
  hiddenColumns: Set<string>
}>()

const emit = defineEmits<{
  toggleColumn: [column: string]
}>()
</script>

<template>
  <div v-if="columns.length > 0" class="query-columns-bar">
    <span class="columns-label">Columns:</span>
    <div class="query-columns-list">
      <span
        v-for="col in columns"
        :key="col"
        class="query-col-toggle"
        :class="{ hidden: hiddenColumns.has(col) }"
        @click="emit('toggleColumn', col)"
        :title="hiddenColumns.has(col) ? 'Click to show' : 'Click to hide'"
      >
        <svg v-if="!hiddenColumns.has(col)" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
          <circle cx="12" cy="12" r="3"/>
        </svg>
        <svg v-else xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
          <line x1="1" y1="1" x2="23" y2="23"/>
        </svg>
        {{ col }}
      </span>
    </div>
  </div>
</template>

<style scoped>
.query-columns-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
}

.columns-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.query-columns-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.query-col-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: var(--bg-tertiary);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.query-col-toggle:hover {
  background: var(--bg-hover);
}

.query-col-toggle.hidden {
  opacity: 0.5;
  text-decoration: line-through;
}
</style>
