import {CanvasHelper} from'../CanvasHelper';
import {Graph} from '../model/Graph';
import {Position} from  '../model/Position';

export class GraphCanvasView {
    /**
     * @param {Graph} graph
     * @param {HTMLCanvasElement} canvas
     */
     //static vertex: Vertex;

     dragVertex = null;
     graph  = null;
     canvasHelper=null;
     selectedVertexColor=null;
     vertexRadius;
     selectedVertex;
     uncompletedEdge;

    constructor(graph, private readonly canvas: HTMLCanvasElement) {
        this.graph = graph;
        this.canvas = canvas;
        this.canvasHelper = new CanvasHelper(canvas);
        this.dragVertex = null;
        this.uncompletedEdge = null;
        this.selectedVertex = null;
        this.canvas.addEventListener('click', this.onClickListener.bind(this)); //get the variable value which is inside the function closure
        this.canvas.addEventListener('contextmenu', this.onContextMenuListener.bind(this));
        this.canvas.addEventListener('mousemove', this.onMousemoveListener.bind(this));
        this.canvas.addEventListener('mouseup', this.onMouseupListener.bind(this));
        this.canvas.addEventListener('mousedown', this.onMousedownListener.bind(this));
        this.graph.on(Graph.EVENT_VERTEX_CREATED, this.drawVertex.bind(this));
        this.selectedVertexColor = '#0f0';
        this.vertexRadius = 20;

    }
    //methodTest ( ) { return console.log("test message")}

    /**
     * @param {Vertex} vertex
     */
    setVertexAsSelected(vertex) {
        if (!this.graph.containsVertex(vertex)) {
            throw new Error('Attempt to select not added vertex');
        }

        this.selectedVertex = vertex;
        this.redraw();
      //  console.log("selectedVertex = ",vertex);
        //console.log("fromselectedVertex>vertex.getId", vertex.getId());
    };

    /**
     * @return {Vertex|null}
     **/
    getSelectedVertex() {
        return this.selectedVertex;
    }

    discardSelectedVertex() {
        this.selectedVertex = null;
    }

    /**
     * @param {Position} position
     * @return {Vertex|null}
     * @private
     */
    getVertexByPosition(position) {
        return this.graph.getVerticesList().find((vertex) => {
            return checkPositionIsInCircle(position, vertex.getPosition(), this.vertexRadius);
        });
    }

    redraw() {
      console.log("redrawMethod");
        this.canvasHelper.clearCanvas();

        const groupedEdges = groupEdgesByVertices(this.graph.getEdgesList());

        //console.log("groupedEdges", groupedEdges);

        groupedEdges.forEach((edges) => this.canvasHelper.drawEdges(edges));

        this.graph.getVerticesList().forEach((vertex) => {
            const color = (vertex === this.selectedVertex) ? this.selectedVertexColor : null;
            this.canvasHelper.drawCircle(vertex.getPosition(), this.vertexRadius, vertex.getId(), color);

        });
    }

    /**
     * @return {number}
     */
    getVertexRadius() {
        return this.vertexRadius;
    }

    /**
     * @param {Event} event
     * @private
     */

    // start
    onClickListener(event) {
      console.log("onClickListener(event)",event);
        const clickPosition = this.getEventPosition(event);
        const vertex = this.getVertexByPosition(clickPosition);

        //console.log("onClickListener: vertexc",vertex," lickPosition", clickPosition);
        //checkposition for drow vertex
        if (!this.dragVertex && !vertex) {
            this.graph.createVertexWithPosition(clickPosition);
        } else if (vertex && ctrlKeyIsPressed(event)) {
            this.setVertexAsSelected(vertex);
        }
    }

    /**
     * @param {Event} event
     * @private
     */

     //right-click event   //event.preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.
     onContextMenuListener(event) {

       //check
      // console.log("----------------", (<HTMLInputElement> document.getElementById('directed-edge')).value)
      const flag = document.getElementById('directed-edge') as HTMLInputElement;

      /* TEST FLAG check */
       if (flag.checked) { console.log("checkkk____",document.getElementById('directed-edge'))
          } else {console.log("____UNdirected-edge")}

     event.preventDefault();
     const clickPosition = this.getEventPosition(event);
     const vertex = this.getVertexByPosition(clickPosition);

     if (ctrlKeyIsPressed(event) && vertex) {
         this.graph.deleteVertex(vertex);
     } else if (vertex) {
         if (this.uncompletedEdge) {
             const vertexFrom = this.getVertexByPosition(this.uncompletedEdge);
             console.log("const vertexFrom-----", vertexFrom)

             if (flag.checked ) { //document.getElementById('directed-edge').checked
               console.log("create___DDirectedEdgeTo")

                 this.graph.addEdge(vertexFrom.createDirectedEdgeTo(vertex));
             } else {
               console.log("create___UndirectedEdgeTo")
                 this.graph.addEdge(vertexFrom.createUndirectedEdgeTo(vertex));
             }
             this.uncompletedEdge = null;
             this.redraw();
         } else if (vertex) {
             this.uncompletedEdge = vertex.getPosition();
         }
     } else if (this.uncompletedEdge && !vertex) {
         this.uncompletedEdge = null;
         this.redraw();
     }
 }

