import React = require("react");
import { observable, action } from "mobx";
import { observer } from "mobx-react";
import { InkStrokeProperties } from "./InkStrokeProperties";
import { setupMoveUpEvents, emptyFunction } from "../../Utils";
import { UndoManager } from "../util/UndoManager";
import { InkData, HandlePoint, HandleLine } from "../../fields/InkField";
import { Transform } from "../util/Transform";

export interface InkControlProps {
    data: InkData;
    format: number[];
    ScreenToLocalTransform: () => Transform;
}

@observer
export class InkHandles extends React.Component<InkControlProps> {
    /**
     * Handles the movement of a selected handle point when the user clicks and drags.
     * @param handleNum The index of the currently selected handle point.
     */
     onHandleDown = (e: React.PointerEvent, handleNum: number): void => {
        if (InkStrokeProperties.Instance) {
            InkStrokeProperties.Instance.moveControl(0, 0, 1);
            const controlUndo = UndoManager.StartBatch("DocDecs set radius");
            const screenScale = this.props.ScreenToLocalTransform().Scale;
            setupMoveUpEvents(this, e, (e: PointerEvent, down: number[], delta: number[]) => {
                    InkStrokeProperties.Instance?.moveHandle(-delta[0] * screenScale, -delta[1] * screenScale, handleNum);
                    return false;
                }, () => controlUndo?.end(), emptyFunction
            );
        }
    }
 
    render() {
        const formatInstance = InkStrokeProperties.Instance;
        if (!formatInstance) return (null);
        const data = this.props.data;
        const handlePoints: HandlePoint[] = [];
        const handleLines: HandleLine[] = [];
        if (data.length >= 4) {
            // adding first and last (single) handle lines
            handleLines.push({ X1: data[0].X, Y1: data[0].Y, X2: data[1].X, Y2: data[1].Y, dot1: 0, dot2: 0 });
            handleLines.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[data.length - 1].X, Y2: data[data.length - 1].Y, dot1: data.length - 1, dot2: data.length - 1 });
            for (let i = 0; i <= data.length - 4; i += 4) {
                handlePoints.push({ X: data[i + 1].X, Y: data[i + 1].Y, I: i + 1, dot1: i, dot2: i === 0 ? i : i - 1 });
                handlePoints.push({ X: data[i + 2].X, Y: data[i + 2].Y, I: i + 2, dot1: i + 3, dot2: i === data.length ? i + 3 : i + 4 });
            }
            for (let i = 2; i < data.length - 4; i += 4) {
                handleLines.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 3].X, Y2: data[i + 3].Y, dot1: i + 1, dot2: i + 2 });
            }
        }
        const [left, top, scaleX, scaleY, strokeWidth, dotsize] = this.props.format;

        return (
            <>
                {handlePoints.map((pts, i) =>
                    <svg height="10" width="10" key={`hdl${i}`}>
                        <circle 
                            cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} 
                            cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} 
                            r={strokeWidth / 2} 
                            strokeWidth={0} 
                            fill="#1F85DE"
                            onPointerDown={(e) => this.onHandleDown(e, pts.I)} 
                            pointerEvents="all" 
                            cursor="default" 
                            display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
                    </svg>)}
                {handleLines.map((pts, i) =>
                    <svg height="100" width="100" key={`line${i}`}>
                        <line 
                            x1={(pts.X1 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} 
                            y1={(pts.Y1 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
                            x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} 
                            y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} 
                            stroke="#1F85DE" 
                            strokeWidth={dotsize / 8}
                            display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
                    </svg>)}
            </>
        );
    }
}