import { ContextMenu, GraphicDrawAssistant, KeyListener, calculateMirrorPoint, convertToBezierParams, pointPolygon, linePoint, GraphicInteractionPlugin, getWaypointRangeIndex, addWayPoint, clearWayPoint, PolylineEditPlugin, VectorText, AppConsts, BezierCurveEditPlugin, AbsorbableLine, AbsorbablePoint } from 'jl-graphic';
import { SectionType, defaultDisplayConfig } from './Section.js';
import { Graphics, Point } from 'pixi.js';
import { Turnout } from '../../Turnout/Turnout.js';
import { Section } from '../bjrtss/Section.js';

class SectionDraw extends GraphicDrawAssistant {
    points = [];
    graphic = new Graphics();
    keyQListener = new KeyListener({
        value: 'KeyQ',
        global: true,
        onPress: () => {
            if (this.points.length === 0) ;
        },
    });
    keyZListener = new KeyListener({
        value: 'KeyZ',
        global: true,
        onPress: () => {
            if (this.points.length === 0) ;
        },
    });
    constructor(app, template) {
        super(app, template, 'sym_o_timeline', '区段Section');
        this.container.addChild(this.graphic);
        SectionPointEditPlugin.init(app, this);
    }
    bind() {
        super.bind();
        this.app.addKeyboardListener(this.keyQListener, this.keyZListener);
    }
    unbind() {
        super.unbind();
        this.app.removeKeyboardListener(this.keyQListener, this.keyZListener);
    }
    onLeftDown(e) {
        const { x, y } = this.toCanvasCoordinates(e.global);
        const p = new Point(x, y);
        if (this.graphicTemplate.isCurve) {
            if (this.points.length == 0) {
                this.points.push(p);
            }
            else {
                this.points.push(p, p.clone());
            }
        }
        else {
            this.points.push(p);
        }
    }
    onLeftUp(e) {
        const template = this.graphicTemplate;
        if (template.isCurve) {
            const mp = this.toCanvasCoordinates(e.global);
            if (this.points.length === 1) {
                this.points.push(new Point(mp.x, mp.y));
            }
            else if (this.points.length > 1) {
                const cp2 = this.points[this.points.length - 2];
                const p = this.points[this.points.length - 1];
                cp2.copyFrom(calculateMirrorPoint(p, mp));
                this.points.push(mp);
            }
        }
    }
    onRightClick() {
        if (this.points.length < 2) {
            this.finish();
            return;
        }
        this.createAndStore(true);
    }
    onEsc() {
        if (this.points.length < 2) {
            this.finish();
            return;
        }
        this.createAndStore(true);
    }
    redraw(p) {
        if (this.points.length < 1)
            return;
        const template = this.graphicTemplate;
        this.graphic.clear();
        this.graphic.lineStyle(3, '#555');
        const ps = [...this.points];
        if (template.isCurve) {
            if (ps.length === 1) {
                this.graphic.moveTo(ps[0].x, ps[0].y);
                this.graphic.lineTo(p.x, p.y);
            }
            else {
                if ((ps.length + 1) % 3 === 0) {
                    ps.push(p.clone(), p.clone());
                }
                else {
                    const cp = ps[ps.length - 2];
                    const p1 = ps[ps.length - 1];
                    const mp = calculateMirrorPoint(p1, p);
                    cp.copyFrom(mp);
                }
                const bps = convertToBezierParams(ps);
                bps.forEach((bp) => {
                    this.graphic.drawBezierCurve(bp.p1, bp.p2, bp.cp1, bp.cp2, template.segmentsCount);
                });
            }
        }
        else {
            ps.push(p);
            ps.forEach((p, i) => {
                if (i !== 0) {
                    this.graphic.lineTo(p.x, p.y);
                }
                else {
                    this.graphic.moveTo(p.x, p.y);
                }
            });
        }
    }
    prepareData(data) {
        const template = this.graphicTemplate;
        if ((!template.isCurve && this.points.length < 2) ||
            (template.isCurve && this.points.length < 4)) {
            console.log('Section绘制因点不够取消绘制');
            return false;
        }
        if (template.isCurve) {
            this.points.pop();
        }
        data.isCurve = template.isCurve;
        data.segmentsCount = template.segmentsCount;
        data.points = this.points;
        data.code = 'G000';
        return true;
    }
    clearCache() {
        this.points = [];
        this.graphic.clear();
    }
}
class SectionGraphicHitArea {
    section;
    constructor(section) {
        this.section = section;
    }
    contains(x, y) {
        if (this.section.datas.sectionType === SectionType.TurnoutPhysical) {
            return false;
        }
        if (this.section.datas.isCurve) {
            const bps = convertToBezierParams(this.section.datas.points);
            for (let i = 0; i < bps.length; i++) {
                const bp = bps[i];
                if (pointPolygon({ x, y }, [bp.p1, bp.cp1, bp.cp2, bp.p2], defaultDisplayConfig.lineWidth)) {
                    return true;
                }
            }
        }
        else {
            for (let i = 1; i < this.section.datas.points.length; i++) {
                const p1 = this.section.datas.points[i - 1];
                const p2 = this.section.datas.points[i];
                if (linePoint(p1, p2, { x, y }, defaultDisplayConfig.lineWidth)) {
                    return true;
                }
            }
        }
        return false;
    }
}
function buildAbsorbablePositions(section) {
    const aps = [];
    const sections = section.queryStore.queryByType(Section.Type);
    sections.forEach((other) => {
        const [ps, pe] = [
            other.localToCanvasPoint(other.getStartPoint()),
            other.localToCanvasPoint(other.getEndPoint()),
        ];
        const { width, height } = section.getGraphicApp().canvas;
        const xs = new AbsorbableLine({ x: 0, y: ps.y }, { x: width, y: ps.y });
        const ys = new AbsorbableLine({ x: ps.x, y: 0 }, { x: ps.x, y: height });
        const xe = new AbsorbableLine({ x: 0, y: pe.y }, { x: width, y: pe.y });
        const ye = new AbsorbableLine({ x: pe.x, y: 0 }, { x: pe.x, y: height });
        aps.push(xs, ys, xe, ye);
    });
    const turnouts = section.queryStore.queryByType(Turnout.Type);
    turnouts.forEach((turnout) => {
        turnout.getPortPoints().forEach((points) => {
            turnout.localToCanvasPoints(...points).forEach((p) => {
                aps.push(new AbsorbablePoint(p));
            });
        });
    });
    return aps;
}
function onEditPointCreate(g, dp) {
    const section = g;
    dp.on('transformstart', (e) => {
        if (e.isShift()) {
            section.getGraphicApp().setOptions({
                absorbablePositions: buildAbsorbablePositions(section),
            });
        }
    });
}
class SectionPolylineEditPlugin extends PolylineEditPlugin {
    static Name = 'SectionPolylineEditPlugin';
    labels = [];
    constructor(g, options) {
        super(g, options);
        this.name = SectionPolylineEditPlugin.Name;
        this.initLabels();
    }
    initLabels() {
        this.labels = ['A', 'B'].map((str) => {
            const vc = new VectorText(str, { fill: AppConsts.assistantElementColor });
            vc.setVectorFontSize(14);
            vc.anchor.set(0.5);
            return vc;
        });
        this.addChild(...this.labels);
        this.updateEditedPointsPosition();
    }
    updateEditedPointsPosition() {
        super.updateEditedPointsPosition();
        this.labels[0]?.position.set(this.editedPoints[0].x, this.editedPoints[0].y + 10);
        this.labels[1]?.position.set(this.editedPoints[this.editedPoints.length - 1].x, this.editedPoints[this.editedPoints.length - 1].y + 10);
    }
}
class SectionBazierCurveEditPlugin extends BezierCurveEditPlugin {
    static Name = 'SectionBazierCurveEditPlugin';
    labels = [];
    constructor(g, options) {
        super(g, options);
        this.name = SectionBazierCurveEditPlugin.Name;
        this.initLabels();
    }
    initLabels() {
        this.labels = [new VectorText('A'), new VectorText('B')];
        this.labels.forEach((label) => {
            label.setVectorFontSize(14);
            this.addChild(label);
        });
        this.updateEditedPointsPosition();
    }
    updateEditedPointsPosition() {
        super.updateEditedPointsPosition();
        this.labels[0]?.position.set(this.editedPoints[0].x, this.editedPoints[0].y + 10);
        this.labels[1]?.position.set(this.editedPoints[this.editedPoints.length - 1].x, this.editedPoints[this.editedPoints.length - 1].y + 10);
    }
}
const addWaypointConfig = {
    name: '添加路径点',
};
const clearWaypointsConfig = {
    name: '清除所有路径点',
};
const splitSectionConfig = {
    name: '拆分',
    // disabled: true,
};
const SectionEditMenu = ContextMenu.init({
    name: '区段编辑菜单',
    groups: [
        {
            items: [addWaypointConfig, clearWaypointsConfig],
        },
        {
            items: [splitSectionConfig],
        },
    ],
});
class SectionPointEditPlugin extends GraphicInteractionPlugin {
    static Name = 'SectionPointDrag';
    drawAssistant;
    constructor(app, da) {
        super(SectionPointEditPlugin.Name, app);
        this.drawAssistant = da;
        app.registerMenu(SectionEditMenu);
    }
    static init(app, da) {
        return new SectionPointEditPlugin(app, da);
    }
    filter(...grahpics) {
        return grahpics.filter((g) => g.type == Section.Type);
    }
    bind(g) {
        g.lineGraphic.eventMode = 'static';
        g.lineGraphic.cursor = 'pointer';
        g.lineGraphic.hitArea = new SectionGraphicHitArea(g);
        g.transformSave = true;
        g.labelGraphic.eventMode = 'static';
        g.labelGraphic.cursor = 'pointer';
        g.labelGraphic.selectable = true;
        g.labelGraphic.draggable = true;
        g.on('selected', this.onSelected, this);
        g.on('unselected', this.onUnselected, this);
        // g.on('_rightclick', this.onContextMenu, this);
    }
    unbind(g) {
        g.off('selected', this.onSelected, this);
        g.off('unselected', this.onUnselected, this);
        // g.off('_rightclick', this.onContextMenu, this);
    }
    onContextMenu(e) {
        const target = e.target;
        const section = target.getGraphic();
        this.app.updateSelected(section);
        if (section.datas.sectionType === SectionType.TurnoutPhysical) {
            return;
        }
        const p = section.screenToLocalPoint(e.global);
        addWaypointConfig.handler = () => {
            const linePoints = section.linePoints;
            const { start, end } = getWaypointRangeIndex(linePoints, false, p, defaultDisplayConfig.lineWidth);
            addWayPoint(section, false, start, end, p);
        };
        clearWaypointsConfig.handler = () => {
            clearWayPoint(section, false);
        };
        // TODO
        /**
         * 区段拆分的菜单项和对话框之前写在这里，但引用了Quasar组件不是很合适，暂时先注释掉
         * Section中已有获取拆分的数据的方法，考虑将生成对应目标区段的逻辑放业务层？或这里提供生成方法供业务层调用
         */
        // splitSectionConfig.disabled = false;
        // splitSectionConfig.handler = () => {
        //   Dialog.create({
        //     title: '拆分区段',
        //     message: '请选择生成数量和方向',
        //     component: SectionSplitDialog,
        //     cancel: true,
        //     persistent: true,
        //   }).onOk((data: { num: number; dir: 'ltr' | 'rtl' }) => {
        //     const { num, dir } = data;
        //     const sectionData = section.datas;
        //     const points = section.getSplitPoints(num);
        //     const children: LogicSection[] = [];
        //     let codeAppend = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.slice(0, num);
        //     if (
        //       (dir === 'ltr' &&
        //         sectionData.points[0].x >
        //           sectionData.points[sectionData.points.length - 1].x) ||
        //       (dir === 'rtl' &&
        //         sectionData.points[0].x <
        //           sectionData.points[sectionData.points.length - 1].x)
        //     ) {
        //       codeAppend = codeAppend.split('').reverse().join('');
        //     }
        //     points.forEach((ps, i) => {
        //       const data = new LogicSectionData();
        //       const logicSectionDraw =
        //         this.drawAssistant.app.getDrawAssistant<LogicSectionDraw>(
        //           LogicSection.Type,
        //         );
        //       data.id = logicSectionDraw.nextId();
        //       data.code = `${sectionData.code}-${codeAppend.charAt(i % 26)}`;
        //       data.points = ps.map(
        //         (p) => new graphicData.Point({ x: p.x, y: p.y }),
        //       );
        //       data.id = this.drawAssistant.nextId();
        //       data.childTransforms = [
        //         new ChildTransform(
        //           'label',
        //           new GraphicTransform(
        //             {
        //               x:
        //                 data.points[0].x +
        //                 (data.points[1].x - data.points[0].x) / 2,
        //               y:
        //                 data.points[0].y +
        //                 (data.points[1].y - data.points[0].y) / 2 +
        //                 20,
        //             },
        //             { x: 0, y: 0 },
        //             0,
        //             { x: 0, y: 0 },
        //           ),
        //         ),
        //       ];
        //       const g = logicSectionDraw.graphicTemplate.new();
        //       g.loadData(data);
        //       logicSectionDraw.storeGraphic(g);
        //       children.push(g);
        //     });
        //     // sectionData.children = children.map((g) => g.datas.id);
        //     section.repaint();
        //     section.buildRelation();
        //     section.draggable = false;
        //     children.forEach((c) => c.buildRelation());
        //     this.app.updateSelected(...children);
        //   });
        // };
        SectionEditMenu.open(e.global);
    }
    onSelected(g) {
        const section = g;
        if (section.datas.sectionType === SectionType.TurnoutPhysical) {
            return;
        }
        if (section.datas.isCurve) {
            let lep = section.getAssistantAppend(SectionBazierCurveEditPlugin.Name);
            if (!lep) {
                lep = new SectionBazierCurveEditPlugin(section, {
                    onEditPointCreate,
                });
                section.addAssistantAppend(lep);
            }
            lep.showAll();
        }
        else {
            let lep = section.getAssistantAppend(SectionPolylineEditPlugin.Name);
            if (!lep) {
                lep = new SectionPolylineEditPlugin(section, { onEditPointCreate });
                section.addAssistantAppend(lep);
            }
            lep.showAll();
        }
    }
    onUnselected(g) {
        const section = g;
        if (section.datas.isCurve) {
            const lep = section.getAssistantAppend(SectionBazierCurveEditPlugin.Name);
            if (lep) {
                lep.hideAll();
            }
        }
        else {
            const lep = section.getAssistantAppend(SectionPolylineEditPlugin.Name);
            if (lep) {
                lep.hideAll();
            }
        }
    }
}

export { SectionDraw, SectionGraphicHitArea, SectionPointEditPlugin, addWaypointConfig, clearWaypointsConfig, splitSectionConfig };