<script lang="ts" setup>

import {computed, ref, watchEffect} from "vue";

const props = defineProps<{
  hidden: string[];
  all: string[];
  raw: string[][],
  structure: { [key: string]: number; };
}>()
const emit = defineEmits(['update:hidden'])

const isModeSelectMenusToHide = ref<boolean>(true)
const isModeSelectMenusToShow = computed<boolean>(() => !isModeSelectMenusToHide.value)

const checkboxes = ref(props.hidden)
const checkboxesInverted = computed(() => {
  return props.all.filter(menu => !checkboxes.value.includes(menu))
})

const indeterminate = computed(() => props.hidden.length > 0 && props.hidden.length < props.all.length)

const handleSelectAll = (event: Event) => {
  const isSelected = (<HTMLInputElement>event.target).checked

  const wantsAllHidden = isModeSelectMenusToHide.value && isSelected || isModeSelectMenusToShow.value && !isSelected

  emit('update:hidden', wantsAllHidden ? props.raw.map((p) => p[props.structure.slug]) : [])

  checkboxes.value = wantsAllHidden ? props.all : []
}

// Comportamento normal para v-model como computed
// const customCheckboxes = computed({
//   get() {
//     return checkboxes.value
//   },
//   set(newValue) {
//     checkboxes.value = newValue
//   }
// })

// Checkboxes invertidas
// const customCheckboxes = computed({
//   get() {
//     return checkboxesInverted.value
//   },
//   set(newValue) {
//     const restoredInvertedCheckboxes = props.all.filter(menu => !newValue.includes(menu))
//     checkboxes.value = restoredInvertedCheckboxes
//   }
// })

const customCheckboxes = computed({
  get() {
    // console.log( isModeSelectMenusToHide.value, checkboxes.value, checkboxesInverted.value, props.hidden)
    return isModeSelectMenusToHide.value ? checkboxes.value : checkboxesInverted.value
  },
  set(newValue) {
    const restoredInvertedCheckboxes = props.all.filter(menu => !newValue.includes(menu))
    checkboxes.value = isModeSelectMenusToHide.value ? newValue : restoredInvertedCheckboxes
  }
})

watchEffect(() => emit('update:hidden', checkboxes.value))
</script>

<template>
  <div>
    <div class="flex flex-col">

      <!-- Button Group: Selection Mode -->
      <div class="inline-flex rounded-md shadow-sm mb-4" role="group">
        <button
          :class="[
            isModeSelectMenusToHide ? 'bg-blue-800 text-white' : 'bg-gray-300 text-gray-500 hover:bg-gray-100 hover:text-blue-700 hover:border-gray-300'
          ]"
          class="py-2 px-4 text-sm font-medium rounded-l-lg border border-gray-200"
          type="button"
          @click="isModeSelectMenusToHide = true"
        >
          <span>By Items To Hide</span>
        </button>
        <button
          :class="[
            isModeSelectMenusToShow ? 'bg-blue-800 text-white' : 'bg-gray-300 text-gray-500 hover:bg-gray-100 hover:text-blue-700 hover:border-gray-300'
          ]"
          class="py-2 px-4 text-sm font-medium rounded-r-lg border border-l-0 border-gray-200"
          type="button"
          @click="isModeSelectMenusToHide = false"
        >
          <span>By Items To Show</span>
        </button>
      </div>

      <!-- Menu Table -->
      <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
          <div class="relative overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
            <table class="min-w-full table-fixed divide-y divide-gray-300">
              <thead class="bg-gray-50">
              <tr>
                <th class="relative w-12 px-6 sm:w-16 sm:px-8" scope="col">
                  <input
                    :checked="indeterminate || (isModeSelectMenusToHide ? hidden.length === raw.length : hidden.length === 0)"
                    :indeterminate="indeterminate"
                    class="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 sm:left-6"
                    style="margin-top: -0.5rem; height: 1rem; width: 1rem;"
                    type="checkbox"
                    @change="handleSelectAll"/>
                </th>
                <th class="min-w-[12rem] py-3.5 pr-3 text-left text-sm font-semibold text-gray-900" scope="col">
                  <span>{{ isModeSelectMenusToHide ? "What do you want to hide?" : "What do you want to show?" }}</span>
                </th>
              </tr>
              </thead>
              <tbody class="divide-y divide-gray-200 bg-white">
              <tr
                v-for="(menuItem, index) in raw"
                v-show="!(
                  menuItem[structure.classes].includes('wp-menu-separator') ||
                  menuItem[structure.slug].includes('mwgdo')
                )"
                :key="index"
                :class="[hidden.includes(menuItem[structure.slug]) && 'bg-gray-50']"
              >
                <td class="relative w-12 px-6 sm:w-16 sm:px-8">
                  <!-- Marcação de linha selecionada -->
                  <div
                    v-if="(isModeSelectMenusToHide && hidden.includes(menuItem[structure.slug])) || (!isModeSelectMenusToHide && !hidden.includes(menuItem[structure.slug]))"
                    class="absolute inset-y-0 left-0 w-0.5 bg-indigo-600"
                  ></div>
                  <!-- Checkbox -->
                  <input
                    v-model="customCheckboxes"
                    :value="menuItem[structure.slug]"
                    class="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 sm:left-6"
                    style="margin-top: -0.5rem; height: 1rem; width: 1rem;"
                    type="checkbox"
                  />
                </td>
                <td
                  :class="[
                    'whitespace-nowrap py-4 pr-3 text-sm font-medium',
                    !(
                      menuItem[structure.classes].includes('wp-menu-separator') ||
                      menuItem[structure.slug].includes('mwgdo')
                    ) ? 'text-indigo-600' : 'text-gray-900'
                  ]">

                  <span :class="{
                    'text-gray-500': hidden.includes(menuItem[structure.slug])
                  }">
                    {{ menuItem[structure.menuTitle] }}
                  </span>
                  <span class="text-gray-400 text-xs ml-1">
                    {{ hidden.includes(menuItem[structure.slug]) ? '(is hidden)' : '' }}
                  </span>

                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
