import React from 'react'
import { Head, router } from '@inertiajs/react'

import { formatIDR } from '@/utils'
import CustomerLayout from '@/Layouts/CustomerLayout'
import VoucherCard from './VoucherCard'
import EmptyHere from './IndexPartials/EmptyHere'
import { useModalState } from '@/hooks'
import Payment from './IndexPartials/Payment'

export default function Index({ carts, total, allow_process }) {
    const paymentModal = useModalState()

    const handlePayment = () => {
        paymentModal.toggle()
    }

    const handleTopUp = () => {
        router.get(route('transactions.deposit.topup'))
    }

    return (
        <CustomerLayout>
            <Head title="Cart" />
            <div className="flex flex-col min-h-[calc(95dvh)]">
                <div className="py-5 text-2xl px-5 font-bold">Keranjang</div>
                {carts.length > 0 ? (
                    <>
                        <div className="w-full px-2 flex flex-col space-y-2 pb-28">
                            {carts.map((item) => (
                                <VoucherCard key={item.id} item={item} />
                            ))}
                        </div>
                        <div className="fixed bottom-12 w-full bg-white py-5 px-2 shadow-lg border-t max-w-md mx-auto">
                            <div className="flex flex-row justify-between px-5">
                                <div className="flex flex-col">
                                    <div className="text-gray-400">
                                        Total Harga
                                    </div>
                                    <div className="font-bold text-lg">
                                        Rp. {formatIDR(total)}
                                    </div>
                                </div>
                                {allow_process ? (
                                    <div
                                        onClick={handlePayment}
                                        className="font-bold h-11 border bg-blue-700 text-white px-5 py-2 rounded-full hover:text-black hover:bg-white"
                                    >
                                        Bayar
                                    </div>
                                ) : (
                                    <div
                                        onClick={handleTopUp}
                                        className="font-bold h-11 border bg-blue-700 text-white px-5 py-2 rounded-full hover:text-black hover:bg-white"
                                    >
                                        Top Up
                                    </div>
                                )}
                            </div>
                            {allow_process === false && (
                                <div className="-mt-2 px-5 text-right text-sm text-gray-500">
                                    saldo tidak cukup
                                </div>
                            )}
                        </div>
                    </>
                ) : (
                    <EmptyHere />
                )}
            </div>
            <Payment state={paymentModal} />
        </CustomerLayout>
    )
}
