<script setup lang="ts">
import typeUser from "@/data/dummy/keuangan.type_user.json";
import role_menu from "@/data/dummy/keuangan.role_menu.json";
import menu from "@/data/dummy/keuangan.menu.json";

import {useRoleMode} from "@/stores/api/roleMenu";
import {useMenu} from "@/stores/api/menu";
import {useTypeUser} from "@/stores/api/typeUser";

const {getMenu} = useMenu();
const {getTypeUser} = useTypeUser();

const {roleMenuById} = storeToRefs(useRoleMode());
const {listMenu} = storeToRefs(useMenu());
const {listTypeUser} = storeToRefs(useTypeUser());
const data = ref<any>([]);
const menuItem = ref<any>([]);
const type_user = ref<any>([]);

const dataDetail = ref(null)

const dataMenu = async () => {
  await getMenu();
  await getTypeUser();
  // if(){}
  console.log('iswufgh',roleMenuById.value.data)
  if(roleMenuById.value.data !=null && roleMenuById.value.data != ""){
    return roleMenuById.value.data.map((role_menu: any) => {
      menuItem.value = listMenu.value.find(
          (menu: any) => menu._id == role_menu.menu_id
      );
      type_user.value = listTypeUser.value.find(
          (type_user: any) => type_user._id == role_menu.type_user_id
      );
      return {
        _id: role_menu._id,
        menu: menuItem?.value.display || "-",
        type_user: type_user?.value.display || "-",
        accessAdd: role_menu.access?.[0]?.add || 0,
        accessUpdate: role_menu.access?.[1]?.update || 0,
        accessRead: role_menu.access?.[2]?.read || 0,
        accessDelete: role_menu.access?.[3]?.delete || 0,
      };
    });
  }else{
    checkMenu()
  }
};

const checkMenu = () => {
  // https://stackoverflow.com/questions/33577868/filter-array-not-in-another-array
  var arr = listMenu.value.filter((i: any) => !roleMenuById.value.data.map((r: any) => r.menu_id).includes(i._id))
  if (arr.length != 0) {
    data.value.push(...arr.map((i: any, index: bigint) => ({
      _id: `${index + 1}`,
      menu: i.display,
      accessAdd: 0,
      accessUpdate: 0,
      accessRead: 0,
      accessDelete: 0
    })))
  }
}

const onSubmit = async () => {
  // console.log("ini disimpan:",data.value?.data.typeUser);
  console.log("ini disimpan:", dataDetail.value?.form$.data);
  // await getTypeUser(data.value?.form$.data)
};
onMounted(async () => {
  //   console.log(roleMenuById.value.data);
  data.value = await dataMenu();
  console.log(checkMenu())
  console.log('aaaaa', data.value);
});


// Helper function to create checkbox config
const createCheckbox = (namePrefix: string, menu: any,index:bigint) => ({
  name: `${namePrefix}_${menu._id}`,
  type: 'checkbox',
  text: 'Ya',
  default: namePrefix=='accessAdd'?menu.accessAdd:0,
  'true-value':"1",
  'false-value':"0",
  builder: {
    type: 'checkbox',
    label: 'Checkbox'
  }
})

// Helper function to create a menu row
const createMenuRow = (menu: any, index: bigint) => [
  [index + 1, 1, 1],
  [menu.menu, 1, 1],
  [createCheckbox('accessAdd', menu,index), 1, 1],
  [createCheckbox('accessUpdate', menu,index), 1, 1],
  [createCheckbox('accessRead', menu,index), 1, 1],
  [createCheckbox('accessDelete', menu,index), 1, 1]
]
</script>

<template>
  <div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
    <Vueform ref="dataDetail" validate-on="change|step" method="post" :endpoint="onSubmit">
      <GridElement
          name="gridTable"
          :widths="['80px', '','90px','90px','90px','90px']"
          :presets="['grid']"
          :cols="6"
          :rows="1+data.length"
          :grid="[
        [
          ['No', 1, 1, null, null],
          ['Nama Menu', 1, 1, null, null],
          ['Tambah', 1, 1, null, null],
          ['Ubah', 1, 1, null, null],
          ['Baca', 1, 1, null, null],
          ['Hapus', 1, 1, null, null],
        ],
        ...data.map((menu:any) => createMenuRow(menu))
      ]"
      />
      <ButtonElement
          name="primaryButton"
          button-label="Simpan"
          :submits="true"
          align="right"
      />
    </Vueform>
  </div>
</template>
