/*
 * *********************************************************************************************************************
 *
 *          !!
 *        .F88X
 *        X8888Y
 *      .}888888N;
 *        i888888N;        .:!              .I$WI:
 *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
 *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
 *            +888888N;  .8888888Y                                  "&&8Y.}8,
 *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
 *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
 *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
 *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
 *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
 *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
 *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
 *      .:R888888I
 *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
 *        ~8888'
 *        .!88~                                                                     All rights reserved.
 *
 * *********************************************************************************************************************
 */

import { SGraphScene, SGraphItem, SAnchorItem } from "@persagy-web/graph";
import { SPoint } from "@persagy-web/draw";
import { SMouseEvent, SUndoStack } from "@persagy-web/base";
import { SRectSelectItem, SItemStatus } from "@persagy-web/big";
import {
    SBaseArrowEdit,
    SBasePolygonEdit,
    SBaseCircleEdit,
    SBaseLineEdit,
    SGraphEdit,
    SBaseIconTextEdit,
    SBasePolylineEdit,
    SBaseTextEdit,
    SBaseImageEdit,
    SBaseRectEdit,
    SBaseTriangleEdit
} from "./";
import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";

/**
 * Graph 图形引擎编辑场景类
 *
 * @author 韩耀龙 <han_yao_long@126.com>
 */
export class SGraphEditScene extends SGraphScene {
    //属性
    /** undo/redo 存储栈 */
    protected undoStack = new SUndoStack();

    /** 编辑命令 */
    _editCmd: string = "";
    get editCmd(): string {
        return this._editCmd;
    }
    set editCmd(val: string) {
        this._editCmd = val;
    }

    /** 是否可编辑 */
    _isEditStatus: boolean = true;
    set isEditStatus(bol: boolean) {
        this._isEditStatus = bol;
    }
    get isEditStatus(): boolean {
        return this._isEditStatus;
    }

    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //函数
    /**
     * 构造函数
     */
    constructor() {
        super();
        // 选择绑定选额item事件
        this.selectContainer.connect("selectChange", this, this.selectChange);
    }

    /**
     * 选中 item 触发方法
     *
     * @param obj 变化后的对象
     */
    selectChange(obj: any) {
        // do nothing
    }

    /**
     * 新增基础类直线
     *
     * @param event   鼠标事件参数
     */
    addLine(event: SMouseEvent): void {
        const data = {
            /** 名称 */
            name: "基础直线",
            /** 图标（Image），线类型(Line) */
            type: "Line",
            /** 缩放比例（Image），线类型(Line) */
            scale: { x: 1, y: 1, z: 1 },
            /** 缩放比例（Image），线类型(Line) */
            rolate: { x: 0, y: 0, z: 0 },
            /** 位置 */
            pos: { x: 0, y: 0 },
            /** 由应用自己定义 */
            properties: {
                type: "BaseLine" // 自定义类型用于区分mark与node
            },
            style: {
                line: [{ x: event.x, y: event.y }],
                default: {}
            }
        };
        const lineItem = new SBaseLineEdit(null, data);
        lineItem.status = SItemStatus.Create;
        this.addItem(lineItem);
        lineItem.selectable = true;
        this.grabItem = lineItem;
        lineItem.connect("finishCreated", this, this.finishCreated);
        lineItem.connect("onContextMenu", this, this.getItem);
        // 视图存在
        if (this.view) {
            this.view.update();
        }
    }

    /**
     * 新增折线
     *
     * @param event 鼠标事件
     * @return 新增的折线
     */
    addPolyLine(event: SMouseEvent): SBasePolylineEdit {
        const data = {
            name: "基础折线",
            type: "line",
            pos: { x: 0, y: 0 },
            properties: {
                type: "BasePolyline"
            },
            style: {
                outLine: [{ x: event.x, y: event.y }],
                default: {}
            }
        };
        const item = new SBasePolylineEdit(null, data);
        item.status = SItemStatus.Create;
        item.selectable = true;
        this.addItem(item);
        this.grabItem = item;
        item.connect("finishCreated", this, this.finishCreated);
        item.connect("onContextMenu", this, this.getItem);
        // 视图存在
        if (this.view) {
            this.view.update();
        }
        return item;
    }

    /**
     * 新增基础类图片
     *
     * @param event   鼠标事件参数
     * @return 新增的基础类图片
     */
    addImageItem(event: SMouseEvent): SBaseImageEdit {
        const data = {
            /** 名称 */
            name: "基础图片",
            num: 1,
            /** 图标（Image），线类型(Line) */
            type: "Image",
            /** 位置 */
            pos: { x: event.x, y: event.y },
            /** 由应用自己定义 */
            properties: {
                type: "BaseImage"
            },
            style: {
                default: {
                    strokecolor: "#c0ccda",
                    url: ""
                }
            }
        };
        const item = new SBaseImageEdit(null, data);
        item.selectable = true;
        item.moveable = true;
        this.addItem(item);
        item.connect("onContextMenu", this, this.getItem);
        this.finishCreated(item);
        return item;
    }

