@page "/MedicalHistoryActionPage"
@inject NavigationManager NavigationManager
<BasePageUi Title="افزودن یک شرحال جدید" Description="لطفا اطلاعات بیمار را با دقت کامل وارد کنید">

    <div class="flex flex-col w-full h-full rounded-t-xl">

        <MudCarousel class="w-full h-full overflow-x-hidden overflow-y-scroll" @ref="_carousel" ShowArrows="false"
            ShowBullets="false" EnableSwipeGesture="false" AutoCycle="false" TData="object">

            <MudCarouselItem>
                <div class="flex flex-col w-full h-full">
                    <MedicalHistoryActionStep1 />
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full">
                    <MedicalHistoryActionStep2 />
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full">
                    <MedicalHistoryActionStep3 />
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full">
                    <MedicalHistoryActionStep4 />
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full">
                    <MedicalHistoryActionStep5 />
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full">
                    <MedicalHistoryActionStep6 SubmittedOnClick="CompleteCreateMedicalHistory" />
                </div>
            </MudCarouselItem>
        </MudCarousel>

        @if(!medicalHistorySubmited){
        <MudPaper class="bottom-0 left-0 fixed w-full bg-[--color-medicalhistory] px-3 pt-4 pb-3 rounded-t-xl flex flex-row">

            @if (_currentStep == 4)
            {
                <MudButton @onclick="CompleteStepClicked" Variant="Variant.Filled"  Color="Color.Primary" IconSize="Size.Large" StartIcon="@Icons.Material.Filled.ChevronRight" class="font-extrabold rounded-full">تکمیل</MudButton>
            }
            else
            {
                <MudButton @onclick="CompleteStepClicked" Variant="Variant.Outlined" IconSize="Size.Large"
                    StartIcon="@Icons.Material.Filled.ChevronRight" class="font-extrabold rounded-full">مرحله بعد
                </MudButton>
            }

            <p class="my-auto text-lg font-extrabold text-center grow">@_stepCounter</p>
            <MudButton @onclick="RollBackStepClicked" IconSize="Size.Large" EndIcon="@Icons.Material.Filled.ChevronLeft"
                class="font-extrabold rounded-full">مرحله قبل</MudButton>
        </MudPaper>
        }
    </div>
</BasePageUi>

@code {
    private MudCarousel<object>? _carousel;
    private int _currentStep = 0;
    private string _stepCounter = "1 / 5";
    private bool medicalHistorySubmited = false;
    private void CompleteStepClicked()
    {
        _carousel?.MoveTo(++_currentStep);
        _stepCounter = string.Format("{0} / 5", _currentStep + 1);
        if (_currentStep == 5)
            medicalHistorySubmited = true;
    }
    private void RollBackStepClicked()
    {
        _carousel?.MoveTo(--_currentStep);
        _stepCounter = string.Format("{0} / 5", _currentStep + 1);
    }

    private void CompleteCreateMedicalHistory()
    {
        NavigationManager.NavigateTo("HomePage");
    }
}