@page "/contact"

@inject HttpClient HttpClient
@inject IJSRuntime JSRuntime

<div class="text-center">
    <h1 class="text-4xl">Contact</h1>
    
    <p class="text-lg mt-8">
        If you think I can help with your project or you'd just like to talk tech, send me a message!
    </p>
</div>

<div class="mx-auto max-w-xl pt-8 pb-4">
    <EditForm Model="contactInput" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator/>

        <div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <label for="name" class="block font-semibold leading-6">Name</label>
                <div class="mt-2.5">
                    <InputText id="name" @bind-Value="contactInput.Name" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600" autocomplete="given-name"/>
                    <ValidationMessage For="() => contactInput.Name" class="text-red-600"/>
                </div>
            </div>
            <div class="sm:col-span-2">
                <label for="email" class="block font-semibold leading-6">Email</label>
                <div class="mt-2.5">
                    <InputText id="email" @bind-Value="contactInput.Email" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600" autocomplete="email"/>
                    <ValidationMessage For="() => contactInput.Email" class="text-red-600"/>
                </div>
            </div>
            <div class="sm:col-span-2">
                <label for="message" class="block font-semibold leading-6">Message</label>
                <div class="mt-2.5">
                    <InputTextArea id="message" @bind-Value="contactInput.Message" rows="4" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600"/>
                    <ValidationMessage For="() => contactInput.Message" class="text-red-600"/>
                </div>
            </div>
        </div>
        <div class="mt-4">
            <small>This site is protected by reCAPTCHA and the Google <Anchor Href="https://policies.google.com/privacy" Target="_blank">Privacy Policy</Anchor> and <Anchor Href="https://policies.google.com/terms" Target="_blank">Terms of Service</Anchor> apply.</small>
        </div>
        <div class="mt-4 flex items-center justify-center">
            <Button Type="submit" IsLoading="@isSubmitting">
                <i class="fa-solid fa-paper-plane"></i> Send
            </Button>
        </div>

    </EditForm>
</div>

@if (isSubmitted)
{
    <div class="m-auto max-w-xl">
        @if (sendEmailSuccess)
        {
            <Alert Type="AlertType.Success" Title="Email sent successfully">
                Thanks for getting in touch! I'll get back to you as soon as I can.
            </Alert>
        }
        else
        {
            <Alert Type="AlertType.Error" Title="Email sending failed">
                Looks like something went wrong trying to send that email. Please try again.
            </Alert>
        }
    </div>
}

@code {
    private readonly ContactInputModel contactInput = new();

    private bool isSubmitting;
    private bool isSubmitted;
    private bool sendEmailSuccess;

    private class ContactInputModel
    {
        [Required(ErrorMessage = "Please enter your name.")]
        [MaxLength(50, ErrorMessage = "Please use a shorter name. 50 characters max.")]
        public string Name { get; set; } = string.Empty;

        [Required(ErrorMessage = "Please enter your email.")]
        [EmailAddress(ErrorMessage = "Please enter a valid email address.")]
        public string Email { get; set; } = string.Empty;

        [Required(ErrorMessage = "Please include a message.")]
        [MaxLength(500, ErrorMessage = "Please enter a shorter message. 500 characters max.")]
        public string Message { get; set; } = string.Empty;
    }

    private async Task HandleValidSubmit()
    {
        isSubmitting = true;
        
        var recaptchaResponse = await JSRuntime.InvokeAsync<string>("executeRecaptcha");

        if (string.IsNullOrWhiteSpace(recaptchaResponse))
        {
            sendEmailSuccess = false;
        }
        else
        {
            var sendEmailRequest = new SendContactEmailRequest(
                contactInput.Name,
                contactInput.Email,
                contactInput.Message,
                recaptchaResponse);

            var response = await HttpClient.PostAsJsonAsync("/api/send-contact-email", sendEmailRequest);

            sendEmailSuccess = response.IsSuccessStatusCode;
        }
        
        isSubmitting = false;
        isSubmitted = true;
    }

}