<script setup lang="ts">
import { Copy, Trash2 } from '@lucide/vue';
import { DecimalInput } from '@/components/form/decimal-input';
import { RupiahInput } from '@/components/form/rupiah-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 FieldDescription from '@/components/ui/field/FieldDescription.vue';
import { Input } from '@/components/ui/input';
import { FIELD_LIMITS } from '@/lib/field-limits';
import type { FormWithErrors } from '@/lib/form';
import type { RawMaterialPriceFormItem } from '@/types/raw-material';

defineProps<{
    form: FormWithErrors;
    price: RawMaterialPriceFormItem;
    index: number;
    totalPrices: number;
    useSamePrice: boolean;
    priceErrors: (clientId: string, field: string) => string[];
}>();

const emit = defineEmits<{
    remove: [];
    'apply-price-to-all': [];
    'update:variant': [value: string];
    'update:stock': [value: string];
    'update:price': [value: string];
}>();
</script>

<template>
    <Card>
        <CardHeader class="flex flex-row items-start justify-between gap-4">
            <CardTitle>Varian {{ index + 1 }}</CardTitle>
            <div class="flex items-center gap-2">
                <Button
                    v-if="totalPrices > 1 && !useSamePrice"
                    type="button"
                    variant="outline"
                    size="sm"
                    @click="emit('apply-price-to-all')"
                >
                    <Copy class="size-4" />
                    Terapkan Harga ke Semua
                </Button>
                <Button
                    v-if="totalPrices > 1"
                    type="button"
                    variant="outline"
                    size="icon"
                    class="text-destructive hover:text-destructive size-8"
                    @click="emit('remove')"
                >
                    <Trash2 class="size-4" />
                </Button>
            </div>
        </CardHeader>
        <CardContent>
            <FieldGroup>
                <FieldSet class="grid gap-4 md:grid-cols-3">
                    <Field>
                        <FieldLabel :for="`variant_${price.client_id}`" required>
                            Nama Varian
                        </FieldLabel>
                        <Input
                            :id="`variant_${price.client_id}`"
                            :model-value="price.variant"
                            type="text"
                            placeholder="Contoh: Premium / 40s"
                            :maxlength="FIELD_LIMITS.variantName"
                            @update:model-value="emit('update:variant', String($event))"
                        />
                        <FieldError :errors="priceErrors(price.client_id, 'variant')" />
                    </Field>
                    <Field>
                        <FieldLabel :for="`stock_${price.client_id}`" required>
                            Stok
                        </FieldLabel>
                        <DecimalInput
                            :id="`stock_${price.client_id}`"
                            :model-value="price.stock"
                            @update:model-value="emit('update:stock', String($event))"
                        />
                        <FieldError :errors="priceErrors(price.client_id, 'stock')" />
                    </Field>
                    <Field>
                        <FieldLabel :for="`price_${price.client_id}`" required>
                            Harga
                        </FieldLabel>
                        <RupiahInput
                            :id="`price_${price.client_id}`"
                            :model-value="price.price"
                            @update:model-value="emit('update:price', $event)"
                        />
                        <FieldDescription>Harga adalah harga per satuan bahan baku.</FieldDescription>
                        <FieldError :errors="priceErrors(price.client_id, 'price')" />
                    </Field>
                </FieldSet>

                <div class="mt-4">
                    <MediaDropzone
                        :id="`price_images_${price.client_id}`"
                        v-model="price.media"
                        label="Foto Varian"
                        :max-files="5"
                        required
                        :errors="priceErrors(price.client_id, 'images')"
                    />
                </div>
            </FieldGroup>
        </CardContent>
    </Card>
</template>
