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 { ControlPoint, InkData, PointData } from "../../fields/InkField";
import { Transform } from "../util/Transform";
import { Colors } from "./global/globalEnums";
import { Doc } from "../../fields/Doc";
import { listSpec } from "../../fields/Schema";
import { Cast } from "../../fields/Types";

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

@observer
export class InkControls extends React.Component<InkControlProps> {
    @observable private _overControl = -1;
    @observable private _overAddPoint = -1;

    /**
     * Handles the movement of a selected control point when the user clicks and drags.
     * @param controlIndex The index of the currently selected control point.
     */
    @action
    onControlDown = (e: React.PointerEvent, controlIndex: number): void => {
        if (InkStrokeProperties.Instance) {
            InkStrokeProperties.Instance.moveControl(0, 0, 1);
            const controlUndo = UndoManager.StartBatch("DocDecs set radius");
            const screenScale = this.props.ScreenToLocalTransform().Scale;
            const order = controlIndex % 4;
            const handleIndexA = order === 2 ? controlIndex - 1 : controlIndex - 2;
            const handleIndexB = order === 2 ? controlIndex + 2 : controlIndex + 1;
            const brokenIndices = Cast(this.props.inkDoc.brokenInkIndices, listSpec("number"));
            setupMoveUpEvents(this, e,
                (e: PointerEvent, down: number[], delta: number[]) => {
                    InkStrokeProperties.Instance?.moveControl(-delta[0] * screenScale, -delta[1] * screenScale, controlIndex);
                    return false;
                },
                () => controlUndo?.end(),
                action((e: PointerEvent, doubleTap: boolean | undefined) => {
                    if (doubleTap && brokenIndices && brokenIndices.includes(controlIndex)) {
                        InkStrokeProperties.Instance?.snapHandleTangent(controlIndex, handleIndexA, handleIndexB);
                    }
                }));
        }
    }

    /**
     * Deletes the currently selected point.
     */
    @action
    onDelete = (e: KeyboardEvent) => {
        if (["-", "Backspace", "Delete"].includes(e.key)) {
            if (InkStrokeProperties.Instance?.deletePoints()) e.stopPropagation();
        }
    }

    /**
     * Changes the current selected control point.
     */
    @action
    changeCurrPoint = (i: number) => {
        if (InkStrokeProperties.Instance) {
            InkStrokeProperties.Instance._currentPoint = i;
            document.addEventListener("keydown", this.onDelete, true);
        }
    }

    /**
     * Updates whether a user has hovered over a particular control point or point that could be added
     * on click.
     */
    @action onEnterControl = (i: number) => { this._overControl = i; };
    @action onLeaveControl = () => { this._overControl = -1; };
    @action onEnterAddPoint = (i: number) => { this._overAddPoint = i; };
    @action onLeaveAddPoint = () => { this._overAddPoint = -1; };

    render() {
        const formatInstance = InkStrokeProperties.Instance;
        if (!formatInstance) return (null);

        // Accessing the current ink's data and extracting all control points.
        const data = this.props.data;
        const controlPoints: ControlPoint[] = [];
        if (data.length >= 4) {
            for (let i = 0; i <= data.length - 4; i += 4) {
                controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i });
                controlPoints.push({ X: data[i + 3].X, Y: data[i + 3].Y, I: i + 3 });
            }
        }
        const addedPoints = this.props.addedPoints;
        const [left, top, scaleX, scaleY, strokeWidth] = this.props.format;

        return (
            <>
                {addedPoints.map((pts, i) =>
                    <svg height="10" width="10" key={`add${i}`}>
                        <circle
                            cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
                            cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
                            r={strokeWidth / 1.5}
                            stroke={this._overAddPoint === i ? Colors.MEDIUM_BLUE : "transparent"}
                            strokeWidth={0} fill={this._overAddPoint === i ? Colors.MEDIUM_BLUE : "transparent"}
                            onPointerDown={() => { formatInstance?.addPoints(pts.X, pts.Y, addedPoints, i, controlPoints); }}
                            onMouseEnter={() => this.onEnterAddPoint(i)}
                            onMouseLeave={this.onLeaveAddPoint}
                            pointerEvents="all"
                            cursor="all-scroll"
                        />
                    </svg>
                )}
                {controlPoints.map((control, i) =>
                    <svg height="10" width="10" key={`ctrl${i}`}>
                        <rect
                            x={(control.X - left - strokeWidth / 2) * scaleX}
                            y={(control.Y - top - strokeWidth / 2) * scaleY}
                            height={this._overControl === i ? strokeWidth * 1.5 : strokeWidth}
                            width={this._overControl === i ? strokeWidth * 1.5 : strokeWidth}
                            strokeWidth={strokeWidth / 6} stroke={Colors.MEDIUM_BLUE}
                            fill={formatInstance?._currentPoint === control.I ? Colors.MEDIUM_BLUE : Colors.WHITE}
                            onPointerDown={(e) => {
                                this.changeCurrPoint(control.I);
                                this.onControlDown(e, control.I);
                            }}
                            onMouseEnter={() => this.onEnterControl(i)}
                            onMouseLeave={this.onLeaveControl}
                            pointerEvents="all"
                            cursor="default"
                        />
                    </svg>
                )}
            </>
        );
    }
}