<script setup>
import NavNodeEditorSelf from "./NavNodeEditor.vue";
import Button from "primevue/button";
import Checkbox from "primevue/checkbox";
import Dropdown from "primevue/dropdown";
import InputText from "primevue/inputtext";

import { computed } from "vue";

const props = defineProps({
  node: { type: Object, required: true },
  modules: { type: Array, default: () => [] },
  permissions: { type: Array, default: () => [] },
  depth: { type: Number, default: 0 },
});

const emit = defineEmits(["remove"]);

const moduleOptions = computed(() => [
  { label: "(none)", value: null },
  ...props.modules.map((m) => ({
    label: `${m.label} (${m.slug})`,
    value: m.slug,
  })),
]);

const permissionOptions = computed(() => [
  { label: "(none)", value: null },
  ...props.permissions.map((p) => ({ label: p, value: p })),
]);

const moduleSlugModel = computed({
  get() {
    return props.node.module_slug ?? null;
  },
  set(v) {
    props.node.module_slug = v;
  },
});

const permissionModel = computed({
  get() {
    return props.node.permission ?? null;
  },
  set(v) {
    props.node.permission = v;
  },
});

function ensureChildren() {
  if (!Array.isArray(props.node.children)) {
    props.node.children = [];
  }
}

function addChild() {
  ensureChildren();
  props.node.children.push({
    key: `nav-${Date.now()}`,
    label: "New item",
    route: "",
    icon: "",
    permission: null,
    description: "",
    module_slug: null,
    is_header: false,
    pinned_bottom: false,
    children: [],
  });
}

function removeChild(index) {
  ensureChildren();
  props.node.children.splice(index, 1);
}

function removeSelf() {
  emit("remove");
}

const isRoot = computed(() => props.node.key === "root");
</script>

<template>
  <div
    class="border border-surface-200 dark:border-surface-700 rounded-lg p-4 mb-3 bg-surface-0 dark:bg-surface-950"
    :style="{ marginLeft: depth ? `${Math.min(depth * 16, 120)}px` : '0' }"
  >
    <div class="flex flex-wrap items-start justify-between gap-3 mb-3">
      <div class="font-semibold text-surface-900 dark:text-surface-0">
        {{ isRoot ? "Root" : "Item" }}
        <span class="text-surface-500 font-normal text-sm ml-2">{{
          node.key
        }}</span>
      </div>
      <Button
        v-if="!isRoot"
        icon="pi pi-trash"
        severity="danger"
        text
        rounded
        aria-label="Remove node"
        type="button"
        @click="removeSelf"
      />
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
      <label class="flex flex-col gap-1 text-sm">
        <span class="text-surface-600 dark:text-surface-400">Key</span>
        <InputText v-model="node.key" :disabled="isRoot" class="w-full" />
      </label>
      <label class="flex flex-col gap-1 text-sm">
        <span class="text-surface-600 dark:text-surface-400">Label</span>
        <InputText v-model="node.label" class="w-full" />
      </label>
      <label class="flex flex-col gap-1 text-sm md:col-span-2">
        <span class="text-surface-600 dark:text-surface-400">Route path</span>
        <InputText
          v-model="node.route"
          placeholder="/dashboard"
          class="w-full"
        />
      </label>
      <label class="flex flex-col gap-1 text-sm md:col-span-2">
        <span class="text-surface-600 dark:text-surface-400">Icon class</span>
        <InputText
          v-model="node.icon"
          placeholder="pi pi-fw pi-home"
          class="w-full"
        />
      </label>
      <label class="flex flex-col gap-1 text-sm md:col-span-2">
        <span class="text-surface-600 dark:text-surface-400">Description</span>
        <InputText v-model="node.description" class="w-full" />
      </label>
      <label class="flex flex-col gap-1 text-sm">
        <span class="text-surface-600 dark:text-surface-400">Module</span>
        <Dropdown
          v-model="moduleSlugModel"
          :options="moduleOptions"
          option-label="label"
          option-value="value"
          placeholder="Optional"
          class="w-full"
          show-clear
        />
      </label>
      <label class="flex flex-col gap-1 text-sm">
        <span class="text-surface-600 dark:text-surface-400">Permission</span>
        <Dropdown
          v-model="permissionModel"
          :options="permissionOptions"
          option-label="label"
          option-value="value"
          placeholder="Optional"
          class="w-full"
          filter
          show-clear
        />
      </label>
      <div class="flex flex-wrap gap-4 items-center md:col-span-2">
        <label class="flex items-center gap-2 text-sm">
          <Checkbox v-model="node.is_header" binary />
          Section header
        </label>
        <label class="flex items-center gap-2 text-sm">
          <Checkbox v-model="node.pinned_bottom" binary />
          Pin to bottom
        </label>
      </div>
    </div>
    <div class="mt-4 border-t border-surface-200 dark:border-surface-700 pt-4">
      <p class="text-sm font-medium mb-2 text-surface-700 dark:text-surface-300">
        Children
      </p>
      <NavNodeEditorSelf
        v-for="(child, idx) in node.children || []"
        :key="child.key || idx"
        :node="child"
        :modules="modules"
        :permissions="permissions"
        :depth="depth + 1"
        @remove="removeChild(idx)"
      />
      <Button
        label="Add child"
        icon="pi pi-plus"
        severity="secondary"
        outlined
        class="mt-2"
        type="button"
        @click="addChild"
      />
    </div>
  </div>
</template>
