import { useState } from "react"
import UrlapKiiras from "./UrlapKiiras"

var inputs = []
function Urlap() {
    const [showComponent, setShowComponent] = useState(false)
    
    let handleClick = () => {
        inputs = Array.from(document.getElementsByTagName("input"))
        inputs.push(document.querySelector("#userProfession"))
        inputs.push(document.querySelector("#motivation-mail"))
        setShowComponent(true)
    }

    return (
        <>
            <h1>Űrlap</h1>
            <div className="form">
                <label htmlFor="userName">Név: </label>
                <input type="text" name="userName" id="userName"/><br />
                <label htmlFor="userEmail">Email: </label>
                <input type="email" name="userEmail" id="userEmail"/><br />
                <label htmlFor="userPhone">Telefon: </label>
                <input type="tel" name="userPhone" id="userPhone"/><br />
                <label htmlFor="userProfession">Foglalkozás: </label>
                <select name="userProfession" id="userProfession">
                    <option value="Teljes munkaidő">Teljes munkaidő</option>
                    <option value="Részmunkaidő">Részmunkaidő</option>
                </select><br />
                <label>Nyelvtudás: </label>
                <div id="radio-btn-wrapper">
                    <input type="radio" name="nyelvtudas" value="Alap"/>Alap
                    <input type="radio" name="nyelvtudas" value="Közép"/>Közép
                    <input type="radio" name="nyelvtudas" value="Felső"/>Felső
                </div>
                <div className="motivation-mail-wrapper">
                    <label htmlFor="motivation-mail">Motivációs levél: </label>
                    <textarea name="motivation-mail" id="motivation-mail" placeholder="Ide írd a motivációs leveledet"></textarea><br />
                </div>
                <button type="submit" onClick={handleClick}>Beküldés</button>

                {showComponent && <UrlapKiiras inputs={inputs}/>}
            </div>
        </>
    )
}


export default Urlap