<template>
  <div class="flex items-center gap-2">
    <Select v-model="selectedColumn" @update:model-value="handleColumnToggle">
      <SelectTrigger class="w-[180px]">
        <SelectValue placeholder="Toggle columns">
          <div class="flex items-center gap-2">
            <Columns class="h-4 w-4" />
            <span>Columns</span>
          </div>
        </SelectValue>
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="toggle">Toggle Columns</SelectItem>
        <SelectGroup>
          <SelectLabel>Basic Columns</SelectLabel>
          <SelectItem value="thumbnail" @click="toggleColumn('thumbnail')">
            <div class="flex items-center gap-2">
              <input 
                type="checkbox" 
                :checked="isColumnVisible('thumbnail')" 
                @change="handleCheckboxChange('thumbnail', $event)"
                class="rounded border-gray-300"
              />
              <span>Thumbnail</span>
            </div>
          </SelectItem>
          <SelectItem value="name" @click="toggleColumn('name')">
            <div class="flex items-center gap-2">
              <input 
                type="checkbox" 
                :checked="isColumnVisible('name')" 
                @change="handleCheckboxChange('name', $event)"
                class="rounded border-gray-300"
              />
              <span>Shot Name</span>
            </div>
          </SelectItem>
          <SelectItem value="episode" @click="toggleColumn('episode')">
            <div class="flex items-center gap-2">
              <input 
                type="checkbox" 
                :checked="isColumnVisible('episode')" 
                @change="handleCheckboxChange('episode', $event)"
                class="rounded border-gray-300"
              />
              <span>Episode</span>
            </div>
          </SelectItem>
          <SelectItem value="status" @click="toggleColumn('status')">
            <div class="flex items-center gap-2">
              <input 
                type="checkbox" 
                :checked="isColumnVisible('status')" 
                @change="handleCheckboxChange('status', $event)"
                class="rounded border-gray-300"
              />
              <span>Status</span>
            </div>
          </SelectItem>
        </SelectGroup>
        <SelectGroup>
          <SelectLabel>Task Status Columns</SelectLabel>
          <SelectItem 
            v-for="taskType in allTaskTypes"
            :key="taskType"
            :value="taskType" 
            @click="toggleColumn(taskType)"
          >
            <div class="flex items-center gap-2">
              <input 
                type="checkbox" 
                :checked="isColumnVisible(taskType)" 
                @change="handleCheckboxChange(taskType, $event)"
                class="rounded border-gray-300"
              />
              <span>{{ formatTaskType(taskType) }}</span>
            </div>
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { Columns } from 'lucide-vue-next'
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import type { VisibilityState } from '@tanstack/vue-table'
import { useColumnVisibilityStore } from '@/stores/columnVisibility'

interface Props {
  allTaskTypes: string[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:columnVisibility': [visibility: VisibilityState]
}>()

// Use global store
const columnVisibilityStore = useColumnVisibilityStore()

// Local reactive state for checkbox visibility
const localVisibility = ref<Record<string, boolean>>({})

// Watch for store changes and update local state
watch(
  () => columnVisibilityStore.columnVisibility,
  (newVal) => {
    localVisibility.value = { ...newVal }
  },
  { immediate: true, deep: true }
)

// Initialize store on mount
onMounted(() => {
  columnVisibilityStore.initialize()
})

const selectedColumn = ref('toggle')

const handleColumnToggle = (value: string) => {
  // Reset selection after interaction
  selectedColumn.value = 'toggle'
}

const isColumnVisible = (columnId: string): boolean => {
  // If not in visibility state, column is visible by default
  return localVisibility.value[columnId] !== false
}

const handleCheckboxChange = (column: string, event: Event) => {
  const target = event.target as HTMLInputElement
  updateColumn(column, target.checked)
}

const toggleColumn = (column: string) => {
  updateColumn(column, !isColumnVisible(column))
}

const updateColumn = (column: string, checked: boolean) => {
  // Always use global store
  columnVisibilityStore.updateColumn(column, checked)
}

const formatTaskType = (taskType: string) => {
  return taskType.charAt(0).toUpperCase() + taskType.slice(1)
}
</script>
