import './App.css';
import {useLayoutEffect, useState} from "react";

let mouseDownMenuBar = false
let mouseDownCanvas = false
let mouseMenuBarOffsetX, mouseMenuBarOffsetY = 0
let context
let canvas
let downLink
let lastPositions = []
let strokeWidth = 5
let lastMouse = 0
let eraserColor = "rgb(255, 255, 255)"
let lastStrokeWidthPencil = 5, lastStrokeWidthEraser = 5, lastStrokeWidthRect = 5

let formAnchor = null;

export default function App() {

    useLayoutEffect(() => {
        canvas = document.getElementById("canvas")
        context = canvas.getContext("2d")
        clearScreen("rgb(255, 255, 255)")
        downLink = document.createElement("a")
        downLink.className = "no-display"


        window.scrollTo((5000 / window.innerWidth) * 500, (3000 / window.innerHeight) * 300)

        setInterval(() => {
            if(selectedTool === "pencil" || selectedTool === "eraser") {
                if (lastPositions.length >= 2) {
                    let point1 = lastPositions.shift()
                    let point2 = lastPositions[lastPositions.length - 1]

                    let connection = new Position(point1.x - point2.x, point1.y - point2.y)

                    for (let i = 0; i < 1; i += 0.001) {
                        context.beginPath()
                        context.arc(point1.x - (connection.x * i), point1.y - (connection.y * i), strokeWidth, 0, 2 * Math.PI, false)
                        context.fill()
                    }
                } else if (Date.now() - lastMouse > 100 && lastPositions.length >= 1) {
                    let point = lastPositions.shift()

                    context.beginPath()
                    context.arc(point.x, point.y, strokeWidth, 0, 2 * Math.PI, false)
                    context.fill()
                }
            }
        }, 1)

    }, [])

    const [menuBarLeft, setMenuBarLeft] = useState(50)
    const [menuBarTop, setMenuBarTop] = useState(50)
    const [strokeWidthSliderValue, setStrokeWidthSliderValue] = useState(strokeWidth)
    const [colorValue, setColorValue] = useState("#000000")
    const [menuBarShown, setMenuBarShown] = useState(true)
    const [selectedTool, setSelectedTool] = useState("pencil")

    const [displayRectHint, setDisplayRectHint] = useState(false)
    const [rectHintX, setRectHintX] = useState(0)
    const [rectHintY, setRectHintY] = useState(0)
    const [rectHintWidth, setRectHintWidth] = useState(0)
    const [rectHintHeight, setRectHintHeight] = useState(0)

    class Position {
        constructor(x, y) {
            this.x = x
            this.y = y
        }
    }

    function clearScreen(color) {
        context.fillStyle = color
        context.fillRect(0, 0, 5000, 3000)
        eraserColor = color
    }

    function handleMouseDownCanvas(e) {
        mouseDownCanvas = true
        context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor
        if(selectedTool === "pencil" || selectedTool === "eraser") {
            context.beginPath()
            context.arc(e.pageX, e.pageY, strokeWidthSliderValue, 0, 2 * Math.PI, false)
            context.fill()

            lastMouse = Date.now()
            lastPositions.push(new Position(e.pageX, e.pageY))
        }
        else if(selectedTool === "rect")
        {
            formAnchor = new Position(e.pageX, e.pageY)
            setRectHintX(e.pageX)
            setRectHintY(e.pageY)
            setRectHintWidth(0)
            setRectHintHeight(0)
            setDisplayRectHint(true)
        }
    }

    function handleMouseUpCanvas(e)
    {
        mouseDownCanvas = false

        if(selectedTool === "rect") {
            context.strokeStyle = colorValue
            context.beginPath()
            context.rect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y)
            context.lineWidth = strokeWidthSliderValue
            context.stroke()

            setDisplayRectHint(false)
        }
    }

    function handleMouseMove(e) {
        let mouseX = e.pageX
        let mouseY = e.pageY

        if (mouseDownMenuBar) {

            setMenuBarLeft(mouseX - mouseMenuBarOffsetX)
            setMenuBarTop(mouseY - mouseMenuBarOffsetY)
        } else if (mouseDownCanvas) {
            if(selectedTool === "pencil" || selectedTool === "eraser") {
                context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor

                lastPositions.push(new Position(mouseX, mouseY))

                lastMouse = Date.now()
            }
            else if(selectedTool === "rect") {
                if(e.pageX >= formAnchor.x) {
                    setRectHintX(formAnchor.x)
                    setRectHintWidth(e.pageX - formAnchor.x)
                }
                else {
                    setRectHintX(e.pageX)
                    setRectHintWidth(formAnchor.x - e.pageX)
                }
                if(e.pageY >= formAnchor.y) {
                    setRectHintY(formAnchor.y)
                    setRectHintHeight(e.pageY - rectHintY)
                }
                else {
                    setRectHintY(e.pageY)
                    setRectHintHeight(formAnchor.y - e.pageY)
                }
            }
        }
    }

    function onExportButtonClick(e) {
        let img = canvas.toDataURL("image/png")
        let image = new Image()
        image.src = "data:image/png;base64," + img
        downLink.href = img
        downLink.download = "export.png"
        downLink.click()
    }

    function handleToolChange(e) {
        setSelectedTool(e.target.value)
        if (e.target.value === "pencil") {
            setStrokeWidthSliderValue(lastStrokeWidthPencil)
            strokeWidth = lastStrokeWidthPencil
        } else if (e.target.value === "eraser") {
            setStrokeWidthSliderValue(lastStrokeWidthEraser)
            strokeWidth = lastStrokeWidthEraser
        } else if (e.target.value === "rect") {
            setStrokeWidthSliderValue(lastStrokeWidthRect)
            strokeWidth = lastStrokeWidthRect
        }
    }

    return (

        <div onMouseMove={e => handleMouseMove(e)} style={{overflow: "unset"}}>
            <canvas id="canvas" style={{backgroundColor: "rgb(255, 255, 255)"}}
                    width={5000}
                    height={3000}
                    onMouseDown={e => {
                        handleMouseDownCanvas(e)
                    }}
                    onMouseUp={e => {
                        handleMouseUpCanvas(e)
                    }}
            >
            </canvas>

            <div id={"recthint"} style={{
                display: displayRectHint ? "block" : "none",
                position: "absolute",
                background: "rgba(0, 0, 0, 0)",
                border: strokeWidthSliderValue + "px solid " + colorValue,
                left: rectHintX,
                top: rectHintY,
                width: rectHintWidth,
                height: rectHintHeight,
                pointerEvents: "none"
            }}>

            </div>

            <div id="menubar" style={{
                position: "fixed",
                backgroundColor: "white",
                borderRadius: 15,
                boxShadow: "0 0 5px gray",
                padding: 25,
                top: menuBarTop,
                left: menuBarLeft,
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
            }}
                 onMouseDown={(e) => {
                     if (e.currentTarget === e.target) {
                         mouseDownMenuBar = true
                         mouseMenuBarOffsetX = e.pageX - e.currentTarget.getBoundingClientRect().left
                         mouseMenuBarOffsetY = e.pageY - e.currentTarget.getBoundingClientRect().top
                     }
                 }}
                 onMouseUp={(e) => {
                     mouseDownMenuBar = false
                 }}
                 onDoubleClick={() => {
                     setMenuBarShown(!menuBarShown)
                 }}
            >
                <div style={{
                    display: "flex",
                    justifyContent: "flex-start",
                    alignItems: "center",
                    flexDirection: "column",
                    pointerEvents: "none"
                }}>
                    <div style={{
                        pointerEvents: "none"
                    }}>
                        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                             className="bi bi-grip-horizontal" viewBox="0 0 16 16">
                            <path
                                d="M2 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                        </svg>
                    </div>
                    <div style={{
                        display: menuBarShown ? "flex" : "none",
                        justifyContent: "center",
                        alignItems: "center",
                        pointerEvents: "none"
                    }}>
                        {/*stroke width*/}
                        <div style={{
                            display: "flex",
                            flexDirection: "column",
                            justifyContent: "center",
                            gap: 5,
                            alignItems: "center",
                            pointerEvents: "none"
                        }}>

                            <div style={{
                                display: "flex",
                                flexDirection: "row",
                            }}>

                                <div style={{
                                    display: "flex",
                                    flexDirection: "column",
                                    alignItems: "center",
                                    justifyContent: "flex-end",
                                    gap: 10
                                }}>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                         className="bi bi-pencil-fill" viewBox="0 0 16 16">
                                        <path
                                            d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
                                    </svg>
                                    <input type={"radio"} name={"tool"} value={"pencil"}
                                           style={{width: 20, height: 20, pointerEvents: "auto"}}
                                           checked={selectedTool === "pencil"} onChange={e => {
                                        handleToolChange(e)
                                    }}/>
                                </div>
                                <div style={{
                                    display: "flex",
                                    flexDirection: "column",
                                    alignItems: "center",
                                    justifyContent: "flex-end",
                                    gap: 10
                                }}>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                         className="bi bi-eraser-fill" viewBox="0 0 16 16">
                                        <path
                                            d="M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828l6.879-6.879zm.66 11.34L3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293l.16-.16z"/>
                                    </svg>
                                    <input type={"radio"} value={"eraser"} name={"tool"}
                                           style={{width: 20, height: 20, pointerEvents: "auto"}}
                                           checked={selectedTool === "eraser"} onChange={e => {
                                        handleToolChange(e)
                                    }}/>
                                </div>

                                <div style={{
                                    display: "flex",
                                    flexDirection: "column",
                                    alignItems: "center",
                                    justifyContent: "flex-end",
                                    gap: 10
                                }}>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                         className="bi bi-square" viewBox="0 0 16 16">
                                        <path
                                            d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                                    </svg>
                                    <input type={"radio"} value={"rect"} name={"tool"}
                                           style={{width: 20, height: 20, pointerEvents: "auto"}}
                                           checked={selectedTool === "rect"} onChange={e => {
                                        handleToolChange(e)
                                    }}/>
                                </div>
                            </div>

                            <input type={"range"} min={1} max={20} value={strokeWidthSliderValue} onChange={e => {
                                setStrokeWidthSliderValue(e.currentTarget.value)
                                strokeWidth = e.currentTarget.value
                                if (selectedTool === "pencil") {
                                    lastStrokeWidthPencil = strokeWidth
                                } else if (selectedTool === "eraser") {
                                    lastStrokeWidthEraser = strokeWidth;
                                } else if (selectedTool === "rect") {
                                    lastStrokeWidthRect = strokeWidth;
                                }

                            }} style={{pointerEvents: "auto"}}/>
                            <p style={{userSelect: "none"}}>{strokeWidthSliderValue}</p>
                        </div>

                        {/*Color Selector*/}
                        <input type={"color"}
                               style={{
                                   pointerEvents: "auto",
                                   borderWidth: 0,
                                   borderRadius: 5,
                                   boxShadow: "0 0 5px gray",
                                   marginLeft: 100

                               }} onChange={e => {
                            setColorValue(e.target.value)
                        }} value={colorValue}/>

                        {/*fill bucket*/}
                        <button style={{
                            backgroundColor: "white",
                            borderWidth: 0,
                            boxShadow: "0 0 5px gray",
                            padding: 10,
                            marginLeft: 10,
                            borderRadius: 15,
                            pointerEvents: "auto"
                        }} onClick={() => {
                            clearScreen(colorValue)
                        }}>
                            Clear
                        </button>

                        {/*export button*/}
                        <button style={{
                            padding: 10,
                            backgroundColor: "white",
                            borderRadius: 15,
                            marginLeft: 10,
                            boxShadow: "0 0 5px gray",
                            borderWidth: 0,
                            pointerEvents: "auto"
                        }}
                                onClick={onExportButtonClick}
                        >Export
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}