    /**
     * 新增基础类文本
     *
     * @param event   鼠标事件参数
     * @return 新增的基础类文本
     */
    addTextItem(event: SMouseEvent): SBaseTextEdit {
        const data = {
            /** 名称 */
            name: "基础文本",
            /** 图标 */
            type: "Text",
            /** 位置 */
            pos: { x: event.x, y: event.y },
            size: { width: 0, height: 0 },
            /** 由应用自己定义 */
            properties: {
                type: "BaseText" // 自定义类型用于区分mark与node
            },
            style: {
                default: {
                    text: "请在右侧属性栏输入文字！",
                    color: "#646c73",
                    font: 14,
                    backgroundColor: "#f7f9fa00"
                }
            }
        };
        const item = new SBaseTextEdit(null, data);
        item.moveTo(event.x, event.y);
        item.moveable = true;
        this.addItem(item);
        this.grabItem = null;
        item.connect("onContextMenu", this, this.getItem);
        this.finishCreated(item);
        return item;
    }

    /**
     * 添加基本矩形 item
     *
     * @param event 鼠标事件
     * @return 添加的基本矩形
     */
    addRectItem(event: SMouseEvent): SBaseRectEdit {
        const data = {
            name: "基础矩形",
            /** 图标（Image），线类型(Line) */
            type: "Zone",
            /** 位置 */
            pos: { x: 0, y: 0 },
            properties: {
                type: "BaseRect"
            },
            style: {
                default: {
                    line: [{ x: event.x, y: event.y }]
                }
            }
        };

        const rectItem = new SBaseRectEdit(null, data);
        rectItem.status = SItemStatus.Create;
        this.addItem(rectItem);
        rectItem.selectable = true;
        rectItem.moveable = true;
        this.grabItem = rectItem;
        rectItem.isTransform = true;
        rectItem.connect("finishCreated", this, this.finishCreated);
        rectItem.connect("onContextMenu", this, this.getItem);
        if (this.view) {
            this.view.update();
        }
        return rectItem;
    }

    /**
     * 添加基本三角形 item
     *
     * @param event 鼠标事件
     * @return 添加的基本三角形
     */
    addTriangleItem(event: SMouseEvent): SBaseTriangleEdit {
        const data = {
            name: "基础三角形",
            type: "Zone",
            pos: { x: 0, y: 0 },
            properties: {
                type: "BaseTriangle"
            },
            style: {
                default: {
                    line: [{ x: event.x, y: event.y }]
                }
            }
        };
        const triangleItem = new SBaseTriangleEdit(null, data);
        triangleItem.status = SItemStatus.Create;
        this.addItem(triangleItem);
        // this.undoStack.push(new SGraphAddCommand(this, triangleItem));
        triangleItem.selectable = true;
        triangleItem.moveable = true;
        this.grabItem = triangleItem;
        triangleItem.connect("finishCreated", this, this.finishCreated);
        triangleItem.connect("onContextMenu", this, this.getItem);
        // 视图存在
        if (this.view) {
            this.view.update();
        }
        return triangleItem;
    }

    /**
     * 添加基本圆
     *
     * @param event 鼠标事件
     * @return 添加的基本圆
     */
    addCircleItem(event: SMouseEvent): SBaseCircleEdit {
        const data = {
            name: "基础圆形",
            type: "Zone",
            pos: { x: 0, y: 0 },
            properties: {
                type: "BaseCircle"
            },
            style: {
                default: {},
                line: [{ x: event.x, y: event.y }]
            }
        };
        const circleItem = new SBaseCircleEdit(null, data);
        circleItem.status = SItemStatus.Create;
        circleItem.selectable = true;
        this.grabItem = circleItem;
        this.addItem(circleItem);
        circleItem.connect("finishCreated", this, this.finishCreated);
        circleItem.connect("onContextMenu", this, this.getItem);
        // 视图存在
        if (this.view) {
            this.view.update();
        }
        return circleItem;
    }

    /**
     * 添加基本多边形
     *
     * @param event     鼠标事件
     * @return 添加基的本多边形
     */
    addPolygonItem(event: SMouseEvent): SBasePolygonEdit {
        const data = {
            name: "基础多边形",
            type: "Zone",
            pos: { x: 0, y: 0 },
            properties: {
                type: "BasePolygon"
            },
            style: {
                outLine: [{ x: event.x, y: event.y }],
                default: {}
            }
        };
        const polygonItem = new SBasePolygonEdit(null, data);
        polygonItem.status = SItemStatus.Create;
        polygonItem.selectable = true;
        this.addItem(polygonItem);
        // this.undoStack.push(new SGraphAddCommand(this, polygonItem));
        this.grabItem = polygonItem;
        polygonItem.connect("finishCreated", this, this.finishCreated);
        polygonItem.connect("onContextMenu", this, this.getItem);
        // 视图存在
        if (this.view) {
            this.view.update();
        }
        return polygonItem;
    }

