<script setup>
import InputError from "@/components/InputError.vue";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import AppLayout from "@/layouts/AppLayout.vue";
import { Head, useForm } from "@inertiajs/vue3";

const props = defineProps({
    server: { type: Object, required: true },
    service: { type: Object, required: true },
});

const form = useForm({
    name: props.service.name,
    desired_replicas: props.service.desired_replicas,
    default_cpu_limit: props.service.default_cpu_limit,
    default_memory_limit_mb: props.service.default_memory_limit_mb,
});
</script>

<template>
    <Head :title="`Edit ${service.name}`" />

    <AppLayout
        :breadcrumbs="[
            {
                title: 'Servers',
                href: route('servers.index', { organisation: $page.props.organisation.id }),
            },
            {
                title: server.name,
                href: route('servers.show', {
                    organisation: $page.props.organisation.id,
                    server: server.id,
                }),
            },
            {
                title: service.name,
                href: route('services.show', {
                    organisation: $page.props.organisation.id,
                    server: server.id,
                    service: service.id,
                }),
            },
            { title: 'Edit' },
        ]"
    >
        <form
            class="flex h-full max-w-2xl flex-1 flex-col gap-5 p-4"
            @submit.prevent="
                form.put(
                    route('services.update', {
                        organisation: $page.props.organisation.id,
                        server: server.id,
                        service: service.id,
                    }),
                )
            "
        >
            <h2 class="text-3xl font-bold tracking-tight">Edit {{ service.name }}</h2>

            <div class="grid gap-2">
                <Label for="name">Name</Label>
                <Input id="name" v-model="form.name" type="text" required />
                <InputError :message="form.errors.name" />
            </div>

            <div class="grid gap-4 md:grid-cols-3">
                <div class="grid gap-2">
                    <Label for="desired_replicas">Replicas</Label>
                    <Input
                        id="desired_replicas"
                        v-model="form.desired_replicas"
                        type="number"
                        min="0"
                        max="25"
                    />
                    <InputError :message="form.errors.desired_replicas" />
                </div>
                <div class="grid gap-2">
                    <Label for="default_cpu_limit">CPU</Label>
                    <Input
                        id="default_cpu_limit"
                        v-model="form.default_cpu_limit"
                        type="number"
                        min="0.125"
                        max="64"
                        step="0.125"
                    />
                    <InputError :message="form.errors.default_cpu_limit" />
                </div>
                <div class="grid gap-2">
                    <Label for="default_memory_limit_mb">Memory MB</Label>
                    <Input
                        id="default_memory_limit_mb"
                        v-model="form.default_memory_limit_mb"
                        type="number"
                        min="64"
                        max="1048576"
                    />
                    <InputError :message="form.errors.default_memory_limit_mb" />
                </div>
            </div>

            <div class="flex justify-end">
                <Button type="submit" :disabled="form.processing">Save</Button>
            </div>
        </form>
    </AppLayout>
</template>
