<script lang="ts">
    import { vehicles, type VehicleData } from "./vehicles";
    let lengthVal: number = $state(0);
    let vehicleVal: number = $state(0);
    let vehicleId: string = $state(vehicles[0].id);
    let calcVal: string = $state("");
    let outputText: string = $state("");

    function getVehicle(id: string): VehicleData {
        // dumbass javascript can't break out of a forEach loop so we need for-of here
        for (let v of vehicles) {
            if (v.id === id) {
                return v;
            }
        };
        return vehicles[0];
    }

    function getVehicleAlt(id: string): string {
        let v = getVehicle(id);
        return `A ${v.name} ${v.type} photographed by ${v.imgCredit}.`
    }

    function getPluralFragments(length: string | number, type: string): string[] {
        let l: number = 0;
        if (typeof(length) === "string") {
            l = Number(length);
        } else {
            l = length;
        }
        if (l === 1.0) {
            return ["", "is"];
        } else {
            if (type == "bus") {
                return ["es", "are"];
            } else {
                return ["s", "are"];
            }
        }
    }

    function calcToVehicles() {
        let vehicle = getVehicle(vehicleId);
        calcVal = ((lengthVal * 1000) / vehicle.length).toFixed(2);
        vehicleVal = Number(calcVal);

        let vehicleFragments = getPluralFragments(vehicleVal, vehicle.type);
        let lengthFragments = getPluralFragments(lengthVal, "");

        outputText = `${Number(lengthVal)} metre${lengthFragments[0]} is equal to the length of ${vehicleVal} ${vehicle.name} ${vehicle.type}${vehicleFragments[0]}!`
    }

    function calcToLength() {
        let vehicle = getVehicle(vehicleId);
        calcVal = (vehicleVal * (vehicle.length / 1000)).toFixed(2);
        lengthVal = Number(calcVal);

        let vehicleFragments = getPluralFragments(vehicleVal, vehicle.type);
        let lengthFragments = getPluralFragments(lengthVal, "");

        outputText = `${Number(vehicleVal)} ${vehicle.name} ${vehicle.type}${vehicleFragments[0]} ${vehicleFragments[1]} ${lengthVal} metre${lengthFragments[0]} long!`
    }
</script>

<svelte:head>
    <meta charset="utf-8" />
    <!-- <link rel="icon" href="%sveltekit.assets%/favicon.webp" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</svelte:head>

<h1>bsag conv</h1>

