<script setup lang="ts">
import { computed } from 'vue';
import {
    Field,
    FieldError,
    FieldLabel,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { RupiahInput } from '@/components/form/rupiah-input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import type { MarketplaceFeeRule } from '@/types/setting';

const props = defineProps<{
    id: string;
    label: string;
    modelValue: MarketplaceFeeRule;
    errors?: string[];
}>();

const emit = defineEmits<{
    (event: 'update:modelValue', value: MarketplaceFeeRule): void;
}>();

const isPercent = computed(() => props.modelValue.value_type === 'percent');

function update(partial: Partial<MarketplaceFeeRule>) {
    emit('update:modelValue', {
        ...props.modelValue,
        ...partial,
    });
}

function updateValue(value: string | number) {
    update({
        value: props.modelValue.value_type === 'flat'
            ? Number(value) || 0
            : Number(value),
    });
}
</script>

<template>
    <Field class="sm:col-span-2">
        <FieldLabel :for="`${id}-value`">{{ label }}</FieldLabel>

        <div class="grid gap-3 sm:grid-cols-3">
            <Field>
                <FieldLabel :for="`${id}-scope`" class="text-xs text-muted-foreground">
                    Dasar
                </FieldLabel>
                <Select
                    :model-value="modelValue.scope"
                    @update:model-value="update({ scope: $event as MarketplaceFeeRule['scope'] })"
                >
                    <SelectTrigger :id="`${id}-scope`">
                        <SelectValue placeholder="Pilih dasar" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="transaction">
                            Per Transaksi
                        </SelectItem>
                        <SelectItem value="product">
                            Per Produk
                        </SelectItem>
                    </SelectContent>
                </Select>
            </Field>

            <Field>
                <FieldLabel :for="`${id}-value-type`" class="text-xs text-muted-foreground">
                    Tipe
                </FieldLabel>
                <Select
                    :model-value="modelValue.value_type"
                    @update:model-value="update({ value_type: $event as MarketplaceFeeRule['value_type'] })"
                >
                    <SelectTrigger :id="`${id}-value-type`">
                        <SelectValue placeholder="Pilih tipe" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="percent">
                            Persentase (%)
                        </SelectItem>
                        <SelectItem value="flat">
                            Flat (Rp)
                        </SelectItem>
                    </SelectContent>
                </Select>
            </Field>

            <Field>
                <FieldLabel :for="`${id}-value`" class="text-xs text-muted-foreground">
                    Nilai
                </FieldLabel>
                <RupiahInput
                    v-if="!isPercent"
                    :id="`${id}-value`"
                    :model-value="modelValue.value"
                    placeholder="0"
                    @update:model-value="updateValue"
                />
                <Input
                    v-else
                    :id="`${id}-value`"
                    :model-value="modelValue.value"
                    type="number"
                    step="0.01"
                    min="0"
                    max="100"
                    @update:model-value="updateValue"
                />
            </Field>
        </div>

        <FieldError :errors="errors" />
    </Field>
</template>
