<script setup>
import { ref, reactive } from "vue";
const emit = defineEmits(['stateValue']);
const permissionCategories = [
  {
    value: 0,
    label: "General",
  },
  {
    value: "1",
    label: "ProductServce",
  },
  {
    value: "2",
    label: "Product",
  },
];

const dummy = {
  tab: null,
  typeUser: "coba",
  roleMenu: [
    {
      permission: "0",
      menu: [
        {
          Module: "module1",
          create: "true",
          update: "false",
          delete: "false",
          show: "false",
        },
        {
          Module: "module2",
          create: "true",
          update: "true",
          delete: "false",
          show: "false",
        },
      ],
    },
    {
      permission: "1",
      menu: [
        {
          Module: "module1",
          create: "true",
          update: "false",
          delete: "true",
          show: "false",
        },
        {
          Module: "module2",
          create: "true",
          update: "true",
          delete: "false",
          show: "false",
        },
      ],
    },
  ],
};


const form = ref({});
// const form = ref({dummy})
// console.log(form)
const data = ref(null);
const ready = ref(false);
const onSubmit = () => {
  console.log(data.value.form$.data);
  emit('stateValue', false)
  // console.log(form.value);
  // console.log("masuk sini",form.value)
};
onBeforeMount(() => {
  Object.assign(form.value, dummy);
});
</script>

<template>
  <!-- <pre>{{ form }}</pre> -->
  <!-- <Vueform v-if="ready" ref="data" v-model="form" validate-on="change|step" method="post" :endpoint="onSubmit"> -->
  <Vueform
    ref="data"
    v-model="form"
    validate-on="change|step"
    method="post"
    :endpoint="onSubmit"
  >
    <template #empty>
      <FormSteps>
        <FormStep
          name="page0"
          label="Type User"
          :elements="['typeUser', 'roleType']"
        />
        <FormStep
          name="page1"
          label="Permission Categories"
          :elements="['text', 'tab', 'gridTable', 'roleMenu', 'permission']"
        />
      </FormSteps>

      <FormElements>
        <ListElement name="roleMenu" :default="form.roleMenu" class="mx-4" add-text="+ permission">
          <template #default="{ index }">
            <ObjectElement :name="index" class="px-3 py-3 border border-gray-200 rounded-xl">
              <SelectElement
                name="permission"
                :items="permissionCategories"
                :search="true"
                :native="false"
                label="Permission Category"
                input-type="search"
                autocomplete="off"
                :columns="{
                  container: 5,
                }"
              />
              <GridElement
                name="gridTable"
                class="border"
                style="background-color: #06ac8b; color: aliceblue;"
                :cols="5"
                :rows="1"
                :grid="[
                  [
                    ['Module', 1, 1, null, null],
                    ['Create', 1, 1, null, null],
                    ['Update', 1, 1, null, null],
                    ['Delete', 1, 1, null, null],
                    ['Show', 1, 1, null, null],
                  ],
                ]"
              />
              <ListElement
                name="menu"
                add-text="+ module"
                :sort="true"
                wrapper-class="flex flex-col items-center gap-4"
                add-class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full"
              >
                <template #default="{ index }">
                  <ObjectElement :name="index">
                    <GridElement
                      name="gridTable_1"
                      class="!mb-0"
                      :cols="5"
                      :rows="1"
                      :grid="[
                        [
                          [
                            {
                              // default:form.roleMenu[index]?.Module ?? 'asa',
                              name: 'Module',
                              type: 'text',
                              builder: {
                                type: 'text',
                                label: 'Text input',
                              },
                            },
                            1,
                            1,
                            null,
                            null,
                          ],
                          [
                            {
                              // default:form.roleMenu[index]?.create ?? false,
                              name: 'create',
                              type: 'checkbox',
                              builder: {
                                type: 'checkbox',
                                label: 'Checkbox',
                              },
                              text: 'Ya',
                              trueValue: 'true',
                              falseValue: 'false',
                            },
                            1,
                            1,
                            null,
                            null,
                          ],
                          [
                            {
                              // default:form.roleMenu[index]?.update?? false,
                              name: 'update',
                              type: 'checkbox',
                              builder: {
                                type: 'checkbox',
                                label: 'Checkbox',
                              },
                              text: 'Ya',
                              trueValue: 'true',
                              falseValue: 'false',
                            },
                            1,
                            1,
                            null,
                            null,
                          ],
                          [
                            {
                              // default:form.roleMenu[index]?.delete?? false,
                              name: 'delete',
                              type: 'checkbox',
                              builder: {
                                type: 'checkbox',
                                label: 'Checkbox',
                              },
                              text: 'Ya',
                              trueValue: 'true',
                              falseValue: 'false',
                            },
                            1,
                            1,
                            null,
                            null,
                          ],
                          [
                            {
                              // default:form.roleMenu[index]?.show?? false,
                              name: 'show',
                              type: 'checkbox',
                              builder: {
                                type: 'checkbox',
                                label: 'Checkbox',
                              },
                              text: 'Ya',
                              trueValue: 'true',
                              falseValue: 'false',
                            },
                            1,
                            1,
                            null,
                            null,
                          ],
                        ],
                      ]"
                      :presets="['grid-table']"
                    />
                  </ObjectElement>
                </template>
              </ListElement>
            </ObjectElement>
          </template>
        </ListElement>
        <TextElement
          :default="form.typeUser"
          name="typeUser"
          label="Role Name"
          :columns="{
            container: 6,
          }"
        />
        <TextElement
          :default="form.typeUser"
          name="roleType"
          label="Role Type"
          :columns="{
            container: 6,
          }"
        />
      </FormElements>

      <FormStepsControls />
    </template>
  </Vueform>
</template>
<style>
/* .vf-layout-inner-wrapper .vf-rowset .vt-row{
  padding: 0 !important;
  margin: 0 !important;
} */
</style>