<svelte:options runes />

<script>
    import {applyUnits, Localization} from "$lib/constants";
    import {Separator} from "$lib/components/ui/separator";
    import NewInventory from "$lib/components/NewInventory.svelte";
    import InventoryList from "$lib/components/InventoryList.svelte";
    import {Label} from "$lib/components/ui/label";
    import {Input} from "$lib/components/ui/input";
    import * as Card from "$lib/components/ui/card";
    import NewThruster from "$lib/components/NewThruster.svelte";
    import ThrusterList from "$lib/components/ThrusterList.svelte";

    let { i18n = new Localization("en-GB"), ship, atmosphericDensity, onAddThruster, onRemoveThruster } = $props();

    let valid = $derived.by(() => {
        let valids = [];
        valids[0] = typeof ship !== "undefined";
        valids[1] = typeof atmosphericDensity !== "undefined";
        valids[2] = typeof onAddThruster !== "undefined";
        valids[3] = typeof onRemoveThruster !== "undefined";
        return !valids.includes(false);
    });

</script>

{#if valid}
    <Card.Root class="flex-1 flex flex-col flex-grow">
        <Card.Header>
            <Card.Title>{i18n.localize("thrusterSettings")}</Card.Title>
        </Card.Header>
        <Card.Content class="flex flex-col flex-grow gap-3">
            <Separator />
            <Card.Root>
                <Card.Content class="flex flex-col gap-3 pt-6">
                    <NewThruster i18n={i18n} {onAddThruster} />
                </Card.Content>
            </Card.Root>
            <Card.Root class="flex flex-col h-60 flex-grow">
                <Card.Header>
                    <Card.Title>{i18n.localize("thrusters")} ({applyUnits(i18n, ship.getTotalThrust(atmosphericDensity), "N")})</Card.Title>
                </Card.Header>
                <Card.Content class="flex flex-col gap-3 overflow-hidden">
                    <Separator />
                    <ThrusterList i18n={i18n} thrusters={ship.thrusters} {onRemoveThruster} grid={ship.grid} atmosphere={atmosphericDensity}/>
                </Card.Content>
            </Card.Root>
        </Card.Content>
    </Card.Root>
{/if}