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

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

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

const isPercent = computed(() => props.modelValue.value_type === MarketplaceFeeValueType.PERCENT);

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

function updateValue(value: string | number) {
    update({
        value: props.modelValue.value_type === MarketplaceFeeValueType.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"
                    :disabled="disabled"
                    @update:model-value="update({ scope: $event as MarketplaceFeeRule['scope'] })">
                    <SelectTrigger :id="`${id}-scope`">
                        <SelectValue placeholder="Pilih dasar" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem :value="MarketplaceFeeScope.TRANSACTION">
                            Per Transaksi
                        </SelectItem>
                        <SelectItem :value="MarketplaceFeeScope.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"
                    :disabled="disabled"
                    @update:model-value="update({ value_type: $event as MarketplaceFeeRule['value_type'] })">
                    <SelectTrigger :id="`${id}-value-type`">
                        <SelectValue placeholder="Pilih tipe" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem :value="MarketplaceFeeValueType.PERCENT">
                            Persentase (%)
                        </SelectItem>
                        <SelectItem :value="MarketplaceFeeValueType.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"
                    :disabled="disabled"
                    @update:model-value="updateValue" />
                <Input v-else :id="`${id}-value`" :model-value="modelValue.value" type="number" step="0.01" min="0"
                    max="100" :disabled="disabled" @update:model-value="updateValue" />
            </Field>
        </div>

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