
import React, { ChangeEvent, useContext, useRef, useState } from 'react';
import './PartyPage.css';
import { APIEndPoint, PartyContext } from './PartyContext';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleDown, faCalendarDays, faLocationDot } from '@fortawesome/free-solid-svg-icons';
import { modifySelfRequest, parseURI } from './partyApi';
import { KrassesOverlay } from './KrassesOverlay';

export const PartyPage: React.FC = () => {
    const partyContext = useContext(PartyContext);
    const dear = {
        "m": "lieber",
        "f": "liebe",
        "d": "liebes",
    }[partyContext.self.grammatical_gender];
    const name = partyContext.self.name;

    const [comingState, setComingState] = useState(partyContext.self.coming);

    // SAFETY: If this is undefined, the contextProvider already fails
    const endpoint = parseURI(window.location.href) as APIEndPoint;

    const handleSelect = async (e: ChangeEvent) => {
        const value = (e.target as HTMLInputElement).value;
        if (value !== "yes" && value !== "no" && value !== "maybe") {
            throw new Error("received invalid value?");
        }
        const status = await modifySelfRequest(endpoint, { coming: value });
        setComingState(status.coming);
    }

    const party = partyContext.party;

    let coming: string;
    if (party.maybe_coming === 0) {
        // exact number
        if (party.definitely_coming === 0) {
            coming = "Bisher hat noch niemand zugesagt."
        } else if (party.definitely_coming === 1) {
            coming = "Bisher hat ein Gast zugesagt."
        } else {
            coming = `Es haben schon ${party.definitely_coming} Gäste zugesagt.`
        }
    } else {
        // inexact
        if (party.definitely_coming === 0 && party.maybe_coming === 1) {
            coming = "Bisher hat ein Gast vorläufig zugesagt."
        } else if (party.definitely_coming === 0) {
            coming = `Bisher haben ${party.maybe_coming} Gäste vorläufig zugesagt.`
        } else {
            coming = `Nach den bisherigen Zusagen kommen ${party.definitely_coming} bis ${party.definitely_coming + party.maybe_coming} Gäste.`
        }
    }

    const infoRef = useRef<HTMLDivElement>(null);
    const executeScroll = () => {
        infoRef.current!.scrollIntoView({ behavior: 'smooth' });
    }

    return <div className="App">
        <div className="bgwrap">
            <div className="bg" />
            <KrassesOverlay />
        </div>
        <div className='page'>
            <h1>Hallo {dear} {name},</h1>
            <div className='page-content'>
                <p>
                    wir (Kai, Dominic, Jenny) leiden aktuell unter dem <b>zuckerfreien Februar</b>.
                    Um das <b>Ende</b> dieser selbstauferlegten Folter gebührend zu <b>feiern</b>, möchten wir
                    dich gerne dazu einladen, dir gemeinsam mit uns ordentlich den Bauch
                    mit <b>zuckersüßem Dessert</b> vollzuschlagen.
                </p>
                <p>Klingt gut?</p>
                <div className='feedback'>
                    <input type="radio" id="coming-yes" name="coming" value="yes" checked={comingState === "yes"} onChange={handleSelect} />
                    <label htmlFor='coming-yes'>Ja</label>
                    <input type="radio" id="coming-maybe" name="coming" value="maybe" checked={comingState === "maybe"} onChange={handleSelect} />
                    <label htmlFor='coming-maybe'>Vielleicht</label>
                    <input type="radio" id="coming-no" name="coming" value="no" checked={comingState === "no"} onChange={handleSelect} />
                    <label htmlFor='coming-no'>Nein</label>
                </div>
                <p>{coming} Wir würden uns sehr freuen wenn auch du, {dear} {name}, kommen könntest!
                </p>
            </div>
            <div className='info-button' onClick={executeScroll}>
                <span>Mehr Infos</span>
                <FontAwesomeIcon icon={faAngleDown} />
            </div>
        </div>
        <div className='page' ref={infoRef}>
            <div className='page-content'>
                <h2>Wann und Wo?</h2>
                <p>
                    <FontAwesomeIcon icon={faCalendarDays} /> <strong>2. März, 20:00</strong>
                </p>
                <p>
                    <FontAwesomeIcon icon={faLocationDot} /> <a href="https://www.openstreetmap.org/way/213757745"><strong>Mainzer Str. 28</strong>, 66111 Saarbrücken</a>
                </p>
                <h2>Was für Süßkram?</h2>
                <p>
                    Wir sorgen für selbstgebackene <b>Brownies</b> und <b>Kekse</b>, eventuell (wenn Ofen und Bäcker das durchhalten) auch <b>Zimtschnecken</b>.
                    Bring gerne noch selbstgebackene, selbstgekaufte oder anderwertig organisierte Desserts (oder Snacks) mit!
                </p>
            </div>
        </div>
    </div>
};