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

const route = useRoute();

definePageMeta({
    layout: "cart",
    middleware: "check-is-logged-in",
    pageTitle: "ثبت سفارش",
    prevPage: { name: "cart-delivery", label: "انتخاب آدرس" },
});

// state

const router = useRouter();

const paymentGateways = ref<PaymentGateway[]>([
    {
        id: 1,
        picture: "/img/gateways/zarinpal.png",
        title: "زرین پال",
        type: "ZARINPAL",
    },
    {
        id: 2,
        picture: "/img/gateways/sep.png",
        title: "سپ",
        type: "SEP",
    },
    {
        id: 3,
        picture: "/img/gateways/mellat-bank.png",
        title: "بانک ملت",
        type: "MELLAT",
    },
    {
        id: 4,
        picture: "/img/gateways/idpay.png",
        title: "آی دی پی",
        type: "IDPAY",
    },
    {
        id: 5,
        picture: "/img/gateways/zibal.png",
        title: "زیبال",
        type: "ZIBAL",
    },
    {
        id: 6,
        picture: "/img/gateways/bahamta.png",
        title: "باهمتا",
        type: "BAHAMTA",
    },
    {
        id: 7,
        picture: "/img/gateways/bmi.png",
        title: "بانک ملی",
        type: "BMI",
    },
]);

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-gray-300 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>
