<template>
  <input
    type="checkbox"
    class="css-checkbox"
    :id="'toggle-'+props.header"
    v-model="show"
    />
  <label :for="'toggle-'+props.header" class="css-label">
      <span class="fa fa-plus">+</span>
      <span class="fa fa-minus">-</span>
  </label>
  <label :for="'checkbox-'+props.header">{{props.header}}</label>
  <input type="checkbox" :id="'checkbox-'+props.header" v-model="checked" />

  <br>
  <div
    class="checkbox_parent"
    :style="'grid-template-rows: repeat('+Math.ceil(props.columns.length/2+2)+', 1fr);'"
    v-if="show"
    >
    <div
      v-for="(item, index) in props.columns"
      class="checkbox_child"
      >
      <ColumnCheckbox :colname="item"
        />
    </div>
  </div>
</template>

<script lang="ts" setup>
import ColumnCheckbox from './ColumnCheckbox.vue';

const props = defineProps<{
  header: string
  columns: ColumnName[]
  default?: boolean
}>()
const {columns} = useStoreRef()
const checked = ref(props.default)
const show = ref(true)
watch(show,()=>{
})

watch(checked,()=>{
  if(checked.value === true) {
    props.columns.forEach(x=>columns.value.add(x))
    return
  }
  if(checked.value === false) {
    props.columns.forEach(x=>columns.value.delete(x))
    return
  }
})

</script>

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






















<style>
.checkbox_parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.checkbox_child {
  align-content: left;
  justify-self: left;
}

.css-label {
  cursor: pointer;
}
.css-checkbox {
  display: none;
}
.fa {
  color: white;
  border-radius: 4px;
  padding-top: 0px;
  padding-right: 4px;
  padding-left: 4px;
  padding-bottom: 0px;
}
.fa-plus {
  background-color: #E85764;
}
.fa-minus {
  background-color: #3AC5C9;
  display: none;
}
.css-checkbox:checked + .css-label .fa-minus {
  display: inline;
}
.css-checkbox:checked + .css-label .fa-plus {
  display: none;
}
</style>