@page "/Calendar"
@using Template.Shared.Components.Layout

<HeaderLayout Title="Agenda" />

<div class="content">
    <MudButtonGroup Size="Size.Small" Color="Color.Surface" OverrideStyles="true" Variant="Variant.Filled">
        <MudButton>Giorno</MudButton>
        <MudButton Disabled="true">Settimana</MudButton>
        <MudButton Disabled="true">Mese</MudButton>
    </MudButtonGroup>

    <div class="activity-filter">
        <div class="date-controller">
            <MudIconButton Icon="@Icons.Material.Filled.ChevronLeft" @onclick="() => DateFilter = DateFilter.AddDays(-1)" Color="Color.Surface"/>
            <MudButton Variant="Variant.Text" Color="Color.Surface" OnClick="OpenCalendar">
                @($"{DateFilter:M}")
            </MudButton>
            <MudIconButton Icon="@Icons.Material.Filled.ChevronRight" @onclick="() => DateFilter = DateFilter.AddDays(1)" Color="Color.Surface" />
        </div>

        <MudOverlay @bind-Visible="_isVisible" DarkBackground="true" AutoClose="true">
            <MudDatePicker PickerVariant="PickerVariant.Static" Date="DateFilter" />
        </MudOverlay>
    </div>

    <div class="card-container">
        <ActivityCard Type="memo" />
        <ActivityCard Type="commessa"/>
        <ActivityCard Type="interna"/>
    </div>
    
    <MudMenu PopoverClass="custom_popover" Class="custom-mudfab" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomRight">
        <ActivatorContent>
            <MudFab Color="Color.Primary" Size="Size.Small" StartIcon="@Icons.Material.Filled.Add" />
        </ActivatorContent>
        <ChildContent>
            <MudMenuItem>Nuovo contatto</MudMenuItem>
            <MudMenuItem>Nuova attivitą</MudMenuItem>
        </ChildContent>
    </MudMenu>
</div>

@code {
    private DateTime DateFilter { get; set; } = DateTime.Today;

    private bool _isVisible;

    public void OpenCalendar()
    {
        _isVisible = true;
        StateHasChanged();
    }

}