@page "/pokemonsleep/edit/{id:int}"
@inject IPokemonService PokemonService
@inject NavigationManager Navigation
@inject IJSRuntime JSRuntime

@attribute [StreamRendering]
@rendermode InteractiveServer

<PageTitle>Edit Pokémon</PageTitle>
<PokemonHeader />

@if (pokemon == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <!-- Total Componenet-->
    <div class="w-50 mt-3 m-auto bg-info edit-container">

        <!-- Header -->
        <div class="card-header bg-secondary ml-0 py-3 w-100 ">
            <div class="row">
                <div class="col-12 text-center">
                    <h2 class="text-info">Edit Pokémon</h2>
                </div>
            </div>
        </div>

        <!-- Body -->
        <div class="p-3 w-100 flex-column ">
            <EditForm class="col mb-3" Model="pokemon" OnValidSubmit="HandleSubmit">
                <DataAnnotationsValidator />

                <!-- Dex Number and Name -->
                <div class="row ">
                    <div class="col-sm-3 input-group mb-3">
                        <span for="PokemonId" class="input-group-text">#</span>
                        <InputNumber min="0" id="PokemonId" @bind-Value="pokemon.PokemonId" class="form-control" required disabled />
                        <InputText id="PokemonName" @bind-Value="pokemon.PokemonName" class="form-control w-75" required  />
                    </div>
                </div>

                <!-- Pokemon Type, Sleep Type, and Speciality -->
                <div class="row">
                    <!-- Pokemon Type -->
                    <div class="col mb-3 m-auto">
                        <label for="PokemonType" class="form-label">Pokemon Type</label>
                        <InputSelect id="PokemonType" @bind-Value="pokemon.PokemonType" class="form-select">
                            <option dsabled value="">Select Type</option>
                            <option value="Grass">Grass</option>
                            <option value="Fire">Fire</option>
                            <option value="Water">Water</option>
                            <option value="Normal">Normal</option>
                            <option value="Flying">Flying</option>
                            <option value="Bug">Bug</option>
                            <option value="Poison">Poison</option>
                            <option value="Electric">Electric</option>
                            <option value="Ground">Ground</option>
                            <option value="Rock">Rock</option>
                            <option value="Ice">Ice</option>
                            <option value="Steel">Steel</option>
                            <option value="Fighting">Fighting</option>
                            <option value="Psychic">Psychic</option>
                            <option value="Dark">Dark</option>
                            <option value="Fairy">Fairy</option>
                            <option value="Ghost">Ghost</option>
                            <option value="Dragon">Dragon</option>
                        </InputSelect>
                    </div>
                    <!-- Sleep Type -->
                    <div class="col mb-3 m-auto">
                        <label for="SleepType" class="form-label">Sleep Type</label>
                        <InputSelect id="SleepType" @bind-Value="pokemon.SleepType" class="form-select">
                            <option value="Dozing">Dozing</option>
                            <option value="Snoozing">Snoozing</option>
                            <option value="Slumbering">Slumbering</option>
                        </InputSelect>
                    </div>
                    <!-- Speciality-->
                    <div class="col mb-3 m-auto">
                        <label for="Speciality" class="form-label">Specialty</label>
                        <InputSelect id="Speciality" @bind-Value="pokemon.Speciality" class="form-select">
                            <option value="Berries">Berries</option>
                            <option value="Ingredients">Ingredients</option>
                            <option value="Skills">Skills</option>
                        </InputSelect>
                    </div>
                </div>
                <!-- Variation Check -->
                <div class="row">
                    <div class="input-group mb-3">
                        <!-- Variation Check -->
                        <div class=" d-inline-flex">
                            <InputCheckbox id="IsVariation" @bind-Value="pokemon.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="pokemon.VariationName" class="form-control" />
                        </div>
                    </div>
                </div>
                

                <!-- Image URL Input -->
                <div class="row mb-3 m-auto">
                    <label for="ImageUrl" class="form-label">Base Image URL</label>
                    <InputText id="ImageUrl" @bind-Value="pokemon.PokemonImageUrl" class="form-control" />
                </div>
                <!-- Shiny Image URL Input -->
                <div class="row mb-3 m-auto">
                    <label for="ImageUrl" class="form-label">Shiny Image URL</label>
                    <InputText id="ImageUrl" @bind-Value="pokemon.PokemonShinyImageUrl" class="form-control" />
                </div>
                <!-- Flavor Text Input -->
                <div class="row mb-3 m-auto">
                    <label for="FlavorText" class="form-label">Flavor Text</label>
                    <InputText id="FlavorText" @bind-Value="pokemon.FlavorText" class="form-control" />
                </div>

                <!-- Form Buttons -->
                <div class="d-flex justify-content-between">
                    <button type="button" class="btn btn-secondary mb-3" @onclick="Cancel">Cancel</button>
                    <button type="submit" class="btn btn-primary mb-3">Save Changes</button>
                </div>
            </EditForm>
        </div>
    </div>
}