<script setup lang="ts">
import { Plus } from '@lucide/vue';
import { Button } from '@/components/ui/button';
import {
    Field,
    FieldError,
    FieldLabel,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { OrderChannel } from '@/constants/order-channel';
import { formErrors } from '@/lib/form';
import type { FormWithErrors } from '@/lib/form';
import type { EnumOption, SelectOption } from '@/types/order';

defineProps<{
    form: FormWithErrors & {
        channel: string;
        price_type: string;
        payment_type: string;
        is_affiliate: boolean;
        tiktok_order_id: string;
        shopee_order_id: string;
        customer_id: string;
        marketing_id: string;
    };
    channels: EnumOption[];
    storePriceTypes: EnumOption[];
    paymentTypes: EnumOption[];
    customers: SelectOption[];
    marketings: SelectOption[];
    isCashierUser: boolean;
    isStoreChannel: boolean;
    isMarketplaceChannel: boolean;
    isMarketingUser: boolean;
    canCreateCustomer: boolean;
}>();

const emit = defineEmits<{
    'open-customer-form': [];
}>();
</script>

<template>
    <Field v-if="!isCashierUser">
        <FieldLabel for="channel" required>Channel</FieldLabel>
        <Select v-model="form.channel">
            <SelectTrigger id="channel" class="w-full">
                <SelectValue placeholder="Pilih channel" />
            </SelectTrigger>
            <SelectContent>
                <SelectGroup>
                    <SelectItem v-for="channel in channels" :key="channel.value" :value="channel.value">
                        {{ channel.label }}
                    </SelectItem>
                </SelectGroup>
            </SelectContent>
        </Select>
        <FieldError :errors="formErrors(form, 'channel')" />
    </Field>

    <Field v-if="isStoreChannel && !isCashierUser">
        <FieldLabel for="price_type" required>Tipe Harga</FieldLabel>
        <Select v-model="form.price_type">
            <SelectTrigger id="price_type" class="w-full">
                <SelectValue placeholder="Pilih tipe harga" />
            </SelectTrigger>
            <SelectContent>
                <SelectGroup>
                    <SelectItem v-for="priceType in storePriceTypes" :key="priceType.value" :value="priceType.value">
                        {{ priceType.label }}
                    </SelectItem>
                </SelectGroup>
            </SelectContent>
        </Select>
        <FieldError :errors="formErrors(form, 'price_type')" />
    </Field>

    <Field v-if="!isStoreChannel && !isCashierUser">
        <FieldLabel>Tipe Harga</FieldLabel>
        <div class="flex h-9 items-center rounded-md border bg-muted/40 px-3 text-sm">
            {{ form.channel === OrderChannel.SHOPEE ? 'Shopee' : 'TikTok' }}
        </div>
    </Field>

    <Field v-if="form.channel === OrderChannel.TIKTOK && !isCashierUser">
        <FieldLabel for="tiktok_order_id" :required="form.channel === OrderChannel.TIKTOK">
            ID Pesanan TikTok Shop
        </FieldLabel>
        <Input id="tiktok_order_id" v-model="form.tiktok_order_id" placeholder="Masukkan ID pesanan TikTok Shop" />
        <FieldError :errors="formErrors(form, 'tiktok_order_id')" />
    </Field>

    <Field v-if="form.channel === OrderChannel.SHOPEE && !isCashierUser">
        <FieldLabel for="shopee_order_id" :required="form.channel === OrderChannel.SHOPEE">
            ID Pesanan Shopee
        </FieldLabel>
        <Input id="shopee_order_id" v-model="form.shopee_order_id" placeholder="Masukkan ID pesanan Shopee" />
        <FieldError :errors="formErrors(form, 'shopee_order_id')" />
    </Field>

    <Field v-if="!isCashierUser">
        <FieldLabel for="payment_type" required>Tipe Pembayaran</FieldLabel>
        <Select v-model="form.payment_type" :disabled="isMarketplaceChannel">
            <SelectTrigger id="payment_type" class="w-full">
                <SelectValue placeholder="Pilih tipe pembayaran" />
            </SelectTrigger>
            <SelectContent>
                <SelectGroup>
                    <SelectItem v-for="pt in paymentTypes" :key="pt.value" :value="pt.value">
                        {{ pt.label }}
                    </SelectItem>
                </SelectGroup>
            </SelectContent>
        </Select>
        <FieldError :errors="formErrors(form, 'payment_type')" />
    </Field>

    <Field v-if="isMarketplaceChannel && !isCashierUser">
        <div class="flex items-center gap-3">
            <Switch id="is_affiliate" :model-value="form.is_affiliate" @update:model-value="form.is_affiliate = $event" />
            <FieldLabel for="is_affiliate" class="cursor-pointer">Pesanan Afiliasi</FieldLabel>
        </div>
        <p class="text-xs text-muted-foreground">
            Aktifkan jika pesanan ini melalui afiliasi. Biaya afiliasi akan dikenakan sesuai pengaturan marketplace.
        </p>
    </Field>

    <Field v-if="!isCashierUser">
        <FieldLabel for="customer">Pelanggan</FieldLabel>
        <div class="flex gap-2">
            <Select v-model="form.customer_id" class="flex-1">
                <SelectTrigger id="customer" class="w-full">
                    <SelectValue placeholder="Pilih pelanggan" />
                </SelectTrigger>
                <SelectContent>
                    <SelectGroup>
                        <SelectItem v-for="customer in customers" :key="customer.value" :value="String(customer.value)">
                            {{ customer.label }}
                        </SelectItem>
                    </SelectGroup>
                </SelectContent>
            </Select>
            <Button
                v-if="canCreateCustomer"
                type="button"
                variant="outline"
                size="icon"
                class="shrink-0"
                @click="emit('open-customer-form')"
            >
                <Plus class="size-4" />
            </Button>
        </div>
        <FieldError :errors="formErrors(form, 'customer_id')" />
    </Field>

    <Field>
        <FieldLabel for="marketing">Marketing</FieldLabel>
        <Select v-model="form.marketing_id" :disabled="isMarketingUser">
            <SelectTrigger id="marketing" class="w-full">
                <SelectValue placeholder="Pilih marketing" />
            </SelectTrigger>
            <SelectContent>
                <SelectGroup>
                    <SelectItem value="none">Pilih marketing</SelectItem>
                    <SelectItem v-for="marketing in marketings" :key="marketing.value" :value="String(marketing.value)">
                        {{ marketing.label }}
                    </SelectItem>
                </SelectGroup>
            </SelectContent>
        </Select>
        <p v-if="isMarketingUser" class="text-xs text-muted-foreground">
            Otomatis tercatat atas nama Anda.
        </p>
        <FieldError :errors="formErrors(form, 'marketing_id')" />
    </Field>
</template>
