<script setup lang="ts">
import { Trash2 } from '@lucide/vue';
import { NumberInput } from '@/components/form/number-input';
import MediaDropzone from '@/components/media/MediaDropzone.vue';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
    Field,
    FieldError,
    FieldGroup,
    FieldLabel,
    FieldSet,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { FIELD_LIMITS } from '@/lib/field-limits';
import type { ProductVariantFormItem } from '@/types/product';
import type { MediaUploadState } from '@/types/media';

defineProps<{
    form: {
        errors: Record<string, string>;
    };
    variant: ProductVariantFormItem;
    index: number;
    canRemove: boolean;
    variantErrors: (clientId: string, field: string) => string[];
}>();

const emit = defineEmits<{
    remove: [];
    'update:name': [value: string];
    'update:stock': [value: string];
    'update:retail-stock': [value: string];
    'update:media': [value: MediaUploadState];
}>();
</script>

<template>
    <Card>
        <CardHeader class="flex flex-row items-start justify-between gap-4">
            <CardTitle>Varian {{ index + 1 }}</CardTitle>
            <Button
                v-if="canRemove"
                type="button"
                variant="outline"
                size="icon"
                class="text-destructive hover:text-destructive size-8"
                @click="emit('remove')"
            >
                <Trash2 class="size-4" />
            </Button>
        </CardHeader>
        <CardContent>
            <FieldGroup>
                <FieldSet class="grid gap-4 md:grid-cols-3">
                    <Field>
                        <FieldLabel :for="`variant_name_${variant.client_id}`" required>
                            Nama Varian
                        </FieldLabel>
                        <Input
                            :id="`variant_name_${variant.client_id}`"
                            :model-value="variant.name"
                            type="text"
                            placeholder="Contoh: Polkadot"
                            :maxlength="FIELD_LIMITS.variantName"
                            @update:model-value="emit('update:name', String($event))"
                        />
                        <FieldError :errors="variantErrors(variant.client_id, 'name')" />
                    </Field>
                    <Field>
                        <FieldLabel :for="`variant_stock_${variant.client_id}`" required>
                            Stok
                        </FieldLabel>
                        <NumberInput
                            :id="`variant_stock_${variant.client_id}`"
                            :model-value="variant.stock"
                            @update:model-value="emit('update:stock', String($event))"
                        />
                        <FieldError :errors="variantErrors(variant.client_id, 'stock')" />
                    </Field>
                    <Field>
                        <FieldLabel :for="`variant_retail_stock_${variant.client_id}`" required>
                            Stok Ecer
                        </FieldLabel>
                        <NumberInput
                            :id="`variant_retail_stock_${variant.client_id}`"
                            :model-value="variant.retail_stock"
                            @update:model-value="emit('update:retail-stock', String($event))"
                        />
                        <FieldError :errors="variantErrors(variant.client_id, 'retail_stock')" />
                    </Field>
                </FieldSet>

                <div>
                    <MediaDropzone
                        :id="`variant_images_${variant.client_id}`"
                        :model-value="variant.media"
                        label="Foto Varian"
                        :max-files="5"
                        required
                        :errors="variantErrors(variant.client_id, 'images')"
                        @update:model-value="emit('update:media', $event)"
                    />
                </div>
            </FieldGroup>
        </CardContent>
    </Card>
</template>
