<template>
    <div class="dnd-flow" @drop="onDrop" :nodes="nodes" @dragover="onDragOver" @dragleave="onDragLeave">
        <VueFlow>
            <div class="dropzone-background" :style="{
        backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
        transition: 'background-color 0.2s ease',
    }">

                <Background :size="2" :gap="20" pattern-color="#BDBDBD">
                    <div class="overlay">
                        <slot></slot>
                    </div>
                </Background>
                <!-- <template #node-apinode="{aprops}">
                    <ApiNode :data="aprops.data"></ApiNode>
                </template> -->
                <!-- <template #node-whilenode="props">
                    <WhileNode :data="props.data"></WhileNode>
                </template> -->
                <Controls />
                <p v-if="isDragOver">移动到此处</p>
            </div>
        </VueFlow>
        <aside>
            <Tabs>
                <TabPane label="节点" icon="logo-apple">
                    <div class="nodes">
                        <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, 'input')">
                            输入</div>
                        <div class="vue-flow__node-default" :draggable="true"
                            @dragstart="onDragStart($event, 'apinode')">接口
                        </div>
                        <div class="vue-flow__node-default" :draggable="true"
                            @dragstart="onDragStart($event, 'default')">数据库
                        </div>
                        <div class="vue-flow__node-default" :draggable="true"
                            @dragstart="onDragStart($event, 'default')">for each
                        </div>
                        <div class="vue-flow__node-output" :draggable="true" @dragstart="onDragStart($event, 'whilenode')">
                            循环
                        </div>
                    </div>
                </TabPane>
                <TabPane label="块" icon="logo-windows">标签二的内容</TabPane>
                <TabPane label="线" icon="logo-tux">标签三的内容</TabPane>
                <TabPane label="导出" icon="logo-tux">标签三的内容</TabPane>
            </Tabs>


        </aside>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import {ApiNode } from './myNodeTypes/ApiNode.vue'
import {WhileNode } from './myNodeTypes/WhileNode.vue'

import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'

// import SpecialNode from './components/SpecialNode.vue'
// import SpecialEdge from './components/SpecialEdge.vue'

const { onConnect, addEdges, addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow()
const nodes = ref([])
onConnect(addEdges)

let id = 0

function getId() {
    return `测试节点${id++}`
}

const state = {
    draggedType: ref(null),
    isDragOver: ref(false),
    isDragging: ref(false)
}

const { draggedType, isDragOver, isDragging } = state

watch(isDragging, (dragging) => {
    document.body.style.userSelect = dragging ? 'none' : ''
})

function onDragStart(event, type) {
    if (event.dataTransfer) {
        event.dataTransfer.setData('application/vueflow', type)
        event.dataTransfer.effectAllowed = 'move'
    }

    draggedType.value = type
    isDragging.value = true

    document.addEventListener('drop', onDragEnd)
}

function onDragOver(e) {
    e.preventDefault()

    if (draggedType.value) {
        isDragOver.value = true

        if (e.dataTransfer) {
            e.dataTransfer.dataTransfer = 'move'
        }
    }
}

function onDragLeave() {
    isDragOver.value = false
}

function onDragEnd() {
    isDragging.value = false
    isDragOver.value = false
    draggedType.value = null
    document.removeEventListener('drop', onDragEnd)
}

function onDrop(event) {
    const position = screenToFlowCoordinate({
        x: event.clientX,
        y: event.clientY,
    })

    const nodeId = getId()

    const newNode = {
        id: nodeId,
        type: draggedType.value,
        position,
        data: { label: nodeId }
    }

    const { off } = onNodesInitialized(() => {
        updateNode(nodeId, node => ({
            position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 },
        }))

        off()
    })

    addNodes(newNode)
}


// these are our edges
</script>

<style>
/* import the necessary styles for Vue Flow to work */
@import '@vue-flow/core/dist/style.css';

/* import the default theme, this is optional but generally recommended */
@import '@vue-flow/core/dist/theme-default.css';

@import '@vue-flow/node-resizer/dist/style.css';

@import '@vue-flow/controls/dist/style.css';

html,
body,
#app {
    margin: 0;
    height: 100%;
}

/* #app {
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
} */

.vue-flow__minimap {
    transform: scale(75%);
    transform-origin: bottom right;
}

.dnd-flow {
    flex-direction: column;
    display: flex;
    height: 100%
}

.dnd-flow aside {
    color: #fff;
    font-weight: 700;
    border-right: 1px solid #eee;
    padding: 15px 10px;
    font-size: 12px;
    background: #10b981bf;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .3);
    box-shadow: 0 5px 10px #0000004d
}

.dnd-flow aside .nodes>* {
    margin-bottom: 10px;
    cursor: grab;
    font-weight: 500;
    -webkit-box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, .25);
    box-shadow: 5px 5px 10px 2px #00000040
}

.dnd-flow aside .description {
    margin-bottom: 10px
}

.dnd-flow .vue-flow-wrapper {
    flex-grow: 1;
    height: 100%
}

@media screen and (min-width: 640px) {
    .dnd-flow {
        flex-direction: row
    }

    .dnd-flow aside {
        min-width: 25%
    }


}

@media screen and (max-width: 639px) {
    .dnd-flow aside .nodes {
        display: flex;
        flex-direction: row;
        gap: 5px
    }


}

.dropzone-background {
    position: relative;
    height: 100%;
    width: 100%
}

.dropzone-background .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none
}
</style>