<!DOCTYPE html>
<html>
<head>
    <title>Image Selection</title>
    <script src="../static/jquery-3.7.1.min.js"></script>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            text-align: center;
        }
        #finalPriceContainer{
            display: flex;
            width: 100%;
            height: 10rem;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        #finalPrice{
            background-color: #FAC898;
            border-radius: 4px;
            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        }
        #mainForm{
            display: flex;
            width: 25%;
            height: 25%;
            flex-wrap: wrap;
            justify-content: center;
        }
        #mainForm input{
            width: 100%;
            padding: 0.5rem;
            text-align: left;
            margin-top: 0.5rem;
            border-radius: 4px;
            margin-bottom: 0.5rem;
        }
         #mainForm label{
            width: 100%;
            text-align: left;
        }
        #submitURLButton{
            text-align: center !important;
        }
        #mainFormContainer{
            display: flex;
            width: 100%;
            height: 100%;
            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
            border-radius: 4px;
            padding: 2rem;
            background: #e1e1e1;
            justify-content: center;
        }
        #image {
            position: relative;
            display: inline-block;
        }
        #imageContainer{
            display: flex;
            justify-content: center;
            width: 100%;
            height: 100%;
            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        }
        #selectionBox {
            position: absolute;
            background: red;
            opacity: 0.3;
            border: 2px dashed red; /* Dashed blue border for the selection box */
            display: none; /* Initially hidden */
        }
    </style>
</head>
<body>
    <div id="mainFormContainer">
        <form id="mainForm">
            <label>URL</label>
            <input type="text" id="url" />
            <label>Name</label>
            <input type="text" id="name" />
            <input type="submit" id="submitURLButton" value="Submit" />
        </form>
    </div>
    <div id="finalPriceContainer"><h1 id="finalPrice"></h1></div>
    <div id="imageContainer">
        <div id="image">
            <img src="" id="screenshot" style="max-width: 100%; height: auto;">
            <div id="selectionBox"></div>
        </div>
    </div>


    <script>
    $(function() {
         let startX, startY, isDragging = false;

        $("#mainForm").on("submit", function(event) {
            event.preventDefault();
            let url = $("#url").val();
            let name = $("#name").val();
                
            $.ajax({
                url: `http://localhost:8001/takeScreenshot?name=${name}&url=${url}`,
            }).done(function() {
            $("#screenshot").attr("src", `http://localhost:8001/images/${name}.png`);
            $("#selectionBox").hide(); // Hide selection box when a new image is loaded
        });
    });

    $("#screenshot").on('mousedown', function(event) {
        let offset = $(this).offset();
        startX = event.pageX - offset.left;
        startY = event.pageY - offset.top;
        isDragging = true;
        $("#selectionBox").css({ top: startY, left: startX, width: 0, height: 0, display: 'block' });
    });

    $(document).on('mousemove', function(event) {
        if (isDragging) {
            let offset = $("#screenshot").offset();
            let currentX = event.pageX - offset.left;
            let currentY = event.pageY - offset.top;
            let width = Math.abs(currentX - startX);
            let height = Math.abs(currentY - startY);
            let newLeft = (currentX < startX) ? currentX : startX;
            let newTop = (currentY < startY) ? currentY : startY;
            $("#selectionBox").css({ width: width, height: height, left: newLeft, top: newTop });
        }
    });

    $(document).on('mouseup', function(event) {
        if (isDragging) {
        isDragging = false;

        // Capture the final coordinates and dimensions
        let finalCoords = $("#selectionBox").position();
        // default of 1 for width/height value presents request error to tesseract - allows for misclicks when grabbing coordinates via click/drag
        let width = $("#selectionBox").width() === 0 ? 1 : $("#selectionBox").width();
        let height = $("#selectionBox").height() === 0 ? 1 : $("#selectionBox").height();
        console.log("Final Coordinates: ", finalCoords.top, finalCoords.left, width, height);

        // Assuming you have the 'name' letiable available from the image name
        let name = $("#name").val();  // Retrieve the name of the image if needed

        // Construct the URL with query parameters for the AJAX request
        let requestUrl = `http://localhost:8001/getValueFromImage?name=${name}&top=${finalCoords.top}&left=${finalCoords.left}&width=${width}&height=${height}`;

        // Send an AJAX request to the server with the selection box coordinates and dimensions
            $.ajax({
                url: requestUrl,
                method: 'GET',
                    success: function(response) {
                    // Handle the server response here
                    console.log("Value from the selected area: ", response);
                    console.log(response)
                   response !== '' ? $("#finalPrice").css('padding', '1rem') : $("#finalPrice").css('padding', '0rem'); // Set padding to 1rem
                   $("#finalPrice").text(response); // Display the response in the 'finalPrice' div
               },
                    error: function(xhr, status, error) {
                // Handle errors
                    console.error("Error fetching value: ", error);
                    }
                });
            }
        });;
    });
    </script>
</body>
</html>
