<script lang="ts">
    import A4 from "../../zhen/notes/physics/sharedComps/A4.svelte";
    import { BatteryLifeCalculator } from "./pageSrc/BatteryCalc";
    import { getMCU, type MCU_Type } from "./pageSrc/MCU_defs";

    // let mathMachine = new BatteryLifeCalculator();

    let useCustom: boolean = false;
    let selectedText: string = "";
    let selectedMcu: MCU_Type | undefined = undefined;
    $: selectedMcu = getMCU(selectedText)
    


    const options = ["esp32-s3", "esp32-s3"];
</script>

<div class="flex justify-center pt-10">
    <A4
        bottomBorder={false}
        bgColor={"rounded-lg bg-base-300"}
        class="cozette text-base-content h-full"
    >
        <div class="p-4 flex flex-col h-full">
            <h1 class="text-5xl font-bold">Battery life calculator</h1>
            <span class="w-full text-xl">
                Calculates the time a battery will last. Too lazy to explain
                more.
            </span>

            <!-- Spacing -->
            <div class="pt-14"></div>

            <div class="p-4 bg-base-200 rounded-lg">
                <h2 class="text-2xl font-bolc">Software</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div class="form-control">
                        <span class="text-sm text-slate-300 text-opacity-60"
                            >Duration of code execution</span
                        >
                        <div class="join">
                            <input
                                type="number"
                                class="input input-bordered  input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                            />
                            <div
                                class="bg-base-content bg-opacity-60 join-item grid place-content-center"
                            >
                                <span class="text-center pl-1 pr-2">sec</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-control">
                        <span class="text-sm text-slate-300 text-opacity-60"
                            >sleep time</span
                        >
                        <div class="join">
                            <input
                                type="number"
                                class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                            />
                            <div
                                class="bg-base-content bg-opacity-60 join-item grid place-content-center"
                            >
                                <span class="text-center pl-1 pr-2">sec</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-span-full">
                        <h2 class=" text-2xl font-bolc">Hardware</h2>
                        <div class="flex">
                            <div
                                class="text-sm text-slate-300 text-opacity-60 text"
                            >
                                Use custom values
                            </div>
                            <input
                                bind:checked={useCustom}
                                class="ml-2 checkbox checkbox-xs my-auto"
                                type="checkbox" 
                            />
                        </div>
                    </div>

                    {#if !useCustom}
                        <div>
                            <select
                                bind:value={selectedText}
                                class="select select-sm select-bordered w-56 max-w-xs"
                            >
                                <option disabled value="">Select a text</option>
                                {#each options as option}
                                    <option value={option}>{option}</option>
                                {/each}
                            </select>

                            {#if selectedMcu != undefined && selectedMcu?.wifi != undefined}
                                <p class="mt-4 text-lg">
                                    wifi
                                </p>
                            {/if}
                            {#if selectedMcu != undefined && selectedMcu?.wifi != undefined}
                                <p class="mt-4 text-lg">
                                    ble
                                </p>
                            {/if}
                        </div>
                    {:else}
                        <div class="form-control">
                            <span class="text-sm text-slate-300 text-opacity-60"
                                >Duration of code execution</span
                            >
                            <div class="join">
                                <input
                                    type="number"
                                    class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                                />
                                <div
                                    class="bg-base-content bg-opacity-60 join-item grid place-content-center"
                                >
                                    <span class="text-center pl-1 pr-2"
                                        >sec</span
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="form-control">
                            <span class="text-sm text-slate-300 text-opacity-60"
                                >sleep time</span
                            >
                            <div class="join">
                                <input
                                    type="number"
                                    class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                                />
                                <div
                                    class="bg-base-content bg-opacity-60 join-item grid place-content-center"
                                >
                                    <span class="text-center pl-1 pr-2"
                                        >sec</span
                                    >
                                </div>
                            </div>
                        </div>
                    {/if}
                </div>
            </div>

            <div class="mt-auto align-text-bottom text-center">
                Source for the calculations is at this
                <a
                    class="text-blue-500 underline"
                    target="_blank"
                    href="https://github.com/simonneutert/batterylife-calculator"
                    >github</a
                >
                and the
                <a
                    class="text-blue-500 underline"
                    target="_blank  "
                    href="https://www.of-things.de/battery-life-calculator.php"
                    >original website.</a
                >
                I just mearly made additions.
            </div>
        </div>
    </A4>
</div>

<style>
    /* Hide the spinner for Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Hide the spinner for Firefox */
    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>