import Checkbox from '@/Components/Checkbox';
import TextInput from '@/Components/TextInput';
import { Head, useForm } from '@inertiajs/react';
import { FormEventHandler, useState } from 'react';
import Timer from "@/Components/Timer";

const LanForm = ({opacity}) => {
    const [showForm, setShowForm] = useState(true)
    const [type, setType] = useState();
    const [member, setMember] = useState();
    const { data, setData, post, processing, errors, reset } = useForm({
        member: 0,
        first_name: '',
        surname: '',
        grade: '',
        phone: '',
        email: '',
        guardian_name: '',
        guardian_phone: '',
        participating_type: '',
        gdpr: '',
        friends: '',
        special_diet: '',
    });

    const RadioInput = ({label, value, checked, setter}) => {
        return (
        <label>
            <input type="radio" checked={checked == value}
                onChange={() => (setter(value), setData('participating_type', value))} />
            <span>{label}</span>
        </label>
        );
    };

    const RadioMember = ({label, value, checked, setter}) => {
        return (
        <label>
            <input type="radio" checked={checked == value}
                onChange={() => (setter(value), setData('member', value))} />
            <span>{label}</span>
        </label>
        );
    };
    

    const submit = (e) => {
        e.preventDefault()
        post(route('register_participant'), {
            onFinish: () => reset(),
        }); 
    }

  return (
    <section id="LanForm" className="LanForm">
        <h1>
            vBytes LAN
        </h1>
        { ! showForm && <Timer />}
        {showForm && 
        <form onSubmit={submit}>
            <p>Är du medlem i Vbytes? Medlemsskap krävs för att delta på lanet. Är du inte medlem i föreningen blir du det på www.vbytes.se</p>
            <div className="field">
                <label className="label">Är du medlem i vBytes?</label>
                <div className="control">
                        <RadioMember label="Ja" value="0" checked={member} setter={setMember}  />
	                    <RadioMember label="Nej" value="1" checked={member} setter={setMember} />  
                </div>
            </div>
            <div className="field">
                <label className="label">Deltagarens förnamn</label>
                <div className="control">
                        <TextInput
                        required
                        className="input" 
                        type="text" 
                        name="first_name" 
                        value={data.first_name}
                        //placeholder="Förnamn"
                        onChange={(e) => setData('first_name', e.target.value)}
                    />
                </div>
            </div>
             <div className="field">
                <label className="label">Deltagarens efternamn</label>
                <div className="control">
                        <TextInput
                        required
                        className="input" 
                        type="text" 
                        name="surname" 
                        value={data.surname}
                        //placeholder="Namn"
                        onChange={(e) => setData('surname', e.target.value)}
                    />
                </div>
            </div>
            <div className="field">
                <label className="label">Jag går i klass:</label>
                <div className="control">
                        <TextInput
                        required
                        className="input" 
                        type="text" 
                        name="grade" 
                        value={data.grade}
                        //placeholder="Namn"
                        onChange={(e) => setData('grade', e.target.value)}
                    />
                </div>
            </div>
            <div className="field">
                <label className="label">Mobilnummer deltagare</label>
                <div className="control">
                        <TextInput
                        className="input" 
                        type="text" 
                        name="phone" 
                        value={data.phone}
                        //placeholder="Namn"
                        onChange={(e) => setData('phone', e.target.value)}
                    />
                </div>
            </div>
            <div className="field">
                <label className="label">E-post deltagare</label>
                <div className="control">
                        <TextInput
                        className="input" 
                        type="text" 
                        name="email" 
                        value={data.email}
                        //placeholder="Namn"
                        onChange={(e) => setData('email', e.target.value)}
                    />
                </div>
            </div>
            <div className="field">
                <label className="label">Vårnadshavares namn</label>
                <div className="control">
                        <TextInput
                        required
                        className="input" 
                        type="text" 
                        name="guardian_name" 
                        value={data.guardian_name}
                        //placeholder="Namn"
                        onChange={(e) => setData('guardian_name', e.target.value)}
                    />
                </div>
            </div>
            <div className="field">
                <label className="label">Vårnadshavares epost</label>
                <div className="control">
                        <TextInput
                        required
                        className="input" 
                        type="text" 
                        name="guardian_email" 
                        value={data.guardian_email}
                        //placeholder="Namn"
                        onChange={(e) => setData('guardian_email', e.target.value)}
                    />
                </div>
            </div>
                  <div className="field">
                <label className="label">Vårnadshavares telefonnummer</label>
                <div className="control">
                        <TextInput
                        required
                        className="input" 
                        type="text" 
                        name="guardian_phone" 
                        value={data.guardian_phone}
                        //placeholder="Namn"
                        onChange={(e) => setData('guardian_phone', e.target.value)}
                    />
                </div>
            </div>
         
             <div className="field">
                <label className="label">LAN-plats eller besöksplats</label>
                <div className="control">
                        <RadioInput label="LAN" value="lan" checked={type} setter={setType}  />
	                    <RadioInput label="Besök" value="besök" checked={type} setter={setType} />  
                </div>
            </div>
                <div className="field">
                <label className="label">Kompisar</label>
                <div className="control">
                        <TextInput
                        className="input" 
                        type="text" 
                        name="friends" 
                        value={data.friends}
                        //placeholder="Namn"
                        onChange={(e) => setData('friends', e.target.value)}
                    />
                </div>
            </div>
             <div className="field">
                <label className="label">Specialkost</label>
                <div className="control">
                        <TextInput
                        className="input" 
                        type="text" 
                        name="special_diet" 
                        value={data.special_diet}
                        //placeholder="Namn"
                        onChange={(e) => setData('special_diet', e.target.value)}
                    />
                </div>
            </div>
        
            <div className="field">
                <div className="control">
                    <label className="checkbox">
                    <Checkbox
                        required
                        type="checkbox" 
                        name="gdpr"
                        checked={data.gdpr}
                        onChange={(e) =>
                            setData(
                                'gdpr',
                                (e.target.checked || false),
                            )
                        }
                    />
                    <span>  GDPR</span>
                    </label>
                </div>
            </div>

            <div className="field">
                <div className="control">
                    <label className="checkbox">
                    <Checkbox type="checkbox" required/>
                    <span> Jag accepterar reglerna.</span>
                        
                    </label>
                </div>
            </div>

            <div className="field is-grouped btn">
                <span class="btn__inner">
                    <span class="btn__label" data-label="Anmäl" data-hover="Go for it 🚀">
                    <span class="btn__label__background"></span>
                    </span>
                </span>
                <span class="btn__background"></span>
            </div>
            </form>
    }
    </section>
);
};

export default LanForm;