import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faBuilding, faLock } from '@fortawesome/free-solid-svg-icons';


const UserAuthForm = props => {
    const isEnterCodeStage = props.authStage === "enterCode";
    const isRegisterForm = props.formType === "register";
    const isDeveloperAccount = props.accountType === "developer";
    const isDeveloperIcon = <span>{isDeveloperAccount ? <FontAwesomeIcon icon={faUser} /> : <FontAwesomeIcon icon={faBuilding} /> }</span>
    const lockIcon = <span><FontAwesomeIcon icon={faLock} /></span>

    return (
        <div className="page-content-center">
            {isRegisterForm ? 
            <h1>Rejestracja konta {isDeveloperAccount ? 'programisty' : 'firmy'} do systemu Task-O!</h1> : 
            <h1>Logowanie do systemu Task-O!</h1>}
            <form>
                {isEnterCodeStage &&
                    <ul>
                        <li>
                            <span><FontAwesomeIcon icon={faLock} /></span>
                            <input type="text" placeholder="Wprowadź kod autoryzacyjny" />
                        </li>
                    </ul>
                }
                {!isEnterCodeStage && 
                    <ul>
                        {
                        isRegisterForm && 
                        <li>
                            {isDeveloperIcon}
                            <input type="text" placeholder={isDeveloperAccount ? "Podaj imię" : "Podaj nazwę firmy"} />
                        </li>
                        }
                        {
                        isRegisterForm &&
                        <li>
                            {isDeveloperIcon}
                            <input type="text" placeholder={isDeveloperAccount ? "Podaj nazwisko" : "Podaj numer NIP"}/>
                        </li>
                        }
                        <li>
                            {isDeveloperIcon}
                            <input type="email" placeholder="Podaj adres e-mail" />
                        </li>
                        <li>
                            {lockIcon}
                            <input type="password" placeholder="Podaj hasło" />
                        </li>
                        {
                        isRegisterForm &&
                        <li>
                            {lockIcon}
                            <input type="password" placeholder="Powtórz hasło" />
                        </li>
                        }
                    </ul>
                    }
                {isEnterCodeStage ?
                <button type="submit" className="enter-code-stage-button">Zatwierdź</button> : 
                <button type="submit" className={isRegisterForm ? "register-button" : "login-button"}>{isRegisterForm ? "Zarejestruj się" : "Zaloguj się"}</button>
                }
                <Link href={isRegisterForm ? "/login" : "/register"}>
                    <button>{isRegisterForm ? "Zaloguj się" : "Zarejestruj się"}</button>
                </Link>
            </form>
        </div>
    )
}

export default UserAuthForm;