import wixEventsFrontend from "wix-events-frontend";
import wixData from "wix-data";
import wixPayFrontend from "wix-pay-frontend";

let eventId;
let reservationId;
let orderNumber;
let tickets;

$w.onReady(function () {
  // Retrieve data and set up page
  await getData();
  $w("#ticketRepeater").onItemReady(displayTickets);
  $w("#ticketRepeater").data = tickets;

  // Define button click actions
  $w("#reservationButton").onClick(reserveTickets);
  $w("#checkoutButton").onClick(checkoutTickets);
  $w("#updateButton").onClick(updateTickets);

  // Verify coupon code when it is entered
  $w("#couponCode").onCustomValidation(verifyCouponCode);
});

async function getData() {
  // Run a query that returns only one event. Add
  // additional filtering to the query if necessary.
  const eventResults = await wixData
    .query("Events/Events")
    .eq("title", "My Event")
    .find();

  if (eventResults.items.length > 0) {
    eventId = eventResults.items[0]._id;

    // Get tickets for the event
    const ticketResults = await wixData
      .query("Events/Tickets")
      .eq("event", eventId)
      .find();

    if (ticketResults.items.length > 0) {
      tickets = ticketResults.items;
    } else {
      $w("#ticketRepeater").hide();
      console.log("Could not find tickets");
    }
  } else {
    console.log("Could not find event");
  }
}

function displayTickets($item, itemData, index) {
  $item("#ticketName").text = itemData.name;
  $item("#ticketPrice").text = itemData.price.toString();
  $item("#ticketQuantity").value = 0;
}

function reserveTickets() {
  const selectedTickets = getSelectedTickets();

  wixEventsFrontend.tickets
    .reserve(eventId, selectedTickets)
    .then((reservation) => {
      reservationId = reservation.id;
    })
    .catch((error) => {
      console.log("Error", error.message);
    });
}

function getSelectedTickets() {
  let selectedTickets = [];

  $w("#ticketRepeater").forEachItem(($item, itemData, index) => {
    if ($item("#ticketQuantity").value > 0) {
      selectedTickets.push({
        ticketId: itemData._id,
        quantity: $item("#ticketQuantity").value,
      });
    }
  });

  return selectedTickets;
}

function checkoutTickets() {
  wixEventsFrontend.tickets
    .checkout(eventId, reservationId, {
      formValues: getFormValues(),
      coupon: $w("#couponCode").value,
    })
    .then(({ order }) => {
      orderNumber = order.orderNumber;
      wixPayFrontend.startPayment(order.paymentId);
      // Note that PDF tickets are available before payment is complete
      $w("#ticketsPdfLink").value = order.ticketsPdf;
    })
    .catch((error) => {
      console.log("Error", error.message);
    });
}

function updateTickets() {
  wixEventsFrontend.tickets
    .updateOrder(eventId, orderNumber, {
      formValues: getFormValues(),
    })
    .catch((error) => {
      console.log("Error", error.message);
    });
}

function verifyCouponCode(value, reject) {
  const coupon = $w("#couponCode").value;
  wixEventsFrontend.tickets
    .verifyCoupon(eventId, reservationId, coupon)
    .then((result) => {
      if (result.discountErrors) {
        // handle verification failure
        $w("#couponCode").updateValidityIndication();
        $w("#couponErrorMsg").show();
        $w("#couponSuccessMsg").hide();
        reject("Coupon is invalid");
      } else {
        // handle coupon verified
        $w("#couponErrorMsg").hide();
        $w("#couponSuccessMsg").show();
      }
    });
}

function getFormValues() {
  return [
    { name: "firstName", value: $w("#firstName").value },
    { name: "lastName", value: $w("#lastName").value },
    { name: "email", value: $w("#email").value },
    { name: "custom", value: $w("#foodAllergies").value },

    // When a form contains an address, the way you format the
    // address information for submission depends on what type
    // of input elements you use to gather that information.

    // Wix address input element.
    { name: "address", value: $w("#address").value },

    // Single element which is not an address
    // input element, such as a text input.
    { name: "address", value: [$w("#address").value] },

    // Multiple elements for the
    // various parts of an address.
    {
      name: "address",
      value: [
        $w("#street").value,
        $w("#city").value,
        $w("#state").value,
        $w("#country").value,
        $w("#postalCode").value,
      ],
    },

    // When a form contains an input for adding more guests to an
    // RSVP, format the guest names for submission in an array
    // where each element is the full name of a guest.
    { name: "additionalGuests", value: $w("#additionalGuests").value },
    {
      name: "guestNames",
      value: [
        `${$w("#guest1FirstName").value} ${$w("#guest1LastName").value}`,
        `${$w("#guest2FirstName").value} ${$w("#guest2LastName").value}`,
      ],
    },
  ];
}