<template>
    <v-image @click="showMenu($event)" :config="connectorConfig"></v-image>
</template>

<script>
    import {getCordinatesForMarker, getVerticesFromPoints} from '@/plugins/conva.js'

    export default {
        name: "ShapeConnector",
        props: ['connector'],
        data() {
            return {
                image: null
            }
        },
        computed: {
            connectorConfig() {
                let s = {
                    image: this.image,
                    // x: 200,
                    x: this.connector.x,
                    y: (this.connector.y),
                    width: 30,
                    height: 30
                }

                // console.log(s)
                return s
            },
            foo() {
                return this.$store.getters.getShapes[0].vertices
            }
        },
        mounted() {
            const image = new window.Image();
            image.src = "./images/icons/plus.svg";
            image.onload = () => {
                this.image = image;
            };
        },
        methods: {
            showMenu(e) {
                const dist2d_mag = (vec1, vec2) => {
                    const distance_x = vec2.x - vec1.x
                    const distance_y = vec2.y - vec1.y
                    return Math.sqrt(distance_x * distance_x + distance_y * distance_y)
                }

                const vec2d_mag = (vec) => {
                    return Math.sqrt(vec.x * vec.x + vec.y * vec.y)
                }

                const vec2d_dot = (vec1, vec2) => {
                    return vec1.x * vec2.x + vec1.y * vec2.y
                }

                const vec2d_normalize = (vec) => {
                    const mag = vec2d_mag(vec)
                    return {
                        x: vec.x /= mag,
                        y: vec.y /= mag,
                    }
                }

                const face_length = dist2d_mag(this.connector.point1, this.connector.point2)


                let cube_points = [
                    0, 0,
                    face_length, 0,
                    face_length, face_length,
                    0, face_length
                ]

                let cube = {
                    id: '04SJOBE3',
                    vertices: [],
                    points: cube_points,
                    closed: true,
                    x: this.connector.point1.x,
                    y: this.connector.point1.y,
                    fill: 'yellow',
                    strokeWidth: 4,
                    draggable: true,
                    dragBoundFunc: function (pos) {
                        // this.absolutePosition()
                        return pos;
                    }
                }

                const cube_vertices = getVerticesFromPoints(cube_points, this.connector.point1.x, this.connector.point1.y, {
                    x: 1,
                    y: 1
                })
                const cube_vertices_relative = getVerticesFromPoints(cube_points, 0, 0, {x: 1, y: 1})


                const rotate_point = (cx, cy, x, y, angle) => {
                    const radians = (Math.PI / 180) * angle,
                        cos = Math.cos(radians),
                        sin = Math.sin(radians),
                        nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
                        ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
                    return {x: nx, y: ny};
                }

                const getCenterOfPoly = (vertices) => {
                    let minX = 50000, minY = 50000
                    let maxX = 0, maxY = 0

                    for (let i = 0; i < vertices.length; i++) {
                        if (vertices[i].x > maxX)
                            maxX = vertices[i].x

                        if (vertices[i].y > maxY)
                            maxY = vertices[i].y

                        if (vertices[i].x < minX)
                            minX = vertices[i].x

                        if (vertices[i].y < minY)
                            minY = vertices[i].y
                    }

                    return {x: minX + (maxX - minX) / 2, y: minY + (maxY - minY) / 2};
                }

                const getNormals = (vertices) => {
                    let normals = []
                    const faces_center = getCordinatesForMarker(vertices, 0, 0, 0)
                    const poly_center  = getCenterOfPoly(vertices)

                    for (let face_center of faces_center) {
                        const dist_vec = {
                            x: face_center.x + (face_center.x - poly_center.x) * 2,
                            y: face_center.y + (face_center.y - poly_center.y) * 2,
                        }

                        normals.push(vec2d_normalize(dist_vec))
                    }

                    return normals
                }

                let angle = 1
                let bestAngle = 0
                let bestDist = 5000;
                const first_cube_vertex = cube_vertices[0]

                while (angle < 360) {
                    const rotated_vertices = [first_cube_vertex]

                    for (let i = 1; i < cube_vertices.length; i++) {
                        rotated_vertices.push(rotate_point(first_cube_vertex.x, first_cube_vertex.y, cube_vertices[i].x, cube_vertices[i].y, angle))
                    }

                    const last_vertex =  rotated_vertices[rotated_vertices.length - 1]
                    const mag = dist2d_mag(this.connector.point2, last_vertex)
                    if(mag < bestDist)
                    {
                        bestDist = mag;
                        bestAngle = angle;
                    }
                    angle += 1
                }

                cube['rotation'] = 360 - bestAngle;
                this.$store.dispatch('addNewShape', cube)
            }
        }
    }
</script>