// eslint-disable-next-line
const preact = require('preact');

function renderLogin({ account, submitLogin, submitRegister }) {
    if (account) return (
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" className="ping-svg">
              <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
              <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
            </svg>
            <h3 className="header-username">{account.name}</h3>
        </div>
    );

    const details = {
        name: '',
        password: '',
    };

    return (
        <div className="login" >
            <div className="field">
                <p className="control has-icons-left has-icons-right">
                    <input
                        className="input"
                        type="email"
                        placeholder="Email"
                        onChange={e => (details.name = e.target.value)}
                    />
                    <span className="icon is-small is-left">
                        <i className="fas fa-user" />
                    </span>
                    <span className="icon is-small is-right">
                        <i className="fas fa-check" />
                    </span>
                </p>
            </div>
            <div className="field">
                <p className="control has-icons-left">
                    <input
                        className="input"
                        type="password"
                        placeholder="Password"
                        onChange={e => (details.password = e.target.value)}
                    />
                    <span className="icon is-small is-left">
                        <i className="fas fa-lock" />
                    </span>
                </p>
            </div>
            <div className="field">
                <p className="control">
                    <button
                        className="button inverted"
                        type="submit"
                        onClick={() => submitLogin('ntr', 'grepgrepgrep')}>
                        Default
                    </button>
                    <button
                        className="button inverted"
                        type="submit"
                        onClick={() => submitLogin(details.name, details.password)}>
                        Login
                    </button>
                    <button
                        className="button inverted"
                        type="submit"
                        onClick={() => submitRegister(details.name, details.password)}>
                        Register
                    </button>
                </p>
            </div>
        </div>
    );
}

module.exports = renderLogin;