@page "/register"

@* This is just a "virtual" route/page. The handling for that is
@* MainLayout doing for us. We need to put that here so the router
@* does not return the 404 page
*@

@using Moonlight.App.Services
@using Moonlight.App.Services.OAuth2
@using Moonlight.App.Models.Forms
@using Moonlight.App.Services.Interop
@using Moonlight.App.Services.Sessions

@inject SmartTranslateService SmartTranslateService
@inject GoogleOAuth2Service GoogleOAuth2Service
@inject NavigationManager NavigationManager
@inject DiscordOAuth2Service DiscordOAuth2Service
@inject AlertService AlertService
@inject UserService UserService
@inject CookieService CookieService

<div class="d-flex flex-center">
    <div class="card rounded-3 w-md-550px">
        <div class="card-body">
            <div class="d-flex flex-center flex-column-fluid pb-15 pb-lg-20">
                <div class="form w-100 fv-plugins-bootstrap5 fv-plugins-framework" novalidate="novalidate">
                    <div class="text-center mb-11">
                        <h1 class="text-dark fw-bolder mb-3">
                            <TL>Sign Up</TL>
                        </h1>
                        <div class="text-gray-500 fw-semibold fs-6">
                            <TL>Sign up to start with moonlight</TL>
                        </div>
                    </div>

                    <div class="row g-3 mb-9">
                        <div class="col-md-6">
                            <a href="#" @onclick:preventDefault @onclick="DoDiscord" class="btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100">
                                <div class="h-15px me-3">
                                    <i class="mb-1 bx bx-md bxl-discord-alt"></i>
                                </div>
                                <TL>Sign up with Discord</TL>
                            </a>
                        </div>
                        <div class="col-md-6">
                            <a href="#" @onclick:preventDefault @onclick="DoGoogle" class="btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100">
                                <div class="h-15px me-3">
                                    <i class="mb-1 bx bx-md bxl-google"></i>
                                </div>
                                <TL>Sign up with Google</TL>
                            </a>
                        </div>
                    </div>

                    <div class="separator separator-content my-10">
                        <span class="w-125px text-gray-500 fw-semibold fs-7">
                            <TL>Or with email</TL>
                        </span>
                    </div>
                    
                    <SmartForm Model="UserRegisterModel" OnValidSubmit="CreateUser">
                        <div class="fv-row mb-4 fv-plugins-icon-container">
                            <InputText @bind-Value="UserRegisterModel.Email" placeholder="@(SmartTranslateService.Translate("Email"))" name="email" autocomplete="off" class="form-control bg-transparent" />
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-6 mb-4 fv-plugins-icon-container">
                                <InputText @bind-Value="UserRegisterModel.FirstName" type="text" placeholder="@(SmartTranslateService.Translate("Firstname"))" name="text" class="form-control bg-transparent" />
                            </div>

                            <div class="col-lg-6 mb-4 fv-plugins-icon-container">
                                <InputText @bind-Value="UserRegisterModel.LastName" type="text" placeholder="@(SmartTranslateService.Translate("Lastname"))" name="text"class="form-control bg-transparent" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-6 mb-4 fv-plugins-icon-container">
                                <InputText @bind-Value="UserRegisterModel.Password" type="password" placeholder="@(SmartTranslateService.Translate("Password"))" name="password" autocomplete="off" class="form-control bg-transparent" />
                            </div>

                            <div class="col-lg-6 mb-4 fv-plugins-icon-container">
                                <InputText @bind-Value="UserRegisterModel.ConfirmPassword" type="password" placeholder="@(SmartTranslateService.Translate("Repeat password"))" name="password" autocomplete="off" class="form-control bg-transparent" />
                            </div>
                        </div>
                        
                        <div class="d-grid mb-6">
                            <button type="submit" class="btn btn-primary">
                                <TL>Sign-up</TL>
                            </button>
                        </div>
                    </SmartForm>
                    
                    <div class="text-gray-500 text-center fw-semibold fs-6">
                        <TL>Already registered?</TL>

                        <a href="/login" class="link-primary">
                            <TL>Sign in</TL>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@code
{
    private UserRegisterModel UserRegisterModel = new();
    
    private async Task DoGoogle()
    {
        var url = await GoogleOAuth2Service.GetUrl();
        NavigationManager.NavigateTo(url, true);
    }
    
    private async Task DoDiscord()
    {
        var url = await DiscordOAuth2Service.GetUrl();
        NavigationManager.NavigateTo(url, true);
    }

    private async Task CreateUser()
    {
        if (UserRegisterModel.ConfirmPassword != UserRegisterModel.Password)
        {
            await AlertService.Error(SmartTranslateService.Translate("Passwords need to match"));
            return;
        }
        
        var token = await UserService.Register(UserRegisterModel.Email, UserRegisterModel.Password, UserRegisterModel.FirstName, UserRegisterModel.LastName);
        await CookieService.SetValue("token", token, 10);

        if (NavigationManager.Uri.EndsWith("register"))
            NavigationManager.NavigateTo("/", true);
        else
            NavigationManager.NavigateTo(NavigationManager.Uri, true);
    }
}
