<template>
    <input type="checkbox" id={{props.colname}} v-model="checked" />
    <label for={{props.colname}}>{{(props.label ? props.label : Columns[props.colname].displayName)}}</label>
</template>
<script lang="ts" setup>

const props = defineProps(["colname","label"])
const {columns} = useStoreRef()
const checked = ref(columns.value.has(props.colname))
watch(columns.value.dirty,()=>{
  console.log("changed")
  if(columns.value.has(props.colname)) {
    checked.value = true
  }else{
    checked.value = false
  }
},{deep:true})

watch(checked, ()=>{
  if(checked.value === true) {
    columns.value.add(props.colname)
    return
  }
  if(checked.value === false) {
    columns.value.delete(props.colname)
    return
  }
})
</script>

<script lang="ts">
import { defineProps,  ref, watch } from 'vue';
import { useStoreRef } from '../state/state';
import { ColumnName, Columns } from '../lib/columns';
</script>
