<script setup lang="ts">
import {
    Field,
    FieldError,
    FieldGroup,
    FieldLabel,
    FieldSet,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { FIELD_LIMITS } from '@/lib/field-limits';
import { formErrors } from '@/lib/form';
import type { CategoryOption } from '@/types/product';

defineProps<{
    form: {
        name: string;
        description: string;
        category_ids: number[];
        errors: Record<string, string>;
    };
    categories: CategoryOption[];
    categoryError?: string;
}>();

const emit = defineEmits<{
    'update:name': [value: string];
    'update:description': [value: string];
    'toggle-category': [categoryId: number, checked: boolean];
}>();

function isCategoryChecked(categoryIds: number[], categoryId: number): boolean {
    return categoryIds.includes(categoryId);
}
</script>

<template>
    <FieldGroup>
        <FieldSet class="grid gap-4">
            <Field>
                <FieldLabel for="name" required>Nama Produk</FieldLabel>
                <Input
                    id="name"
                    :model-value="form.name"
                    type="text"
                    placeholder="Contoh: Midi Olla Dress"
                    :maxlength="FIELD_LIMITS.name"
                    @update:model-value="emit('update:name', String($event))"
                />
                <FieldError :errors="formErrors(form, 'name')" />
            </Field>

            <Field>
                <FieldLabel for="description">Deskripsi</FieldLabel>
                <Textarea
                    id="description"
                    :model-value="form.description"
                    placeholder="Contoh: Hi Sobat, New arrival dari DST dengan Olla Dress. Yuks check detail produk: Detail: * Bahan Cey Flow Bordir * Ld 120 cm * PB 110 cm * Bisa jadi dress..."
                    rows="4"
                    @update:model-value="emit('update:description', String($event))"
                />
                <FieldError :errors="formErrors(form, 'description')" />
            </Field>

            <Field>
                <FieldLabel required>Kategori</FieldLabel>
                <div
                    v-if="categories.length > 0"
                    class="grid gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
                >
                    <label
                        v-for="category in categories"
                        :key="category.value"
                        class="flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2"
                    >
                        <input
                            type="checkbox"
                            class="size-4 rounded border-input"
                            :checked="isCategoryChecked(form.category_ids, category.value)"
                            @change="emit('toggle-category', category.value, ($event.target as HTMLInputElement).checked)"
                        >
                        <span class="text-sm">{{ category.label }}</span>
                    </label>
                </div>
                <p v-else class="text-muted-foreground text-sm">
                    Belum ada kategori. Tambahkan kategori terlebih dahulu.
                </p>
                <FieldError :errors="categoryError ? [categoryError] : []" />
            </Field>
        </FieldSet>
    </FieldGroup>
</template>
