<template>
  <NodeViewWrapper :class="ui.root()">
    <div :class="ui.base()">
      <UPopover
        :content="{ align: 'center', side: 'top', sideOffset: 8 }"
        :ui="{ content: 'p-1' }"
        mode="hover"
      >
        <NodeViewContent :class="ui.content()" />

        <template #content>
          <div :class="ui.actions()">
            <USelect
              variant="ghost"
              color="neutral"
              size="sm"
              :items="layoutItems"
              :model-value="attrs.layout"
              @update:model-value="updateAttributes({ ...attrs, layout: $event })"
            />
            <UButton
              color="neutral"
              size="sm"
              variant="ghost"
              :icon="appConfig.ui.icons.plus"
              @click="handleInsertImage"
            />
          </div>
        </template>
      </UPopover>
    </div>
  </NodeViewWrapper>
</template>

<script setup>
import { useAppConfig } from "#imports";
import { NodeViewContent, NodeViewWrapper } from "@tiptap/vue-3";
import { computed } from "vue";
import { tv } from "../../tv";
const props = defineProps({
  decorations: { type: Array, required: true },
  selected: { type: Boolean, required: true },
  updateAttributes: { type: Function, required: true },
  deleteNode: { type: Function, required: true },
  node: { type: null, required: true },
  view: { type: null, required: true },
  getPos: { type: null, required: true },
  innerDecorations: { type: null, required: true },
  editor: { type: Object, required: true },
  extension: { type: Object, required: true },
  HTMLAttributes: { type: Object, required: true }
});
const appConfig = useAppConfig();
const attrs = computed({
  get: () => props.node.attrs,
  set: (value) => props.updateAttributes(value)
});
const theme = {
  slots: {
    root: "",
    base: "ring-1 ring-accented rounded-md",
    content: "grid gap-x-4 gap-y-2 p-4",
    actions: "flex items-center gap-0.5"
  },
  variants: {
    layout: {
      "two-columns": {
        content: "grid-cols-2"
      },
      "three-columns": {
        content: "grid-cols-3"
      }
    }
  }
};
const layoutItems = [
  { value: "two-columns", label: "2 \u043A\u043E\u043B\u043E\u043D\u043A\u0438" },
  { value: "three-columns", label: "3 \u043A\u043E\u043B\u043E\u043D\u043A\u0438" }
];
function handleInsertImage() {
  const pos = props.getPos();
  if (typeof pos !== "number") {
    return;
  }
  const insertPos = pos + 1 + props.node.content.size;
  props.editor.commands.insertContentAt(insertPos, {
    type: "uplora-image"
  });
}
const ui = computed(() => tv({ extend: tv(theme) })({
  layout: attrs.value.layout
}));
</script>