    /**
     * 添加基本箭头 item (直线类)
     *
     * @param event     鼠标事件
     */
    addBaseArrowsItem(event: SMouseEvent): void {
        const data = {
            name: "基础箭头",
            type: "Zone",
            pos: { x: 0, y: 0 },
            properties: {
                type: "BaseArrow"
            },
            style: {
                default: {
                    line: [{ x: event.x, y: event.y }]
                }
            }
        };
        const arrowItem = new SBaseArrowEdit(null, data);
        arrowItem.status = SItemStatus.Create;
        arrowItem.moveable = true;
        this.addItem(arrowItem);
        // this.undoStack.push(new SGraphAddCommand(this, arrowItem));
        arrowItem.selectable = true;
        this.grabItem = arrowItem;
        arrowItem.connect("finishCreated", this, this.finishCreated);
        arrowItem.connect("onContextMenu", this, this.getItem);
        // 视图存在
        if (this.view) {
            this.view.update();
        }
    }

    /**
     * 添加Icon类 item
     *
     * @param event     鼠标事件
     */
    addBaseIconTextItem(event: SMouseEvent): void {
        const data = {
            /** 名称 */
            name: "icon",
            /** 图标 */
            type: "Text",
            /** 位置 */
            pos: { x: event.x, y: event.y },
            size: { width: 50, height: 50 },
            /** 由应用自己定义 */
            properties: {
                type: "BaseText" // 自定义类型用于区分mark与node
            },
            style: {
                default: {
                    textList: [],
                    url:
                        "data:image/png;base64,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"
                }
            }
        };
        const icon = new SBaseIconTextEdit(null, data);
        icon.status = SItemStatus.Create;
        icon.moveable = true;
        this.addItem(icon);
        icon.selectable = true;
        this.grabItem = icon;
        icon.connect("finishCreated", this, this.finishCreated);
        icon.connect("onContextMenu", this, this.getItem);
        icon.$emit("finishCreated");
        // 视图存在
        if (this.view) {
            this.view.update();
        }
    }

    /**
     *  划线时点击位置是否是锚点
     *
     *  @param  event   事件
     *  @param  len     限制距离
     *  @return 点击的锚点
     */
    clickIsAnchor(event: SMouseEvent): SAnchorItem | null {
        let minAnchor = null;
        let len = -1;
        // 遍历场景中的对象
        this.root.children.forEach(item => {
            // 子对象是 icontext 类型,且存在锚点
            if (
                item instanceof SBaseIconTextEdit &&
                item.anchorList &&
                item.anchorList.length
            ) {
                // 该对象中有图片,且为基础图片类型
                if (item.img && item.img instanceof SBaseImageEdit) {
                    let scenePoint = item.img.mapFromScene(event.x, event.y);
                    // 点击点在图片区域内
                    if (item.img.contains(scenePoint.x, scenePoint.y)) {
                        let anchor = item.anchorList[0];
                        let anchorPoint = anchor.mapToScene(0, 0);
                        let dis = SMathUtil.pointDistance(
                            event.x,
                            event.y,
                            anchorPoint.x,
                            anchorPoint.y
                        );
                        // 第一次进入循环
                        if (len < 0) {
                            minAnchor = anchor;
                            len = dis;
                        }
                        // 得到距离最小的锚点
                        if (dis < len) {
                            minAnchor = anchor;
                            len = dis;
                        }
                    }
                }
            }
        });
        return minAnchor;
    }

    /**
     * 对齐指定 item
     *
     * @param v     对齐类型
     */
    changeAlignItem(v: any): void {
        this.selectContainer.layout(v);
    }

    /**
     * 保存数据
     *
     * @return 返回需要保存的数据
     */
    saveMsgItem(): any {
        // do nothing
    }

    /**
     * 重做
     */
    redo(): void {
        // do nothing
    }

    /**
     * 撤销
     */
    undo(): void {
        // do nothing
    }

    /**
     * 完成创建的回调函数
     *
     * @param item 完成创建的item
     */
    finishCreated(item: SGraphItem): void {
        // do nothing
    }

    /**
     * 复制
     */
    copy(): void {
        // do nothing
    }

    /**
     * 粘贴
     */
    paste(): void {}

    /**
     *  选中状态方法
     *
     *  @param  item    选中的 item
     */
    toggleItem(item: SGraphItem): void {
        this.selectContainer.clear();
        this.selectContainer.toggleItem(item);
    }

    /**
     * 框选
     */
    addRectSelect(event: SMouseEvent) {
        let point = new SPoint(event.x, event.y);
        let rect = new SRectSelectItem(null, point);
        this.addItem(rect);
        this.grabItem = rect;
    }

    /**
     * 获取 item (常用与场景外的调用)
     *
     * @param  event    SMouseEvent 鼠标事件
     * @param  item     SGraphEdit|null 返回 item
     *
     */
    getItem(item: SGraphEdit | null, event: SMouseEvent[]) {}
}