<script lang="ts" setup>
  import { Icon } from '/@/components/Icon';
  import { NodeProps, Position } from '@vue-flow/core';
  import { NodeToolbar } from '@vue-flow/node-toolbar';
  import { computed, toRaw, unref } from 'vue';
  import { useFlowContext } from '../../../hook/useFlowContext';
  import type { NodeData } from '../../../types/node';
  import { ElementsTypeEnum } from '../../../enum';

  const props = defineProps<NodeProps>();

  const getData = computed(() => props.data as NodeData);

  const { updateNodeDrawerActionType, flowActionType } = useFlowContext();

  const handleOpenEdit = async () => {
    const { flag, data } =
      (await unref(updateNodeDrawerActionType)?.open(toRaw(unref(getData)), void 0, {
        id: props.id,
        type: ElementsTypeEnum.NODE,
      })) || {};

    if (!flag) return;

    const currentNode = flowActionType?.findNode(props.id);

    (currentNode!.data as NodeData).data = data;
  };

  const handleDelete = () => {
    flowActionType?.removeNodes(props.id);
  };
</script>

<template>
  <NodeToolbar :is-visible="data.toolbarVisible" :position="Position.Top" align="end" :offset="2">
    <section class="flex gap-1 transform translate-y-1">
      <div
        class="border-2 rounded-1 border-light-50 bg-red-500 w-7 h-7 flex justify-center items-center cursor-pointer"
        @click="handleOpenEdit"
      >
        <Icon icon="mdi:lead-pencil" color="#fff" />
      </div>
      <div
        class="border-2 rounded-1 border-light-50 bg-red-500 w-7 h-7 flex justify-center items-center cursor-pointer"
        @click="handleDelete"
      >
        <Icon icon="mdi:close" color="#fff" />
      </div>
    </section>
  </NodeToolbar>
</template>