@page "/MedicalHistoryTemplateActionPage"
@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">
                    <MedicalHistoryTemplateActionStep1 />
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full">
                    <MedicalHistoryTemplateActionStep2 />
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full">
                    <MedicalHistoryTemplateActionStep3 />
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full">
                    <MedicalHistoryTemplateActionStep4 />
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full">
                    <MedicalHistoryTemplateActionStep5 />
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full">
                    <MedicalHistoryTemplateActionStep6 SubmittedOnClick="CompleteCreateMedicalHistory" />
                </div>
            </MudCarouselItem>
        </MudCarousel>

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

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

                <p class="my-auto text-lg text-[--color-medicalhistory] font-extrabold text-center grow">@_stepCounter</p>
            <MudButton @onclick="RollBackStepClicked" IconSize="Size.Large" EndIcon="@Icons.Material.Filled.ChevronLeft"
                           class="font-extrabold text-[--color-medicalhistory] 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");
    }
}