const { dia, shapes, util } = joint;

const GRID_SIZE = 20;
const GRID_COUNT = 12;
// The value which ensures visibility of elements in the Z direction
const PAPER_Z_OFFSET = GRID_SIZE * 4;

// Matrix of the isometric transformation and its parameters

const SCALE = 1;
const ISOMETRIC_SCALE = 0.8602;
const ROTATION_DEGREES = 30;

const transformationMatrix = () => {
    return V.createSVGMatrix()
        .translate(GRID_COUNT * GRID_SIZE * SCALE * ISOMETRIC_SCALE + GRID_SIZE, PAPER_Z_OFFSET + GRID_SIZE)
        .rotate(ROTATION_DEGREES)
        .skewX(-ROTATION_DEGREES)
        .scaleNonUniform(SCALE, SCALE * ISOMETRIC_SCALE);
};

// Here we are specifying elements' markup and
// constant properties of markup parts

const IsometricPyramid = dia.Element.define(
    'IsometricPyramid',
    {
        attrs: {
            front: {
                strokeWidth: 1,
                stroke: '#333333',
                fillOpacity: '0.8'
            },
            side: {
                strokeWidth: 1,
                stroke: '#333333',
                fillOpacity: '0.8'
            }
        }
    },
    {
        markup: util.svg/* xml */ `
      <polygon @selector="front"></polygon>
      <polygon @selector="side"></polygon>
    `
    }
);

const IsometricRectangularPrism = dia.Element.define(
    'IsometricPyramid',
    {
        attrs: {
            top: {
                strokeWidth: 1,
                stroke: '#333333',
                fillOpacity: '0.8'
            },
            front: {
                strokeWidth: 1,
                stroke: '#333333',
                fillOpacity: '0.8'
            },
            side: {
                strokeWidth: 1,
                stroke: '#333333',
                fillOpacity: '0.8'
            }
        }
    },
    {
        markup: util.svg/* xml */ `
      <polygon @selector="top"></polygon>
      <polygon @selector="front"></polygon>
      <polygon @selector="side"></polygon>
    `
    }
);

// converting dimension parameters into path properties of markup parts
// so the element can be created in a more flexible way

const createIsometricPyramid = (properties) => {
    const d = {
        x: properties.size.width,
        y: properties.size.height,
        z: properties.isometricHeight
    };
    properties.attrs = properties.attrs || {};

    properties.attrs.front = {
        fill: properties.color,
        points: `${(d.x / 2) - d.z},${(d.y / 2) - d.z} ${d.x},0 ${d.x},${d.y}`,
    };
    properties.attrs.side = {
        fill: properties.color,
        points: `${(d.x / 2) - d.z},${(d.y / 2) - d.z} ${d.x},${d.y} 0,${d.y}`,
    };

    return new IsometricPyramid(properties);
};

const createIsometricRectangularPrism = (properties) => {
    const d = {
        x: properties.size.width,
        y: properties.size.height,
        z: properties.isometricHeight
    };
    properties.attrs = properties.attrs || {};
    properties.attrs.top = {
        fill: properties.color,
        points: `0,0 ${d.x},0 ${d.x},${d.y} 0,${d.y}`,
        transform: `translate(${-d.z},${-d.z})`,
    };
    properties.attrs.side = {
        fill: properties.color,
        points: `0,0 ${d.x},0 ${d.x},${d.z} 0,${d.z}`,
        transform: V.matrixToTransformString(
            new DOMMatrixReadOnly()
                .translate(-d.z, -d.z + d.y)
                .skewX(45)
        )
    };
    properties.attrs.front = {
        fill: properties.color,
        points: `0,0 ${d.z},0 ${d.z},${d.y} 0,${d.y}`,
        transform: V.matrixToTransformString(
            new DOMMatrixReadOnly()
                .translate(-d.z + d.x, -d.z)
                .skewY(45)
        )
    };


    return new IsometricRectangularPrism(properties);
};

// Z-index calculations

