import * as React from 'react'

export interface PJCreationMenuProps {
    error: string | null
    setSelectedPJ: (set: string | null) => void
    setUserWantsToCreatePJ: (set: boolean) => void
    setError: (set: string | null) => void
}

export interface Race {
    identifier: string;
    name_selection: string;
    description: string;
}
export interface Races {
    [id: string]: Race
}

export default function PJCreationMenu (props: PJCreationMenuProps): JSX.Element {
    const longNameInputRef = React.useRef<HTMLInputElement>(null)
    const shortNameInputRef = React.useRef<HTMLInputElement>(null)
    const nickInputRef = React.useRef<HTMLInputElement>(null)
    const raceSelectRef = React.useRef<HTMLSelectElement>(null)
    const [playableRaces, setPlayableRaces] = React.useState<Races>({})
    React.useEffect(() => {
        fetch('/races/playable', {
            method: 'GET',
            mode: 'same-origin',
            cache: 'no-cache'
        }).then(async (response) => {
            const data = await response.json()
            setPlayableRaces(data)
        }).catch((error) => {
            console.log(error)
            props.setError('Imposible conectar al servidor para recibir las razas.')
        })
    })
    return (
        <>
            <div className="login-container">
                <div className="login-contained">
                    <h1>Crea tu personaje.</h1>
                    {(props.error !== null
                        ? (<p style={{ background: 'red' }}>{props.error}</p>)
                        : (<></>)
                    )}
                    <div className="login-form">
                        <label>Nombre largo. (Se usará en la historia en situaciones formales)</label>
                        <input ref={longNameInputRef} type="text"/>
                        <label>Nombre corto. (Se usará de forma coloquial)</label>
                        <input ref={shortNameInputRef} type="text"/>
                        <label>Apodo. (Se usará en las conversaciones más distendidas)</label>
                        <input ref={nickInputRef} type="text"/>
                        <label>Raza. (Determina tu localización inicial y tus estadísticas)</label>
                        <select ref={raceSelectRef}>
                            {
                                Object.keys(playableRaces)
                                    .map(
                                        (item, i) => {
                                            return <option key={i} value={playableRaces[item].identifier}>
                                                {`${playableRaces[item].name_selection} (${playableRaces[item].description})`}
                                            </option>
                                        }
                                    )
                            }
                        </select>
                        <div className="width-max-content align-self-end">
                            <button>Crear Personaje</button>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}