<div class="split-container">
    <div class="length-input-container">
        <div class="half-split-container">
            <input bind:value={lengthVal}>
            <p>metre(s)</p>
        </div>
    </div>

    <div class="button-container">
        <div class="wide-buttons">
            <button onclick={() => calcToVehicles()}>→</button>
            <button onclick={() => calcToLength()}>←</button>
        </div>
        <div class="slim-buttons">
            <button onclick={() => calcToVehicles()}>↓</button>
            <button onclick={() => calcToLength()}>↑</button>
        </div>
    </div>

    <div class="vehicle-input-container">
        <select name="vehicle" id="vehicle" bind:value={vehicleId}>
            {#each vehicles as vehicle}
                <option value="{vehicle.id}">{vehicle.name}</option>
            {/each}
        </select>

        <div class="half-split-container">
            <input bind:value={vehicleVal}>
            <p>vehicle(s)</p>
        </div>
    </div>
</div>


<div class="img-container">
    <img src="{getVehicle(vehicleId).img}" alt="{getVehicleAlt(vehicleId)}">
    <p class="img-credit">image credit: {getVehicle(vehicleId).imgCredit}</p>
</div>

<p>{outputText}</p>

<p class="credit-text">Unless credited to denizk0461 (me), all images courtesy of their respective displayed photographers. Images and vehicle information sourced from <a href="https://wiki.bre-forum.de">wiki.bre-forum.de</a></p>

<style>
    @font-face {
        font-family: "Bai Jamjuree";
        src: url("/fonts/bai-jamjuree/extralight.ttf");
        font-weight: 200;
    }
    @font-face {
        font-family: "Bai Jamjuree";
        src: url("/fonts/bai-jamjuree/extralight-italic.ttf");
        font-weight: 200;
        font-style: italic;
    }
    @font-face {
        font-family: "Bai Jamjuree";
        src: url("/fonts/bai-jamjuree/light.ttf");
        font-weight: 300;
    }
    @font-face {
        font-family: "Bai Jamjuree";
        src: url("/fonts/bai-jamjuree/light-italic.ttf");
        font-weight: 300;
        font-style: italic;
    }
    @font-face {
        font-family: "Bai Jamjuree";
        src: url("/fonts/bai-jamjuree/regular.ttf");
        font-weight: 400;
    }
    @font-face {
        font-family: "Bai Jamjuree";
        src: url("/fonts/bai-jamjuree/italic.ttf");
        font-weight: 400;
        font-style: italic;
    }
    @font-face {
        font-family: "Bai Jamjuree";
        src: url("/fonts/bai-jamjuree/medium.ttf");
        font-weight: 500;
    }
    @font-face {
        font-family: "Bai Jamjuree";
        src: url("/fonts/bai-jamjuree/medium-italic.ttf");
        font-weight: 500;
        font-style: italic;
    }
    @font-face {
        font-family: "Bai Jamjuree";
        src: url("/fonts/bai-jamjuree/semibold.ttf");
        font-weight: 600;
    }
    @font-face {
        font-family: "Bai Jamjuree";
        src: url("/fonts/bai-jamjuree/semibold-italic.ttf");
        font-weight: 600;
        font-style: italic;
    }
    @font-face {
        font-family: "Bai Jamjuree";
        src: url("/fonts/bai-jamjuree/bold.ttf");
        font-weight: bold;
    }
    @font-face {
        font-family: "Bai Jamjuree";
        src: url("/fonts/bai-jamjuree/bold-italic.ttf");
        font-weight: bold;
        font-style: italic;
    }

    :root {
        --color-bsag-red: #FF0000;
        --color-bsag-red-bg: color-mix(in srgb, var(--color-bsag-red) 20%, transparent);
        --color-bsag-red-bg-hover: color-mix(in srgb, var(--color-bsag-red) 60%, transparent);

        --color-bg: #1f1f1f;
        --color-text: #e0e0e0;

        background-color: var(--color-bg);

        max-width: 800px;
        interpolate-size: allow-sizes;
    }

    p, h1, h2, h3, h4, h5, h6 {
        color: var(--color-text);
        font-family: 'Bai Jamjuree', sans-serif;
    }

    .split-container {
        display: flex;
        gap: 8px;
        flex-direction: row;
        box-sizing: border-box;
    }

    .length-input-container, .vehicle-input-container {
        flex: 2;
    }

    .half-split-container {
        display: grid;
        gap: 16px;
        box-sizing: border-box;
        grid-template-columns: 1fr 1fr;
    }
    .half-split-container * {
        width: 100%;
    }

    input {
        font-size: 1.1rem;
    }

    .button-container {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .wide-buttons, .slim-buttons {
        gap: 8px;
    }

    button {
        font-size: 1.5rem;
        padding: 8px;
        border: dashed var(--color-bsag-red) 2px;
        color: var(--color-text);
        background-color: var(--color-bsag-red-bg);
    }
    button:hover {
        background-color: var(--color-bsag-red-bg-hover);
        cursor: pointer;
    }

    .wide-buttons {
        display: flex;
        flex-direction: column;
    }

    .slim-buttons {
        display: none;
        flex-direction: row;
    }
    .slim-buttons button {
        flex: 1;
    }

    .img-container {
        position: relative;
        max-width: 80%;
        height: 400px;
        margin: 12px auto;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .img-credit {
        position: absolute;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 4px 6px;
        color: var(--color-text);
        background-color: var(--color-bsag-red-bg-hover);
    }

    .credit-text, .credit-text a {
        font-size: 0.9rem;
        color: #999;
    }

    .credit-text a {
        text-decoration: dashed 1px underline;
    }

    @media screen and (max-width: 666px) {
        .split-container {
            flex-direction: column;
        }

        .img-container {
            height: 300px;
        }

        .wide-buttons {
            display: none;
        }

        .slim-buttons {
            display: flex;
        }
    }
    @media screen and (max-width: 540px) {
        .img-container {
            height: 200px;
        }
    }
</style>