import config from "../../config.ts";
import { Layout } from "../layout.tsx";

interface RegisterProps {
    error?: string;
    question?: string;
    pending?: boolean;
}

export function Register({ error, question, pending }: RegisterProps) {
    if (pending) {
        return (
            <Layout user={null} title="Register">
                <div class="auth-container">
                    <h1 class="page-title">Create account</h1>
                    <p class="form-success">
                        Your account has been submitted for review. You will be
                        able to log in once an admin approves it.
                    </p>
                    <p class="auth-footer">
                        Already have an account? <a href="/login">Sign in</a>
                    </p>
                </div>
            </Layout>
        );
    }

    return (
        <Layout user={null} title="Register">
            <div class="auth-container">
                <h1 class="page-title">Create account</h1>
                {!!error && (
                    <p class="form-error" safe>
                        {error}
                    </p>
                )}
                <form method="POST" action="/register" class="auth-form">
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input
                            id="username"
                            name="username"
                            type="text"
                            required
                            autocomplete="username"
                            maxlength={config.MAX_USERNAME_BYTES}
                            pattern="[a-zA-Z0-9_-]+"
                            title="Letters, numbers, hyphens and underscores only"
                        />
                    </div>
                    {!!question && (
                        <div class="form-group">
                            <label for="application" safe>
                                {question}
                            </label>
                            <textarea
                                id="application"
                                name="application"
                                rows="4"
                                required
                                placeholder="Your answer..."
                            ></textarea>
                        </div>
                    )}
                    <div id="passkey-section" style="display:none">
                        <button
                            id="passkey-register-btn"
                            class="btn btn-secondary btn-block"
                            type="button"
                        >
                            Register with passkey
                        </button>
                        <p id="passkey-error" style="display:none"></p>
                        <div class="auth-divider">
                            <span>or</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input
                            id="password"
                            name="password"
                            type="password"
                            autocomplete="new-password"
                            minlength="8"
                            maxlength={config.MAX_PASSWORD_BYTES}
                        />
                    </div>
                    <div class="form-group">
                        <label for="password2">Confirm password</label>
                        <input
                            id="password2"
                            name="password2"
                            type="password"
                            autocomplete="new-password"
                            minlength="8"
                            maxlength={config.MAX_PASSWORD_BYTES}
                        />
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">
                        Register with password
                    </button>
                </form>
                <p class="auth-footer">
                    Already have an account? <a href="/login">Sign in</a>
                </p>
            </div>
            <script type="module" src="/assets/passkey-register.js"></script>
        </Layout>
    );
}