const topologicalSort = (nodes) => {
    let depth = 0;

    const visitNode = (node) => {
        if (!node.visited) {
            node.visited = true;

            for (let i = 0; i < node.behind.length; ++i) {
                if (node.behind[i] == null) {
                    break;
                }
                else {
                    visitNode(node.behind[i]);
                    delete node.behind[i];
                }
            }

            node.depth = depth++;
            node.el.set('z', node.depth);
        }
    }

    for (let i = 0; i < nodes.length; ++i)
    {
        visitNode(nodes[i]);
    }
}
const sortElements = (graph) => {
    const elements = graph.getElements();
    const nodes = elements.map(el => {
        return {
            el: el,
            behind: [],
            visited: false
        }
    });

    for (let i = 0; i < nodes.length; ++i) {
        const a = nodes[i].el;
        const aBBox = a.getBBox();
        cellBBoxes[a.id].setAttribute('width', aBBox.width);
        cellBBoxes[a.id].setAttribute('height', aBBox.height);
        cellBBoxes[a.id].setAttribute('x', aBBox.x)
        cellBBoxes[a.id].setAttribute('y', aBBox.y)
      
        const aMax = aBBox.bottomRight();

        for (let j = 0; j < nodes.length; ++j) {
            if (i != j) {
                const b = nodes[j].el;
                const bBBox = b.getBBox();
                const bMin = bBBox.topLeft();

                if (bMin.x < aMax.x && bMin.y < aMax.y)
                {
                    nodes[i].behind.push(nodes[j]);
                }
            }
        }
    }

    topologicalSort(nodes);

    return nodes;
}

// Paper

const cellNamespace = { ...shapes, IsometricPyramid, IsometricRectangularPrism };

const graph = new dia.Graph({}, { cellNamespace });

const paper = new dia.Paper({
    el: document.getElementById('paper-container'),
    model: graph,
    restrictTranslate: {
        x: 0,
        y: 0,
        width: GRID_SIZE * GRID_COUNT,
        height: GRID_SIZE * GRID_COUNT
    },
    width: '100%',
    height: '100%',
    gridSize: GRID_SIZE,
    async: true,
    autoFreeze: true,
    sorting: dia.Paper.sorting.APPROX,
    cellViewNamespace: cellNamespace
});

// Make the paper isometric by applying the isometric matrix to all
// SVG content it contains.
paper.matrix(transformationMatrix());

// Add isometric elements to the graph.

const pyramid = createIsometricPyramid({
    isometricHeight: GRID_SIZE * 4,
    color: '#ff0000',
    size: { width: GRID_SIZE * 2, height: GRID_SIZE * 3 },
    position: { x: GRID_SIZE * 6, y: GRID_SIZE * 6 }
});

const prism = createIsometricRectangularPrism({
    isometricHeight: GRID_SIZE * 2,
    color: '#00ff00',
    size: { width: GRID_SIZE * 2, height: GRID_SIZE * 3 },
    position: { x: GRID_SIZE * 2, y: GRID_SIZE * 2 }
});

const prism2 = createIsometricRectangularPrism({
    isometricHeight: GRID_SIZE * 1,
    color: '#0000ff',
    size: { width: GRID_SIZE * 1, height: GRID_SIZE * 2 },
    position: { x: GRID_SIZE * 8, y: GRID_SIZE * 8 }
});

graph.addCells([pyramid, prism, prism2]);

// A function to draw the grid.

drawGrid(paper);

function drawGrid(paper) {
    const gridData = [];
    const j = GRID_COUNT;
    for (let i = 0; i <= j; i++) {
        gridData.push(`M 0,${i * GRID_SIZE} ${j * GRID_SIZE},${i * GRID_SIZE}`);
        gridData.push(`M ${i * GRID_SIZE},0 ${i * GRID_SIZE},${j * GRID_SIZE}`);
    }

    const gridEl = V('path').attr({
        d: gridData.join(' '),
        fill: 'none',
        stroke: 'lightgray'
    }).node;

    // When the grid is appended to one of the paper's layer, it gets automatically transformed
    // by the isometric matrix
    paper.getLayerNode(dia.Paper.Layers.BACK).append(gridEl);
}

const cellBBoxes = {}
graph.getCells().forEach(cell => {
  cellBBoxes[cell.id] = V('rect', {
    fill: '#888888',
    stroke: '#000000',
    'stroke-width': 2
  });
  cellBBoxes[cell.id].appendTo(paper.getLayerNode(dia.Paper.Layers.BACK));
});

graph.on('change:position', () => {
    sortElements(graph);
});

sortElements(graph);
// Add switch to toggle the isometric view with 2d for demonstration purposes

document
    .getElementById('isometric-switch')
    .addEventListener('change', (evt) => {
        if (evt.target.checked) {
            paper.matrix(transformationMatrix());
        } else {
            paper.matrix(
                V.createSVGMatrix().translate(
                    GRID_SIZE * GRID_COUNT,
                    PAPER_Z_OFFSET + GRID_SIZE
                )
            );
        }
    });