@extends('admin._layouts.master')


@section('content')
    <style>
        #nodeRoot {

        }

        .node {
            min-height       : 20px;
            min-width        : 10px;
            margin           : 2px;
            padding          : 2px;
            background-color : lightgoldenrodyellow;
        }

        .node.active {
            background-color : tan;
        }
    </style>

    <div class="col-md-6">
        <div class="box box-primary">
            <div class="box-header with-border">

                <span id="addNodeBtn" class="btn btn-slim btn-success">
                    <i class="fa fa-plus"></i>&nbsp; Add Section
                </span>

                <span id="removeNodeBtn" class="btn btn-slim btn-danger">
                    <i class="fa fa-minus"></i>&nbsp; Remove Section
                </span>


            </div>
        </div>
    </div>

    <div id="nodeRoot" class="col-md-6">
    </div>

@endsection


@push('scripts')
    <script>
        let state = new Proxy({
                activeNode   : null,
                nodes        : {
                    1: {
                        text: 'Hello'
                    }
                },
                setActiveNode: function (nodeId) {
                    state.activeNode = nodeId
                }
            }, {
                // observe the state changes
                set           : function (obj, prop, newval) {
                    obj[prop] = newval

                    // re-render the scene if the state changes
                    render()
                    return true
                },
                deleteProperty: function (obj, key) {
                    if (!key in obj) return false

                    // re-render the scene if the state changes
                    render()

                    return obj.removeItem(key)
                },
            }
        )

        let $nodeRoot, $addNodeBtn, $removeNodeBtn


        window.onload = function () {
            init()
        }

        function init() {
            $nodeRoot      = document.getElementById('nodeRoot')
            $addNodeBtn    = document.getElementById('addNodeBtn')
            $removeNodeBtn = document.getElementById('removeNodeBtn')

            $addNodeBtn.addEventListener('click', function () {
                let id = 1

                // find a suitable id
                while (typeof state.nodes[id] !== 'undefined') {
                    id++
                }

                state.nodes[id] = {}

                state.setActiveNode(id)
            })

            $removeNodeBtn.addEventListener('click', function () {
                if (!state.activeNode) return false

                delete state.nodes[state.activeNode]
            })
        }


        /* ---------------------------------------------------------------------------------------------------------------------------------------- */
        /* ----------------------------------------------------------------------------------------------------------------------------- EVENTS -+- */
        /* ---------------------------------------------------------------------------------------------------------------------------------------- */
        function nodeClick(e) {
            let $node  = e.currentTarget
            let nodeId = $node.getAttribute('data-id')

            state.setActiveNode(nodeId)
        }


        /* ---------------------------------------------------------------------------------------------------------------------------------------- */
        /* ----------------------------------------------------------------------------------------------------------------------------- RENDER -+- */
        /* ---------------------------------------------------------------------------------------------------------------------------------------- */
        function render() {
            for (let nodeId in state.nodes) {
                let nodeData = state.nodes[nodeId]
                let $node    = $nodeRoot.querySelector('.node.node-' + nodeId)
                let isActive = nodeId === state.activeNode

                // check if node exists
                if ($node) {
                    $node.classList.toggle('active', isActive)

                } else {
                    createNode(nodeId, nodeData)
                }

                $nodeRoot.querySelectorAll('.node').forEach(function ($node) {
                    if (!state.nodes[$node.getAttribute('data-id')])
                        $node.remove()
                })
            }
        }

        /* ------------------------------------------------------------------------------------------------------------------------ create Node -+- */
        function createNode(nodeId, nodeData) {
            let $newNode = document.createElement('div')

            $newNode.classList.add('node', 'node-' + nodeId, 'active')
            $newNode.setAttribute('data-id', nodeId)

            if (nodeData.text)
                $newNode.text = nodeData.text

            $newNode.addEventListener('click', nodeClick)

            $nodeRoot.appendChild($newNode)
        }


    </script>
@endpush