@using MoonCore.Blazor.Tailwind.Forms
@using MoonlightServers.Shared.Enums

@typeparam TPropertyType where TPropertyType : class, MoonlightServers.Shared.Interfaces.IStarVariable
@inherits BaseFormComponent<List<TPropertyType>>

<div class="flex justify-end mb-5">
    <button type="button" @onclick="AddVariable" class="btn btn-primary">Add variable</button>
</div>

<div class="grid grid-cols-2 gap-4">
    @foreach (var variable in Binder.Value)
    {
        <div class="col-span-1 card p-0">
            <div class="card-body grid grid-cols-2 gap-2">

                <div class="col-span-1">
                    <label class="block text-sm font-medium leading-6 text-white">Name</label>
                    <input @bind="variable.Name" type="text" class="form-input w-full"/>
                </div>

                <div class="col-span-1">
                    <label class="block text-sm font-medium leading-6 text-white">Description</label>
                    <input @bind="variable.Description" type="text" class="form-input w-full"/>
                </div>

                <div class="col-span-1">
                    <label class="block text-sm font-medium leading-6 text-white">Key</label>
                    <input @bind="variable.Key" type="text" class="form-input w-full"/>
                </div>

                <div class="col-span-1">
                    <label class="block text-sm font-medium leading-6 text-white">Default Value</label>
                    <input @bind="variable.DefaultValue" type="text" class="form-input w-full"/>
                </div>

                <div class="col-span-1">
                    <label class="block text-sm font-medium leading-6 text-white">Allow Viewing</label>
                    <Switch @bind-Value="variable.AllowViewing" />
                </div>

                <div class="col-span-1">
                    <label class="block text-sm font-medium leading-6 text-white">Allow Editing</label>
                    <Switch @bind-Value="variable.AllowEditing" />
                </div>

                <div class="col-span-1">
                    <label class="block text-sm font-medium leading-6 text-white">Type</label>
                    <select @bind="variable.Type" class="form-select w-full">
                        @foreach (var val in Enum.GetValues<StarVariableType>())
                        {
                            <option value="@val">@val</option>
                        }
                    </select>
                </div>

                <div class="col-span-1">
                    <label class="block text-sm font-medium leading-6 text-white">Filter</label>
                    <input @bind="variable.Filter" type="text" class="form-input w-full"/>
                </div>
                
            </div>
            <div class="card-footer">
                
                <div class="flex justify-end mx-2">
                    <button @onclick="() => DeleteVariable(variable)" class="btn btn-danger">
                        <i class="icon-trash mr-2"></i>
                        Remove
                    </button>
                </div>
                
            </div>
        </div>
    }
</div>

@code
{
    private async Task AddVariable()
    {
        Binder.Value.Add(Activator.CreateInstance<TPropertyType>());
        await InvokeAsync(StateHasChanged);
    }

    private async Task DeleteVariable(TPropertyType variable)
    {
        Binder.Value.Remove(variable);
        await InvokeAsync(StateHasChanged);
    }
}