import '../styles/index.scss';

import DataTable from "react-data-table-component";
import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';


const addr_prefix = "" //"http://localhost:8000"


class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: "",
            status: "",
            faq: false,
        };
    }
    onSubmit(event){
        event.preventDefault();
        let form = document.forms[0];
        let formData = new FormData(form);
        fetch("/api/register", {
            method:"POST",
            body: formData,
        }).then(resp => resp.json()).then(json => {
            if(json.reason){
                this.setState({
                    text: json.reason,
                    status: "failed",
                })
            } else {
                this.setState({
                    text: json.success,
                    status: "success",
                })
            }
        });
    }
    togglefaq(){
        this.setState({faq: !this.state.faq});
    }
    render(){
        return (
<div>
    {this.state.status == "success" &&
    <div class="absolute container-fluid alert alert-success">
        {this.state.text}
    </div>}
    {this.state.status == "failed" &&
    <div class="absolute container-fluid alert alert-danger">
        {this.state.text}
    </div>}
    {this.state.faq &&
        <div class="shadow"></div>}
    {this.state.faq &&
        <div class="faq" onClick={(e) => this.togglefaq()}>
            <div class="container" onClick={(e) => e.stopPropagation()}>
                <button type="button" class="btn-close" aria-label="Close" onClick={(e) => this.togglefaq()}></button>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">K čemu slouží Tokken?</h5>
                        <p class="card-text">V kontextu Alkátor Race by se to dalo spíše nazvat kontrolním bodem. Závodník doběhne na určité místo, kde tokken sebere a následně ho zanese na další stanoviště, kde ho předáte kontrolorovi. Tím dáte najevo, že jste běžel trasu správě. Je to pojistka, aby jsi byl podctivý Alkátor a nešvindloval!</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Jak funguje Quíz?</h5>
                        <p class="card-text">Jedná se o překážku, kde na daném místě vylosujete otázku a běžíte k dalšímu stanovišti ke kontrolorovi. Mezi tím si můžete promyslet jednu z ze tří odpovědí (formát A,B,C). Špatná odpopvěď znamená panáčka. Navíc to má obdobnou funkci, jako Tokken.</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Jak funguje Ruleta?</h5>
                        <p class="card-text">Na stanovišti na Vás budou čekat panáčky. Obsah může být cokoliv alkoholického i nealkoholického, od dobrot po blééé. Nejlepší na tom je, že podle čichu a barvy nemáte šanci poznat, o co se jedná. Jelikož panáčky jsou uzavřené a dobarvené potravinářským barvivem.</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Musím v Alkátor race utíkat nebo se jinak fyzicky namáhat?</h5>
                        <p class="card-text">Strategii závodu si určím sám s pomocí mého osobního trenéra. Tudíž se zaměřím hlavně na alkohol a abych dorazil do cíle jako hrdina a ostřílený alko-veterán.</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Kolik spoluúčastníků mám očekávat?</h5>
                        <p class="card-text">Zatím je kapacita závodu 50 účastníků.</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Kolik lahváčů do sebe po cestě kopnu?</h5>
                        <p class="card-text">Celkem jsou 4 čekárny a v každé padne jeden lahváč.</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">A co panákové?</h5>
                        <p class="card-text">To já upřímě nevím. Záleží na tvém skóre v soutěžích.</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Jaká je trasa závodu?</h5>
                        <p class="card-text"></p>
                        <img src="/public/trasa.png" class="card-img-bottom"></img>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Co když jsem zde svůj dotaz nenašel?</h5>
                        <p class="card-text">Tak neváhej a kontaktuj nás na sociálních sítích nebo emailu, rádi pomůžeme.</p>
                    </div>
                </div>
            </div>
        </div>
    }
    <div class="container">
        <img class="logo" src="/public/logo.svg"></img>
    </div>
    <div class="container info text-center">
        <div class="row">
            <h1 class="col val">
                <b>KDY?</b>
                <br />
                4.5.2024
            </h1>
            <div class="col"></div>
            <h1 class="col val">
                <b>KDE?</b>
                <br />
                Sobkovice
            </h1>
            <div class="col"></div>
            <h1 class="col val">
                <b>CENA</b>
                <br />
                690 kč
            </h1>
        </div>
    </div>
    <div class="container text">
        <p>Vítej člověče! Momentálně se nacházíš na oficiální stránce závodu ALKÁTOR RACE.</p>
        <p>Závod kterej prověří tvoje tělo v celým spektru, a tím myslím opravdu celý spektrum, od bicepsů, přes prostor mezi mozkovými hemisférami, tam totiž vzniká kreativita, až po játra.</p>
        <p>Pohybem se tady moc nešetří, teda pokud zrovna nesedíš v čekárně. Alkoholem se tady taky moc nešetří, a to zvlášť, když sedíš v čekárně.</p>
        <p>Začínáš se v tom ztrácet? neboj, já taky. Budeš se plazit v bahně (když náhodou upadneš přímo do louže s bahnem). Šipky, ruleta, švihadlo, pneumatiky, quiz, skok v pytli a mnohé další disciplíny, prověří tvou žízeň, fyzickou výdrž, logické myšlení a alkoholovou toleranci organismu.</p>
        <p>"Přelez, přeskoč, podlez, vypij! Tedy pivo zdolávej čestně a statečně, ne abys vynechával panáky, natož abys švindloval!"</p>
        <p>Rozhodně se podívej na FAQ sekci, zde na stránce, kde najdeš důležité informace týkající se závodu ALKÁTOR RACE, včetně mapy, ve které jsou vyznačeny všechny stanoviště.</p>
        <p>Sportem ku chlastu!</p>
    </div>
    <div class="container text text-center">
         <h2>Stále nevíš jestli se zůčastníš? přečti si náš <button type="button" class="btn btn-warning" onClick={(e) => this.togglefaq()}>FAQ</button></h2>
    </div>
    <div class="container text-center text">
        <h1>Zahájení registrací 1.4.2024</h1>
    </div>
    {/*<form onSubmit={(e) => this.onSubmit(e)}>
        <h1>Registrace</h1>
        <div class="mb-3">
            <label for="first_name" class="form-label">Jméno</label>
            <input type="text" class="form-control" id="first_name" name="first_name" />
        </div>
        <div class="mb-3">
            <label for="last_name" class="form-label">Přijmení</label>
            <input type="text" class="form-control" id="last_name" name="last_name" />
        </div>
        <div class="mb-3">
            <label for="email" class="form-label">Emailová adresa</label>
            <input type="email" class="form-control" id="email" name="email" />
        </div>
        <div class="mb-3">
            <label for="date_of_birth" class="form-label">Datum narození</label>
            <input type="date" class="form-control" id="date_of_birth" name="date_of_birth" max={new Date().toJSON().slice(0, 10)} />
        </div>
        <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="agreement" name="agreement" />
            <label class="form-check-label" for="agreement">Souhlas se zpracováním osobních údajů</label>
        </div>
        <button type="submit" class="btn btn-primary">Odeslat</button>
    </form>*/}
    <div class="container text-center social">
        <div class="row">
            <a class="col-lg-3" style={{"color": "black"}} href="mailto:info@alkator.cz"><b>info@alkator.cz</b></a>
            <a class="col-lg-3" href="https://www.facebook.com/AlkatorRace"><img height="40px" src="/public/fb_logo.svg" /></a>
            <a class="col-lg-3" href="https://www.youtube.com/@AlkatorRace"><img height="40px" src="/public/youtube_logo.svg"/></a>
            <a class="col-lg-3" href="https://www.instagram.com/alkator_race/"><img height="40px" src="/public/instagram_logo.svg" /></a>
        </div>
    </div>
    <div class="container video">
        <iframe width="100%" height="800px" src="https://www.youtube.com/embed/H1UeXTBpsXw?si=kkh2_BBJXw56gVaP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="true"></iframe>
    </div>
    <div class="container video">
        <iframe width="100%" height="800px" src="https://www.youtube.com/embed/v3r2IAPdFFQ?si=kkh2_BBJXw56gVaP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="true"></iframe>
    </div>
    <div class="container text">
        IČ: 212 44 863<br />
        Nejsme plátci DPH.<br />
        Název společnosti: Zhoor s.r.o.<br />
        sídlo: Červenovodská 548, Králíky, 561 69<br />
        Číslo účtu: 131-2219860207/0100<br />
    </div>
</div>
        );
    }
}

const root = createRoot(
    document.getElementById('root')
);
root.render(<Main />);