<script setup lang="ts">
// meta

const route = useRoute();

useSeoMeta({
    title: "ثبت سفارش",
});

definePageMeta({
    layout: "cart",
    middleware: ["check-is-logged-in", "check-has-selected-address"],
    prevPage: { name: "cart-delivery", label: "انتخاب آدرس" },
    nextPage: { name: "payment", label: "پرداخت" },
});

// state

const router = useRouter();

const paymentGateways = ref<PaymentGateway[]>([
    {
        id: 5,
        picture: "/img/gateways/zibal.png",
        title: "زیبال",
        type: "ZIBAL",
    },
]);

const selectedGateway = computed({
    get: () => {
        return !!route.query["gw"]
            ? paymentGateways.value.find((i) => i.type == route.query["gw"])
            : paymentGateways.value[0];
    },
    set: (nv: PaymentGateway) => router.replace({ query: { gw: nv.type } }),
});

// life-cycle

onMounted(() => {
    if (!route.query.hasOwnProperty("gw")) {
        selectedGateway.value = paymentGateways.value[0];
    }
});
</script>

<template>
    <div class="flex flex-col w-full gap-5">
        <div class="flex flex-col items-center w-full gap-4 p-4 border border-slate-200 rounded-xl bg-gray-50">
            <span class="flex items-center justify-start w-full text-[1.125rem] font-semibold text-gray-900">
                روش پرداخت
            </span>

            <div class="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
                <Gateway
                    v-for="(gateway, index) in paymentGateways"
                    :index="index"
                    :gateway="gateway"
                    :isSelected="selectedGateway?.id == gateway.id"
                    @select="selectedGateway = { ...gateway }"
                />
            </div>
        </div>
        <OrderSummary />
    </div>
</template>

<style scoped></style>
