@page "/pokemonsleep/add-new-pokemon"

@inject IPokemonService PokemonService
@inject NavigationManager Navigation

@attribute [StreamRendering]
@rendermode InteractiveServer


<PageTitle>Add New Pokémon</PageTitle>
<PokemonHeader />


@if (isSubmitting)
{
    <p><em>Submitting...</em></p>
}
else
{
    <div class="w-50 mt-5 m-auto create-container">

        <div class="card-header bg-secondary bg-gradient ml-0 py-3">
            <div class="row">
                <div class="col-12 text-center">
                    <h2 class="text-info">Add New Pokémon</h2>
                </div>
            </div>
        </div>


        <div class="container m-lg-1" >
            <EditForm class=" col mb-3" Model="NewPokemon" OnValidSubmit="HandleSubmit">
                <DataAnnotationsValidator />

                <!-- Section 1 -->
                <div class="row ">
                    <div class="col-sm-3 input-group mb-3 ">
                        <!-- Pokemon #-->
                        <span for="PokemonId" class="input-group-text">#</span>
                        <InputNumber min="0" placeholder="Pokedex #" id="PokemonId" @bind-Value="NewPokemon.PokemonId" class="form-control " required />
                        <!-- Pokemon Name-->
                        <InputText placeholder="Pokemon Name" id="PokemonName" @bind-Value="NewPokemon.PokemonName" class="form-control w-75" required />
                    </div>
                </div>

                <!-- Section 2 -->
                <div class="row">
                    <div class="input-group mb-3">
                        <!-- Variation Check -->
                        <div class=" d-inline-flex">
                            <InputCheckbox id="IsVariation" @bind-Value="NewPokemon.IsVariation" @onclick="@Toggle" class="form-check-input checkbox-styling p-3 mt-1" />
                            <span for="IsVariation" class="input-group-text m-1">Variation?</span>
                        </div>
                        
                        <!-- Variation Region Input -->
                        <div class="w-75 mx-2 mt-1">

                            <InputText placeholder="What Variant? (Alolan, Paldean)" hidden="@HideLabel" id="VariationName" @bind-Value="NewPokemon.VariationName" class="form-control" />
                        </div>
                    </div>
                </div>


                <!-- Section 3 -->
                <div class="row mb-3 m-auto" >
                    <label for="SleepType" class="form-label">Sleep Type</label>
                    <InputSelect id="SleepType" @bind-Value="NewPokemon.SleepType" class="form-select">
                        <option hidden value="">Dozing / Snoozing / Slumbering</option>
                        <option value="Dozing">Dozing</option>
                        <option value="Snoozing">Snoozing</option>
                        <option value="Slumbering">Slumbering</option>
                    </InputSelect>
                </div>

                <!-- Section 4 -->
                <div class="row mb-3 m-auto">
                    <label for="Speciality" class="form-label">Specialty</label>
                    <InputSelect id="SleepType" @bind-Value="NewPokemon.Speciality" class="form-select">
                        <option hidden value="">Berries / Ingredients / Skills</option>
                        <option value="Berries">Berries</option>
                        <option value="Ingredients">Ingredients</option>
                        <option value="Skills">Skills</option>
                        <option value="Other">Other</option>
                    </InputSelect>
                </div>

                <!-- New Image URL Field -->
                <div class="row mb-3 m-auto">
                    <label for="ImageUrl" class="form-label">Base Image URL</label>
                    <InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonImageUrl" class="form-control" />
                </div>
                <div class="row mb-3 m-auto">
                    <label for="ImageUrl" class="form-label">Shiny Image URL</label>
                    <InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonShinyImageUrl" class="form-control" />
                </div>
                <button type="submit" class="btn btn-primary mb-3">Add Pokémon</button>
                <button type="button" class="btn btn-secondary mb-3" @onclick="@Cancel">Cancel</button>
            </EditForm>
        </div>
    </div>
}

