<script lang="ts">
    import { Button } from "$lib/components/ui/button";
    import { Input } from "$lib/components/ui/input";
    import { Label } from "$lib/components/ui/label";
    import { Switch } from "$lib/components/ui/switch";
    import type { DeviceStatusValue } from "@pkg/logic/domains/device/data";

    let {
        fieldPrefix = "device-form",
        title = $bindable(""),
        version = $bindable(""),
        host = $bindable(""),
        containerId = $bindable(""),
        wsPort = $bindable(""),
        isActive = $bindable(false),
        inUse = $bindable(false),
        status = $bindable("offline" as DeviceStatusValue),
        submitLabel = "Save",
        submitting = false,
        showAdvanced = false,
        onsubmit,
        oncancel = undefined,
    }: {
        fieldPrefix?: string;
        title?: string;
        version?: string;
        host?: string;
        containerId?: string;
        wsPort?: string;
        isActive?: boolean;
        inUse?: boolean;
        status?: DeviceStatusValue;
        submitLabel?: string;
        submitting?: boolean;
        showAdvanced?: boolean;
        onsubmit: (event: Event) => void | Promise<void>;
        oncancel?: (() => void) | undefined;
    } = $props();
</script>

<form {onsubmit} class="space-y-4">
    <div class="space-y-2">
        <Label for={`${fieldPrefix}-title`}>Title</Label>
        <Input id={`${fieldPrefix}-title`} bind:value={title} required />
    </div>

    <div class="space-y-2">
        <Label for={`${fieldPrefix}-host`}>Host</Label>
        <Input id={`${fieldPrefix}-host`} bind:value={host} required />
    </div>

    <div class="space-y-2">
        <Label for={`${fieldPrefix}-version`}>Version</Label>
        <Input id={`${fieldPrefix}-version`} bind:value={version} required />
    </div>

    <div class="grid grid-cols-2 gap-4">
        <div class="space-y-2">
            <Label for={`${fieldPrefix}-containerId`}>Container ID</Label>
            <Input
                id={`${fieldPrefix}-containerId`}
                bind:value={containerId}
                required
            />
        </div>
        <div class="space-y-2">
            <Label for={`${fieldPrefix}-wsPort`}>WS Port</Label>
            <Input id={`${fieldPrefix}-wsPort`} bind:value={wsPort} required />
        </div>
    </div>

    <div class="flex flex-wrap items-center gap-4">
        <div class="flex items-center gap-2">
            <Switch id={`${fieldPrefix}-isActive`} bind:checked={isActive} />
            <Label for={`${fieldPrefix}-isActive`}>Active</Label>
        </div>

        {#if showAdvanced}
            <div class="flex items-center gap-2">
                <Switch id={`${fieldPrefix}-inUse`} bind:checked={inUse} />
                <Label for={`${fieldPrefix}-inUse`}>In Use</Label>
            </div>
        {/if}
    </div>

    {#if showAdvanced}
        <div class="space-y-2">
            <Label for={`${fieldPrefix}-status`}>Status</Label>
            <select
                id={`${fieldPrefix}-status`}
                bind:value={status}
                class="border-input bg-background ring-offset-background focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1"
            >
                <option value="online">online</option>
                <option value="offline">offline</option>
                <option value="busy">busy</option>
                <option value="error">error</option>
            </select>
        </div>
    {/if}

    <div class="flex justify-end gap-2">
        {#if oncancel}
            <Button variant="outline" type="button" onclick={oncancel}>
                Cancel
            </Button>
        {/if}
        <Button type="submit" disabled={submitting}>
            {submitting ? "Saving..." : submitLabel}
        </Button>
    </div>
</form>
