<div class="bottom-sheet-backdrop @(IsSheetVisible ? "show" : "")" @onclick="CloseBottomSheet"></div>

<div class="bottom-sheet-container @(IsSheetVisible ? "show" : "")">
    <div class="bottom-sheet pb-safe-area">
        <div class="title">
            <MudText Typo="Typo.h6">
                <b>Aggiungi un promemoria</b>
            </MudText>
            <MudIconButton Icon="@Icons.Material.Filled.Close" OnClick="() => CloseBottomSheet()"/>
        </div>
        
        <div class="input-card">
            <div class="form-container">
                <span>Data</span>

                <MudTextField T="DateTime?" Format="yyyy-MM-dd" InputType="InputType.Date" @bind-Value="Date" />
            </div>
        </div>
        
        <div class="input-card">
            <MudTextField T="string?" Placeholder="Memo" Variant="Variant.Text" Lines="4" @bind-Value="Memo" />
        </div>

        <div class="button-section">
            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="() => CloseBottomSheet(true)">Salva</MudButton>
        </div>
    </div>
</div>

@code {
    [Parameter] public bool IsSheetVisible { get; set; }
    [Parameter] public EventCallback<bool> IsSheetVisibleChanged { get; set; }

    private DateTime? Date { get; set; } = DateTime.Today;
    private string? Memo { get; set; }

    private void CloseBottomSheet(bool save)
    {
        IsSheetVisible = false;
        IsSheetVisibleChanged.InvokeAsync(IsSheetVisible);
    }

    private void CloseBottomSheet() => CloseBottomSheet(false);

}