    /**
     * @param {Event} event
     * @private
     **/

     //drawDirectedLine
    onMousemoveListener(event) {
        const mousePosition = this.getEventPosition(event);
        //console.log("mousePosition--->>", mousePosition)
        if (this.uncompletedEdge) {
            this.redraw();

            const isEdgeDirected = document.getElementById('directed-edge') as HTMLInputElement;  //.checked

            if (isEdgeDirected.checked) { //console.log("isEdgeDirected",isEdgeDirected.checked)

                this.canvasHelper.drawDirectedLine(this.uncompletedEdge, mousePosition);
            } else {
                this.canvasHelper.drawUndirectedLine(this.uncompletedEdge, mousePosition);
            }
        } else if (this.dragVertex) {
            this.dragVertex.setPosition(mousePosition);
            this.redraw();
        }
    }

    onMouseupListener() {
        if (this.dragVertex) {
            this.dragVertex = null;
            this.redraw();
        }
    }

    /**
     * @param {Event} event
     * @private
     */
    onMousedownListener(event) {
        const vertex = this.getVertexByPosition(this.getEventPosition(event));

        if (!vertex) {
            return false;
        }

        this.dragVertex = vertex;
    }

    /**
     * @param {Event} event
     * @return {Position}
     * @private
     **/
    getEventPosition(event) {
        const boundingClientRect = this.canvas.getBoundingClientRect(); //method returns the size of an element and its position relative to the viewport

        //console.log(Math.floor(event.clientX - boundingClientRect.left));
        //console.log((event.clientX - boundingClientRect.left));
        return new Position(
            Math.floor(event.clientX - boundingClientRect.left), //Math.floo: correct results
            Math.floor(event.clientY - boundingClientRect.top)
        );
    }

    /**
     * @param {Vertex} vertex
     * @private
     */
    drawVertex(vertex) {
      console.log("drawVertexMethod = ",vertex.getId());
      //let v=(vertex) => vertex.getPosition();
      //console.log("(vertex) =>", v(vertex))
        this.canvasHelper.drawCircle(vertex.getPosition(), this.vertexRadius, vertex.getId());
    }
}

/**
 * @param {Position} position
 * @param {Position} circlePosition
 * @param {number} circleRadius
 * @return {boolean}
 */

function checkPositionIsInCircle(position, circlePosition, circleRadius) {
    return Math.pow(position.getX() - circlePosition.getX(), 2)
        + Math.pow(position.getY() - circlePosition.getY(), 2)
        <= Math.pow(circleRadius, 2);
}

/**
 * @param {UndirectedEdge[]} edges array
 * @return {Array}
 */

function groupEdgesByVertices(edges) {

    const hashMap = [];
    console.log("edge input", edges);
    edges.forEach(function (edge) {

        const getId = (vertex) => vertex.getId();
        console.log("const getId =", getId);
        //const getId = function (vertex){  (vertex) => vertex.getId()}
        //const getId =function (vertex) { (vertex) => vertex.getId()};

        //setTimeout( ()=>console.log("setTimeout called!"),2000);
        //TEST arrow function anonim
        //const sayHi = () => {  console.log('Hi');}
        //sayHi();

        console.trace("test")
        //error
        //const hash = edge.getVertices().map(function (vertex) { (vertex) => vertex.getId()}).sort().join(''); //da conctrollare
        const hash = edge.getVertices().map(getId).sort().join(''); //da conctrollare

        if (hashMap[hash]) {
            hashMap[hash].push(edge);
        } else {
            hashMap[hash] = [edge];
        }
    });

    const withoutHash = [];

    for (let i in hashMap) {
        withoutHash.push(hashMap[i]);
    }

    return withoutHash;
}


/**
 * @param {Event} event
 * @return {boolean}
 **/


function ctrlKeyIsPressed(event) {
    return event.ctrlKey || event.metaKey;
}