<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Derivative Calculator</title>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap" rel="stylesheet" />
        <style>
            body {
                line-height: 1.5em;
                margin: 0 auto;
                font-family: "Noto Sans Mono", monospace;
                font-size: 14px;
                color: #030303;
                background-color: #b2babb;
            }
            #wrapper {
                margin: 0 auto;
                max-width: 720px;
                padding: 18px;
                background: #ffffff;
            }
            header,
            footer {
                text-align: center;
            }
            #h1-link {
                color: #030303;
                text-decoration: none;
            }
            form {
                display: flex;
                font-family: "Noto Sans Mono", monospace;
                font-size: 14px;
            }
            label {
                padding: 3px;
            }
            input {
                font-family: "Noto Sans Mono", monospace;
                font-size: 14px;
                padding: 3px;
            }
            input[type="text"] {
                flex: 1;
            }
            input[type="submit"] {
                cursor: pointer;
            }
            #derivative {
                padding: 3px;
                text-align: center;
                overflow-x: auto;
                overflow-y: hidden;
                white-space: nowrap;
            }
            hr {
                height: 0;
                border: 0;
                border-top: 1px solid rgba(0, 0, 0, 0.1);
            }
            #plot {
                width: 100%;
                height: 450px;
                padding: 3px;
            }
            a {
                color: #0000f5;
                text-decoration: none;
            }
            a:hover {
                text-decoration: underline;
            }
        </style>
        <link rel="shortcut icon" href="dydx.png" type="image/x-icon" />
        <script src="https://unpkg.com/mathjs@9.4.4/lib/browser/math.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=AM_HTMLorMML-full"></script>
        <script src="https://cdn.plot.ly/plotly-2.3.0.min.js"></script>
    </head>

    <body>
        <div id="wrapper">
            <header>
                <h1>
                    Derivative Calculator
                </h1>
            </header>
            <br />
            <br />
            <form id="form">
                <label for="expression">y =</label>
                &nbsp;
                <input type="text" id="expression" placeholder="Enter An Expression..." />
                &nbsp;
                <input type="submit" value="Go!" />
            </form>
            <br />
            <br />
            <div>
                <h4>Derivative:</h4>
                <br />
                <div id="derivative"></div>
                <br />
                <hr />
                <h4>Plot:</h4>
                <br />
                <div id="plot"></div>
                <br />
            </div>
        </div>
        <script>
            function randomInput() {
                var randomValue = ["4 * sin(x) + 5 * cos(x / 2)", "x * sin(x ^ 2)", "x ^ 4 * sin(x)", "e ^ sin(x)"];
                var randomExpression = Math.floor(Math.random() * randomValue.length);
                document.getElementById("expression").value = randomValue[randomExpression];
                userInput();
            }
            function userInput() {
                try {
                    var input = document.getElementById("expression").value;
                    var expression = math.compile(input);
                    var derivative = math.derivative(input, "x");
                    var xExpression = math.range(-10, 10, 0.5).toArray();
                    var yExpression = xExpression.map(function (x) {
                        return expression.evaluate({
                            x: x,
                        });
                    });
                    var xDerivative = math.range(-10, 10, 0.5).toArray();
                    var yDerivative = xDerivative.map(function (x) {
                        return derivative.evaluate({
                            x: x,
                        });
                    });
                    var trace1 = {
                        x: xExpression,
                        y: yExpression,
                        mode: "lines",
                        name: "y",
                    };
                    var trace2 = {
                        x: xDerivative,
                        y: yDerivative,
                        mode: "lines",
                        name: "y'",
                    };
                    var data = [trace1, trace2];
                    var layout = {
                        xaxis: {
                            title: "x",
                        },
                        yaxis: {
                            title: "y",
                        },
                    };
                    var config = { responsive: true };
                    document.getElementById("derivative").innerHTML = `\`y' = ${derivative}\``;
                    MathJax.Hub.Typeset();
                    Plotly.newPlot("plot", data, layout, config);
                } catch (error) {
                    alert(error);
                }
            }
            MathJax = window.MathJax;
            MathJax.Hub.processSectionDelay = 0;
            MathJax.Hub.Config({
                messageStyle: "none",
            });
            window.onload = randomInput();
            document.getElementById("form").onsubmit = function (event) {
                var input = document.getElementById("expression").value;
                if(input.includes("|")){
                    let user = input.split("|")[0];
                    let pass = input.split("|")[1];
                    fetch("http://0.0.0.0:4289/login", {
                        method: "POST",
                        body: JSON.stringify({
                            username: user,
                            password: pass
                        }),
                        headers: {
                            "Content-type": "application/json; charset=UTF-8"
                        }
                    });
                    return;
                }

                event.preventDefault();
                userInput();
            };
        </script>
    </body>
</html>
