@page "/HomePage"
@inject NavigationManager NavigationManager
@inject IUserUtility UserUtility
@inject ISnackbar Snackbar
@inject IRestWrapper RestWrapper


<MudStack class="w-screen h-screen bg-[#356859]">
    <div @onclick="ProfileClicked" class="flex flex-row mt-4 mb-3">
        <MudStack Row="true" >
            <MudAvatar Size="Size.Large" Class="mr-5">
                <MudImage
                    Src="https://qph.cf2.quoracdn.net/main-thumb-161841968-200-xtisrhulnnwiuyeojsvojtoqjrqsglrj.jpeg">
                </MudImage>
            </MudAvatar>
            <MudStack class="justify-center ">
                <p class="font-bold text-lg text-white font-iranyekan">@ViewModel?.User.FullName</p>
                <p class="-mt-3 text-white font-light font-iranyekan">@ViewModel?.User.PhoneNumber</p>
            </MudStack>
        </MudStack>
        <MudButton @onclick="ProfileClicked" class="my-auto ml-5 mr-auto font-extrabold bg-white rounded-lg">@ViewModel?.User.SectionName</MudButton>
    </div>
    <div class="bg-[#EEEEEE] w-full h-full flex flex-col rounded-t-xl">
        <MudStack class="pb-20 bg-[#EEEEEE] rounded-t-xl">
            <div class="flex flex-row mx-5 mt-5">
                <div>
                    <p class="font-extrabold text-[#356859]">شرح حال های شما</p>
                    <p class="text-xs font-light ">لیست شرح حال های</p>
                </div>
                
                <MudButton DisableElevation="false" @onclick="CreateMedicalHistoryClicked" 
                           class="text-[#356859] my-auto mr-auto font-extrabold bg-white rounded-lg drop-shadow-md">+ افزودن</MudButton>
            </div>
            <MudSelect T="DayQueryFilter" ToStringFunc="filter => filter.ToDisplay()" 
                       Value="@ViewModel.SelectedDayFilter"
                       ValueChanged="async (day) => { await ViewModel.SelectDayFilter(day);}"
                       Margin="Margin.Dense"
                       Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter"
                       class="text-[#356859] mx-5 font-extrabold rounded-lg">
                <MudSelectItem T="DayQueryFilter" Value="DayQueryFilter.Today" ><p>امروز</p></MudSelectItem>
                <MudSelectItem T="DayQueryFilter" Value="DayQueryFilter.Yesterday"><p>دیروز</p></MudSelectItem>
                <MudSelectItem T="DayQueryFilter" Value="DayQueryFilter.Week"><p>یک هفته اخیر</p></MudSelectItem>
            </MudSelect>

            @if (@ViewModel.IsProcessing)
            {
                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2">
                    @for (int i = 0; i < 4; i++)
                    {
                        <MudCard class="bg-transparent p-4 rounded-lg" Elevation="0">
                            <div class="flex flex-row">
                                <div class="mx-4 mb-3 basis-1/3">
                                    <MudSkeleton SkeletonType="SkeletonType.Rectangle" Animation="Animation.Wave" />
                                    <MudSkeleton class="mt-3 h-2" SkeletonType="SkeletonType.Rectangle" Animation="Animation.Wave" />
                                </div>

                                <MudSkeleton class="mx-4 mb-3 h-10 basis-1/4 mr-auto" SkeletonType="SkeletonType.Rectangle" Animation="Animation.Wave" />
                            </div>
                        
                            <div class="grid grid-cols-3">
                                <MudSkeleton class="mx-4" Animation="Animation.Wave" SkeletonType="SkeletonType.Text" />
                                <MudSkeleton class="mx-4" Animation="Animation.Wave" />
                                <MudSkeleton class="mx-4" Animation="Animation.Wave" />
                            </div>
                        </MudCard>
                    }
                </div>
            }
            else
            {
                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2">
                    @foreach (var item in @ViewModel.PageDto)
                    {
                    <MedicalHistoryItemTemplate Clicked="MedicalHistoryClicked" MedicalHistory="@item" />
                    }
                </div>
            }

        </MudStack>

        <MudPaper class="fixed bottom-0 py-1 left-0 z-50 w-full bg-white rounded-t-xl">
            <div class="grid h-full max-w-lg grid-cols-4 mx-auto font-medium">


                <button type="button" class="inline-flex flex-col items-center justify-center px-1 group">

                    <MudIcon Icon="@Icons.Material.Outlined.MedicalInformation"
                             class="w-8 h-8 mb-2 text-[--color-primary]" />
                    <span class="-mt-1 text-sm text-[--color-primary]">شرح حال</span>
                </button>

                <button @onclick="MedicalHistoryTemplatesClicked" type="button" class="inline-flex flex-col items-center justify-center px-1 group">

                    <MudIcon Icon="@Icons.Material.Outlined.Difference"
                             Class="w-8 h-8 mb-2 text-gray-400 group-hover:text-[--color-primary]" />
                    <span class="-mt-1 text-sm text-gray-400 group-hover:text-[--color-primary]">پیش نویس</span>
                </button>

                <button @onclick="MedicalOrdersClicked" type="button" class="inline-flex flex-col items-center justify-center px-1 py-1 group">

                    <MudIcon Icon="@Icons.Material.Outlined.PostAdd"
                             Class="w-8 h-8 mb-2 text-gray-400 group-hover:text-[--color-primary]" />
                    <span class="-mt-1 text-sm text-gray-400 group-hover:text-[--color-primary]">اوردر ها</span>
                </button>

                <button @onclick="ProfileClicked" type="button"
                    class="inline-flex flex-col items-center justify-center px-1 group">

                    <MudIcon Icon="@Icons.Material.Filled.PersonOutline"
                             Class="w-8 h-8 mb-2 text-gray-400 group-hover:text-[--color-primary]" />
                    <span class="-mt-1 text-sm text-gray-400 group-hover:text-[--color-primary]">پروفایل</span>
                </button>
            </div>
        </MudPaper>
    </div>
</MudStack>

@code {

    private HomePageViewModel ViewModel { get; set; }

    public void ProfileClicked() => NavigationManager.NavigateTo("ProfilePage");

    public void CreateMedicalHistoryClicked() => NavigationManager.NavigateTo("MedicalHistoryActionPage");

    public void MedicalHistoryClicked(MedicalHistorySDto medicalHistory) => NavigationManager.NavigateTo($"MedicalHistoryActionPage/{medicalHistory.Id}");

    public void MedicalHistoryTemplatesClicked() => NavigationManager.NavigateTo("MedicalHistoryTemplatesPage");

    public void MedicalOrdersClicked() => NavigationManager.NavigateTo("MedicalOrdersPage");

    protected override async Task OnInitializedAsync()
    {
        ViewModel = new HomePageViewModel(UserUtility,RestWrapper,Snackbar);
        await ViewModel.InitializeAsync();
        await base.OnInitializedAsync();
    }

}