<script setup>
import { ref, reactive } from "vue";
import permission from "@/components/Setting/ViewPermission/element/selectElement.vue";
import menuRoles from "@/components/apps/Setting/TipePengguna/element/table.vue";
import pages from "@/components/apps/Setting/TipePengguna/element/checkboxElement.vue";
import { useSettingStore } from "~/store/apps/Setting/setting";

import rolePages from "~/data/dummy/rolePage.ts";
import sidebarItem from "@/components/layout/full/vertical-sidebar/sidebarItem.ts";
// const store = useSettingStore();
const props = defineProps({
  typeForm: {
    type: String,
  },
});

const onSubmit = () => {
  console.log(data.value.form$.data);
  // emit('stateValue', {data:data.value.form$.data, state:false})
};


const data = ref(null);
const menu = ref(null);
const form = ref({});

const allMenu = () => {
    menu.value = sidebarItem.flatMap((item) => {
     return item.children
      .flatMap((subitem) => {
        const data = {
          header: item.header,
          title: subitem.title,
          path: subitem.to,
          permission: [],
        }
        if(subitem.children){
        const dataSubChildren = subitem.children.map((submenu) => ({
          header: item.header,
            title: submenu.title,
            path: submenu.to,
            permission: [],
        }))
        return [data, ...dataSubChildren];
      }
        return [data];
      })
      
  });
  // filter((menu) => !data.value?.pages.some((m) => m.path === menu.path))
  // menu.value.push(...data.value.pages);
  // console.log("menu:", menu.value);
}

onBeforeMount(async () => {
  if (props.typeForm === "edit"){
    data.value = rolePages.find((item) => item.id_user === 1);
    Object.assign(form.value, data.value);

  // console.log("data.value:", data.value);
  // console.log("all menu:", sidebarItem);

  allMenu()
}else{
  allMenu()
}
});
</script>

<template>
  <!-- <pre>{{ rolePages  }}</pre> -->
  <pre>{{ data }}</pre>
   <!-- <pre>{{ form }}</pre> -->
  <Vueform
    ref="data"
    v-model="form"
    validate-on="change|step"
    method="post"
    :endpoint="onSubmit"
  >
    <template #empty>
      <FormSteps>
        <FormStep
          name="page0"
          label="Type User"
          :elements="['username', 'role']"
        />
        <FormStep
          name="page1"
          label="Permission Categories"
          :elements="['text', 'tab', 'gridTable', 'roleMenu', 'permission','pages']"
        />
      </FormSteps>
      <FormElements>
        <TextElement
          :default="form.username"
          name="username"
          label="user name"
          :columns="{
            container: 6,
          }"
        />
        <TextElement
          :default="form.role"
          name="role"
          label="Role Type"
          :columns="{
            container: 6,
          }"
        />


         <!-- <div class="vf-element-layout vf-col-12  border border-gray-200 rounded-xl">
          <ListElement name="pages" :default="form.pages" class="mx-4" >
            <template #default="{ index }">
                <ObjectElement :name="index" class="px-3"> -->
                  <!-- <menuRoles name="gridTable" :items="props.typeForm === 'edit' ? form.pages : [{title: ''}] " :typeForm = "'edit'" :menus="menu"/> -->
                  <!-- <pages name="gridTable" :items="props.typeForm === 'edit' ? form.pages : [{title: ''}] " :typeForm = "'edit'" :menus="menu"/> -->
          <!-- </ObjectElement>
          </template>
        </ListElement>
          </div> -->
          <menuRoles name="gridTable" :items="props.typeForm === 'edit' ? form.pages : [{title: '',permission:[]}] " :typeForm = "'edit'" :menus="menu"/>
      </FormElements>

      <FormStepsControls />
    </template>
  </Vueform>
</template>
