/**
 * Created by wisestone on 2018-11-13.
 */
'use strict';

define(['app', 'angular', 'd3'],
    function (app, angular, d3) {
        app.directive('jsWorkflowDisabled', ["$log", "$rootScope",
            function ($log, $rootScope) {
                return {
                    scope : {
                        issueStatusList : '=issueStatusList',
                        vm : '=ngModel'
                    },
                    restrict : 'E',
                    replace : true,
                    templateUrl : 'custom_components/js-workflow/js-workflow-disabled.html',
                    controller : function ($scope, $element, $attrs) {

                        //  함수 모음
                        $scope.fn = {
                            initializeLayout : initializeLayout,
                            makeNodeAndLink : makeNodeAndLink,
                            forceLayout : forceLayout,
                            initCircleColor : initCircleColor,
                            initLinkColor : initLinkColor,
                            makeNode : makeNode,
                            makeLink : makeLink,
                            makeGridLine : makeGridLine,
                            executeForce : executeForce,
                            setLink : setLink,
                            setNode : setNode,
                            setNodeTexts : setNodeTexts,
                            targetClick : targetClick,
                            tick : tick,
                            startDiagram : startDiagram,
                            setLastStatusPosition : setLastStatusPosition,
                            setLastTransitionPosition : setLastTransitionPosition,
                            updateClientChangePosition : updateClientChangePosition,
                        };

                        //  변수 모음
                        $scope.vm.targetIssueStatusList = [];
                        $scope.vm.issueStatuses = [];   //  선택 가능한 이슈 상태 목록
                        $scope.vm.addIssueStatusId = null;   //  추가하는 이슈 상태 아이디
                        $scope.vm.width = 0;  //  넓이
                        $scope.vm.height = 0;  //  높이
                        $scope.vm.svg = null;   //  svg 정보
                        $scope.vm.rect = null;  //  다이어그램이 그려지는 사각형 정보
                        $scope.vm.nodes = [];   //  원 정보 모음
                        $scope.vm.links = [];   //  링크 정보 모음
                        $scope.vm.activeTarget = null;  //  현재 선택한 대상 정보
                        $scope.vm.drag = null;
                        $scope.vm.force = null;
                        $scope.vm.node = null;
                        $scope.vm.link = null;
                        $scope.vm.nodeTexts = null; //  원에 표시되는 텍스트
                        $scope.vm.sourceStatusId = null;    //  출발하는 이슈 상태 아이디
                        $scope.vm.targetStatusId = null;    //  연결하는 이슈 상태 아이디
                        $scope.vm.transitionIdGenerator = 100;  //  전이선 임시 id 값


                        $scope.$watch("issueStatusList", function (newValue) {
                            if ($rootScope.isDefined(newValue)) {
                                $scope.fn.startDiagram();
                            }
                        });

                        //  다이어그램을 그리기 시작한다.
                        function startDiagram() {
                            $("#svgContent").empty();

                            $scope.vm.width = $(".workflowbox").width();  //  넓이
                            $scope.vm.height = $(".workflowbox").height();  //  높이

                            $scope.vm.activeTarget = null;  //  타겟 초기화
                            $scope.fn.initCircleColor(null, true);  //  마지막 선택 노드 색상 초기화
                            $scope.fn.forceLayout();   //  다이어그램 에디터 그리기 시작
                        }

                        //  상태 마지막 위치 정보 저장
                        function setLastStatusPosition(issueStatus) {
                            issueStatus.xLocation = $scope.vm.nodes[issueStatus.name].x;
                            issueStatus.yLocation = $scope.vm.nodes[issueStatus.name].y;
                        }

                        //  전이선 마지막 위치 정보 저장
                        function setLastTransitionPosition(workflowTransition, index) {
                            workflowTransition.correctX = $scope.vm.links[index].correctX;
                            workflowTransition.correctY = $scope.vm.links[index].correctY;
                            workflowTransition.direct = $scope.vm.links[index].direct;
                        }


                        //  클라이언트에서 변경한 위치 정보를 클라이언트에서 관리하는 데이터에 업데이트한다.
                        function updateClientChangePosition() {
                            //  서버에서 내려온 데이터에 전이선 변경 정보를 업데이트한다.
                            angular.forEach($scope.vm.issueStatusVos, function (issueStatusVo) {
                                angular.forEach(issueStatusVo.workflowTransitionVos, function (workflowTransition) {
                                    for (var count in $scope.vm.links) {
                                        if ($scope.vm.links[count].id == workflowTransition.id) {
                                            $scope.fn.setLastTransitionPosition(workflowTransition, count);
                                            break;
                                        }
                                    }
                                });

                                $scope.fn.setLastStatusPosition(issueStatusVo);
                            });
                        }

                        //  노드 색상을 초기화한다.
                        function initCircleColor(target, all) {
                            d3.selectAll("circle").each(function () {
                                var circle = d3.select(this)[0][0]["__data__"];

                                if (all) {
                                    d3.select(this).style("fill", circle.originalColor);
                                }
                                else {
                                    if (circle.id != target.id) {
                                        d3.select(this).style("fill", circle.originalColor);
                                    }
                                }
                            });
                        }

                        //  전이선 색상을 초기화한다.
                        function initLinkColor(target, all) {
                            d3.selectAll(".link").each(function () {
                                var link = d3.select(this)[0][0]["__data__"];

                                //  전체 초기화일경우
                                if (all) {
                                    d3.select(this).classed("linkGreen", false);
                                    d3.select(this).classed(link.colorClass, true);
                                }
                                else {
                                    if (link.id != target.id) {
                                        d3.select(this).classed("linkGreen", false);
                                        d3.select(this).classed(link.colorClass, true);
                                    }
                                }

                                d3.select(this).attr("marker-end", "url(#licensing)");
                            });
                        }

                        //  타겟을 클릭했을 때 색상을 변경한다.
                        function targetClick(target) {
                            $scope.vm.activeTarget = angular.copy(target[0][0]["__data__"]);

                            // node 일경우
                            if ($scope.vm.activeTarget.type == "01") {
                                //  노드, 링크 전체 초기화
                                $scope.fn.initCircleColor($scope.vm.activeTarget, false);
                                $scope.fn.initLinkColor(null, true);

                                //  대상 노드 색 변경
                                target.style("fill", "#1DDB16");
                            }
                            else if ($scope.vm.activeTarget.type == "02") {
                                //  노드, 링크 전체 초기화
                                $scope.fn.initCircleColor(null, true);
                                $scope.fn.initLinkColor($scope.vm.activeTarget, false);
                                //  대상 링크 색 변경
                                target.classed("linkGreen", true);
                                target.classed($scope.vm.activeTarget.colorClass, false);
                                target.attr("marker-end", "url(#greenLicensing)");
                            }

                            if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
                                $scope.$apply();
                            }
                        }

                        //  다이어그램에서 도형을 움직일 때 실행
                        function tick() {
                            //IE mark bug fix
                            $scope.vm.link.each(function () {
                                this.parentNode.insertBefore(this, this);
                            });

                            $scope.vm.link.attr("d", function (d) {
                                //svg 영역 내에 표시
                                if (d.target.x > $scope.vm.width) {
                                    d.target.x = ($scope.vm.width - 31);
                                }
                                else if (d.target.x < 30) {
                                    d.target.x = 30;
                                }

                                if (d.source.x > $scope.vm.width) {
                                    d.source.x = ($scope.vm.width - 31);
                                }
                                else if (d.source.x < 30) {
                                    d.source.x = 30;
                                }

                                if (d.target.y > $scope.vm.height) {
                                    d.target.y = ($scope.vm.height - 31);
                                }
                                else if (d.target.y < 30) {
                                    d.target.y = 30;
                                }

                                if (d.source.y > $scope.vm.height) {
                                    d.source.y = ($scope.vm.height - 31);
                                }
                                else if (d.source.y < 30) {
                                    d.source.y = 30;
                                }

                                if (d.correctX == null) {
                                    d.correctX = d.source.x;
                                }

                                if (d.correctY == null) {
                                    d.correctY = d.source.y;
                                }

                                //  직선화 유지 상태 일 경우
                                if (d.direct) {
                                    d.correctX = d.source.x;
                                    d.correctY = d.source.y;
                                }

                                return "M" + d.source.x + "," + d.source.y + " Q" + d.correctX + ", " + d.correctY + " " + d.target.x + ", " + d.target.y;
                            });

                            $scope.vm.node.attr("transform", function (d) {
                                if (d.x > $scope.vm.width) {
                                    d.x = ($scope.vm.width - 31);
                                }
                                else if (d.x < 30) {
                                    d.x = 30;
                                }

                                if (d.y > $scope.vm.height) {
                                    d.y = ($scope.vm.height - 31);
                                }
                                else if (d.y < 30) {
                                    d.y = 30;
                                }

                                return "translate(" + d.x + "," + d.y + ")";
                            });

                            $scope.vm.nodeTexts.attr("transform", function (d) {
                                return "translate(" + d.x + "," + d.y + ")";
                            });

                            //  on 이벤트가 과다하게 발생하는 현상을 방지
                            $scope.vm.force.stop();
                        }

                        //  노드를 만든다.
                        function makeNode(issueStatus, sXLocation, sYLocation) {
                            var xLocation = 0;
                            var yLocation = 0;
                            var color = "FAED7D";

                            //  x좌표
                            if (issueStatus.xLocation == 0 || issueStatus.xLocation == null) {
                                xLocation = sXLocation;
                            }
                            else {
                                xLocation = issueStatus.xLocation;
                            }
                            //  y좌표
                            if (issueStatus.yLocation == 0 || issueStatus.yLocation == null) {
                                yLocation = sYLocation;
                            }
                            else {
                                yLocation = issueStatus.yLocation;
                            }

                            if (issueStatus.color != null) {
                                color = issueStatus.color;
                            }

                            return {
                                id : issueStatus.id,
                                name : issueStatus.name,
                                x : xLocation,
                                y : yLocation,
                                color : color,
                                issueStatusType : issueStatus.issueStatusType,
                                originalColor : issueStatus.color,
                                fixed : true,
                                type : "01",     //  수정 모드시 구분
                                issueStatus : issueStatus
                            }
                        }

                        //  전이선을 만든다.
                        function makeLink(workflowTransition) {
                            return {
                                id : workflowTransition.id,
                                source : workflowTransition.sourceStatusName,
                                target : workflowTransition.targetStatusName,
                                correctX : workflowTransition.correctX,
                                correctY : workflowTransition.correctY,
                                direct : workflowTransition.direct,
                                type : "02",
                                colorClass : "linkBlue",
                                workflowTransition : workflowTransition
                            }
                        }


                        //  1. 서버에서 데이터가 내려올때 사용된 이슈 상태 전체 목록과 각 이슈 상태의 전이선 정보가 내려와야 한다.

                        //  노드와 링크 정보를 생성한다.
                        function makeNodeAndLink() {
                            $scope.vm.nodes = [];  //  원 정보 모음
                            $scope.vm.links = [];  //  링크 정보 모음

                            var startX = 50;    //  새로운 도형의 X축 위치
                            var startY = 50;    //  새로운 도형의 Y축 위치

                            //  노드와 링크 정보를 만든다.
                            angular.forEach($scope.vm.issueStatusVos, function (issueStatusVo, index) {
                                $scope.vm.nodes[issueStatusVo.name] = $scope.fn.makeNode(issueStatusVo, startX, startY);

                                angular.forEach(issueStatusVo.workflowTransitionVos, function (workflowTransition) {
                                    $scope.vm.links.push($scope.fn.makeLink(workflowTransition));
                                });

                                //  기본 좌표가 없을 경우 계속 60씩 증가
                                startX += 60;

                                if (index % 2 == 0) {
                                    startY += 30;
                                }
                                else {
                                    startY += 30;
                                }
                            });

                            angular.forEach($scope.vm.links, function (link) {
                                if (link.source == $scope.vm.nodes[link.source].name) {
                                    link.source = $scope.vm.nodes[link.source];
                                }

                                if (link.target == $scope.vm.nodes[link.target].name) {
                                    link.target = $scope.vm.nodes[link.target];
                                }
                            });
                        }

                        //  기초 레이아웃을 설정한다.
                        function initializeLayout() {
                            $scope.vm.svg = d3.select("#svgContent")
                                .append("svg")
                                .attr("width", $scope.vm.width)
                                .attr("height", $scope.vm.height);

                            $scope.vm.rect = $scope.vm.svg.append("rect")
                                .attr("width", $scope.vm.width)
                                .attr("height", $scope.vm.height)
                                .attr("fill", "white")
                                .on("click", function (d) {
                                    //  원 색상 초기화
                                    $scope.fn.initCircleColor(null, true);
                                    //  링크 색상 초기화
                                    $scope.fn.initLinkColor(null, true);
                                    //  현재 선택한 대상 정보
                                    $scope.vm.activeTarget = null;

                                    if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
                                        $scope.$apply();
                                    }
                                });
                        }


                        //  표시되는 선을 생성한다.
                        function makeGridLine() {
                            //  기본 표시되는 선
                            $scope.vm.svg.append("marker")
                                .attr("orient", "auto")
                                .attr("markerHeight", 4)
                                .attr("markerWidth", 4)
                                .attr("refX", 18)
                                .attr("viewBox", "0 -5 10 10")
                                .attr("id", "licensing")
                                .append("path")
                                .attr("d", function () {
                                    return "M0,-5 L10,0 L0,5";
                                });

                            //  선을 눌러서 활성화되었을때
                            $scope.vm.svg.append("marker")
                                .attr("orient", "auto")
                                .attr("markerHeight", 5)
                                .attr("markerWidth", 5)
                                .attr("refX", 16)
                                .attr("viewBox", "0 -5 10 10")
                                .attr("id", "greenLicensing")
                                .append("path")
                                .attr("d", function () {
                                    return "M0,-5 L10,0 L0,5";
                                });
                        }

                        //  포스 레이아웃 실행
                        function executeForce() {
                            $scope.vm.force = d3.layout.force()
                                .nodes(d3.values($scope.vm.nodes))
                                .links($scope.vm.links)
                                .size([$scope.vm.width, $scope.vm.height])
                                .on("tick", $scope.fn.tick)
                                .start();
                        }

                        //  링크를 셋팅한다.
                        function setLink() {
                            $scope.vm.link = $scope.vm.svg.append("svg:g")
                                .selectAll(".link")
                                .data($scope.vm.force.links())
                                .enter()
                                .append("path")
                                .attr("class", function (d) {
                                    return "link " + d.colorClass;
                                })
                                .attr("id", function (d, i) {
                                    return "link_" + i;
                                })
                                .attr("marker-end", function (d) {
                                    return "url(#licensing)";
                                })
                                .attr("cursor", "pointer")
                                .on("click", function () {
                                    $scope.fn.targetClick(d3.select(this));
                                });
                        }

                        //  노드를 셋팅한다.
                        function setNode() {
                            $scope.vm.node = $scope.vm.svg.append("svg:g")
                                .selectAll("circle")
                                .data($scope.vm.force.nodes())
                                .enter()
                                .append("circle")
                                .attr("class", "node")
                                .style("fill", function (d) {
                                    return d.color;
                                })
                                .style("cursor", "pointer")
                                .attr("r", 15)
                                .on("click", function () {
                                    $scope.fn.targetClick(d3.select(this));
                                });
                        }

                        //  노드 텍스트를 셋팅한다.
                        function setNodeTexts() {
                            $scope.vm.nodeTexts = $scope.vm.svg.append("svg:g")
                                .selectAll("text")
                                .data($scope.vm.force.nodes())
                                .enter()
                                .append("text")
                                .attr("class", "label")
                                .attr("fill", "black")
                                .attr("dy", 30)
                                .style("font-size", "12px")
                                .style("text-anchor", "middle")
                                .text(function (d) {
                                    var name = "";
                                    if (d.name != null) {
                                        if (d.name.length > 10) {
                                            name = d.name.substring(0, 10) + "...";
                                        }
                                        else {
                                            name = d.name;
                                        }
                                    }

                                    return name;
                                });
                        }

                        //  워크플로우 다이어그램을 그린다.
                        function forceLayout() {
                            $scope.fn.initializeLayout($scope.vm.width, $scope.vm.height);
                            $scope.fn.makeNodeAndLink();
                            $scope.fn.makeGridLine();
                            $scope.fn.executeForce($scope.vm.width, $scope.vm.height);
                            $scope.fn.setLink();
                            $scope.fn.setNode();
                            $scope.fn.setNodeTexts();

                        }
                    },
                    link : function (scope, element, attrs) {

                    }
                }
            }])
    });