// DEPENDS ON seat-chooser.js
(async () => {
    let scDiv = document.querySelector('#seat-chooser');
    let summaryDiv = document.querySelector('#summary-dyn');

    let showingId = scDiv.getAttribute('data-showing-id');
    let ticketTypes = await (await fetch(`/api/showing/${showingId}/prices`)).json();

    let sc = new SeatChooser(
        showingId,
        scDiv,
        (sc, s, add) => {
            // seat click callback
            // sc is the seat chooser
            // s is the seat // but it's better to look at sc.selectedSeats
            // add is a boolean indicating whether the seat is being added or removed

            // update the summary
            summaryDiv.innerHTML = '';
            sc.selectedSeats.forEach((seat, index) => {
                // set seat ticket if ticket is not set
                if (!seat.ticket) seat.ticket = ticketTypes[0];
                let seatDiv = document.createElement('div');
                seatDiv.classList.add('seat');
                let ticketSelect = document.createElement('select');
                ticketTypes.forEach((ticketType, index) => {
                    let option = document.createElement('option');
                    option.value = index;
                    option.innerText = ticketType.price_type;
                    ticketSelect.appendChild(option);
                });
                ticketSelect.classList.add('ticket-select');
                ticketSelect.value = ticketTypes.indexOf(seat.ticket);
                ticketSelect.addEventListener('change', (e) => {
                    seat.ticket = ticketTypes[e.target.value];
                    updateTicket(sc, seat, seatDiv);
                    updateTotal(sc);
                });
                seatDiv.appendChild(ticketSelect);

                seatDiv.appendChild(document.createTextNode(' '));

                let seatSpan = document.createElement('span');
                seatSpan.innerText = `Row ${seat.row}, Seat ${seat.col}`;
                seatSpan.classList.add('seat-span');
                seatDiv.appendChild(seatSpan);
                seatDiv.appendChild(document.createTextNode(' '));

                let priceSpan = document.createElement('span');
                priceSpan.classList.add('price');
                seatDiv.appendChild(priceSpan);
                summaryDiv.appendChild(seatDiv);

                updateTicket(sc, seat, seatDiv);
            });

            updateTotal(sc);

            if (sc.selectedSeats.length == 0) document.querySelector('button#order-button').disabled = true;
            else document.querySelector('button#order-button').disabled = false;

        }
    );

    window.freq.set('seat-chooser', sc);
})();

let total = 0;

function updateTicket(sc, seat, seatDiv) {
    seatDiv.querySelector('span:last-child').innerText = `€${seat.ticket.price}`;
}

function updateTotal(sc) {
    total = 0;
    sc.selectedSeats.forEach(_seat => {
        total += Number(_seat.ticket.price);
    });
    document.querySelector('#summary-total').innerText = `Total: €${total}`;
}

document.querySelector('button#order-button').addEventListener('click', (e) => {
    let seats = [];
    window.sc.selectedSeats.forEach(seat => {
        seats.push({
            seat: seat.id,
            ticket: seat.ticket.id
        });
    });
    fetch(`/api/order`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            showing: sc.showingId,
            seats: seats
        })
    }).then(res => {
        if (res.ok) {
            window.location = '/order/complete';
        } else {
            alert('Error placing order');
        }
    });
});