"use client"

import { trpc } from "@/lib/trpc/client"

import Button from "@/components/TempDesignSystem/Button"

export default function Payment() {
  const initiateBooking = trpc.booking.booking.create.useMutation({
    onSuccess: (result) => {
      // TODO: Handle success, poll for payment link and redirect the user to the payment
      console.log("Res", result)
    },
    onError: () => {
      // TODO: Handle error
      console.log("Error")
    },
  })

  return (
    <Button
      onClick={() =>
        // TODO: Use real values
        initiateBooking.mutate({
          hotelId: "811",
          checkInDate: "2024-12-10",
          checkOutDate: "2024-12-11",
          rooms: [
            {
              adults: 1,
              children: 0,
              rateCode: "SAVEEU",
              roomTypeCode: "QC",
              guest: {
                title: "Mr",
                firstName: "Test",
                lastName: "User",
                email: "test.user@scandichotels.com",
                phoneCountryCodePrefix: "string",
                phoneNumber: "string",
                countryCode: "string",
              },
              smsConfirmationRequested: true,
            },
          ],
          payment: {
            cardHolder: {
              Email: "test.user@scandichotels.com",
              Name: "Test User",
              PhoneCountryCode: "",
              PhoneSubscriber: "",
            },
            success: "success/handle",
            error: "error/handle",
            cancel: "cancel/handle",
          },
        })
      }
    >
      Create booking
    </Button>
  )
}