<script setup lang="ts">
import {
    Field,
    FieldError,
    FieldGroup,
    FieldLabel,
    FieldSet,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { FIELD_LIMITS } from '@/lib/field-limits';
import { formErrors, type FormWithErrors } from '@/lib/form';
import type { EnumOption } from '@/types/raw-material';

defineProps<{
    form: FormWithErrors & { name: string; unit: string };
    units: EnumOption[];
    method: 'post' | 'put';
}>();
</script>

<template>
    <Card>
        <CardHeader>
            <CardTitle>Informasi Bahan Baku</CardTitle>
        </CardHeader>
        <CardContent>
            <FieldGroup>
                <FieldSet :class="['grid gap-4', method === 'put' ? 'md:grid-cols-1' : 'md:grid-cols-2']">
                    <Field>
                        <FieldLabel for="name" required>Nama Bahan Baku</FieldLabel>
                        <Input
                            id="name"
                            v-model="form.name"
                            type="text"
                            placeholder="Contoh: Kain Katun Premium"
                            :maxlength="FIELD_LIMITS.name"
                        />
                        <FieldError :errors="formErrors(form, 'name')" />
                    </Field>

                    <Field v-if="method !== 'put'">
                        <FieldLabel for="unit" required>Satuan</FieldLabel>
                        <Select v-model="form.unit">
                            <SelectTrigger id="unit" class="w-full">
                                <SelectValue placeholder="Pilih satuan" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem v-for="option in units" :key="option.value" :value="option.value">
                                    {{ option.label }}
                                </SelectItem>
                            </SelectContent>
                        </Select>
                        <FieldError :errors="formErrors(form, 'unit')" />
                    </Field>
                </FieldSet>
            </FieldGroup>
        </CardContent>
    </Card>
</template>
