@namespace Connected.Components
@inherits Picker<DateTime?>

@Render

@code {

	protected override RenderFragment PickerContent =>
		@<CascadingValue Value="@this" IsFixed="true">
			<PickerToolbar Class="mud-picker-datepicker-toolbar" DisableToolbar="@DisableToolbar" Orientation="@Orientation" Color="@Color">
				<Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="mud-button-year" OnClick="OnYearClick">@GetFormattedYearString()</Button>
				<Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="mud-button-date" OnClick="OnFormattedDateClick">@GetTitleDateString()</Button>
			</PickerToolbar>
			<PickerContent>
				<div class="mud-picker-calendar-content @($"mud-picker-calendar-content-{MaxMonthColumns ?? DisplayMonths}")">
					@{
						int dayId = 0;
						@if (_picker_month.HasValue && _picker_month.Value.Year == 1 && _picker_month.Value.Month == 1)
						{
							dayId = -1;
						}
					}
					@for (int displayMonth = 0; displayMonth < DisplayMonths; ++displayMonth)
					{
						int tempMonth = displayMonth; //without local variable month names are wrong

						<div class="mud-picker-calendar-container">
							@if (tempMonth == 0 && CurrentView == OpenTo.Year)
							{
								<div id="pickerYears" class="mud-picker-year-container">
									@for (int i = GetMinYear(); i <= GetMaxYear(); i++)
									{
										var year = i;
										<div class="mud-picker-year" id="@(_componentId + year)" @onclick="(() => OnYearClicked(year))" @onclick:stopPropagation="true">
											<TextContent Typo="@GetYearTypo(year)" Class="@GetYearClasses(year)">@GetCalendarYear(year)</TextContent>
										</div>
									}
								</div>
							}
							else if (tempMonth == 0 && CurrentView == OpenTo.Month)
							{
								var calendarYear = GetCalendarYear(PickerMonth?.Year ?? DateTime.Today.Year);
								var prevLabel = $"Go to previous year {calendarYear - 1}";
								var nextLabel = $"Go to next year {calendarYear + 1}";

								<div class="mud-picker-calendar-header">
									<div class="mud-picker-calendar-header-switch">
										@if (!FixYear.HasValue)
										{
											<IconButton aria-label="@prevLabel" Icon="@PreviousIcon" OnClick="OnPreviousYearClick" Class="mud-flip-x-rtl" />
											<button type="button" class="mud-picker-slide-transition mud-picker-calendar-header-transition" @onclick="OnYearClick" @onclick:stopPropagation="true">
												<TextContent Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent>
											</button>
											<IconButton aria-label="@nextLabel" Icon="@NextIcon" OnClick="OnNextYearClick" Class="mud-flip-x-rtl" />
										}
										else
										{
											<TextContent Class="mud-picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent>
										}
									</div>
								</div>
								<div class="mud-picker-month-container">
									@foreach (var month in GetAllMonths())
									{
										<button type="button" aria-label="@GetMonthName(month)" class="mud-picker-month" @onclick="(() => OnMonthSelected(month))" @onclick:stopPropagation="true">
											<TextContent Typo="@GetMonthTypo(month)" Class="@GetMonthClasses(month)">@GetAbbreviatedMonthName(month)</TextContent>
										</button>
									}
								</div>
							}
							else if (CurrentView == OpenTo.Date || tempMonth > 0)
							{
								var prevLabel = $"Go to previous month {GetMonthName((tempMonth - 1) % 12)}";
								var nextLabel = $"Go to next month {GetMonthName((tempMonth + 1) % 12)}";

								<div class="@GetCalendarHeaderClasses(tempMonth)">
									<div class="mud-picker-calendar-header-switch">
										@if (!FixMonth.HasValue)
										{
											<IconButton aria-label="@prevLabel" Class="mud-picker-nav-button-prev mud-flip-x-rtl" Icon="@PreviousIcon" OnClick="OnPreviousMonthClick" />
											<button type="button" class="mud-picker-slide-transition mud-picker-calendar-header-transition mud-button-month" @onclick="(() => OnMonthClicked(tempMonth))" @onclick:stopPropagation="true">
												<TextContent Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent>
											</button>
											<IconButton aria-label="@nextLabel" Class="mud-picker-nav-button-next mud-flip-x-rtl" Icon="@NextIcon" OnClick="OnNextMonthClick" />
										}
										else
										{
											<TextContent Class="mud-picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent>
										}
									</div>
									<div class="mud-picker-calendar-header-day">
										@if (ShowWeekNumbers)
										{
											<div class="mud-picker-calendar-week">
												<Text Typo="Typo.caption" Class="mud-picker-calendar-week-text"></Text>
											</div>
										}
										@foreach (var dayname in GetAbbreviatedDayNames())
										{
											<TextContent Typo="Typo.caption" Class="mud-day-label">@dayname</TextContent>
										}
									</div>
								</div>
								<div class="mud-picker-calendar-transition mud-picker-slide-transition">
									<div class="mud-picker-calendar">
										@for (int week = 0; week < 6; week++)
										{
											int tempWeek = week;
											var firstMonthFirstYear = _picker_month.HasValue && _picker_month.Value.Year == 1 && _picker_month.Value.Month == 1;

											@if (ShowWeekNumbers)
											{
												<div class="mud-picker-calendar-week">
													<Text class="mud-picker-calendar-week-text" Typo="Typo.caption">@GetWeekNumber(tempMonth, tempWeek)</Text>
												</div>
											}
											@foreach (var day in GetWeek(tempMonth, tempWeek))
											{
												var tempId = ++dayId;

												@if (tempId != 0 || !firstMonthFirstYear)
												{
													var selectedDay = !firstMonthFirstYear ? day : day.AddDays(-1);
													<button @key="@(!firstMonthFirstYear ? selectedDay : tempId)" type="button" style="--day-id: @(!firstMonthFirstYear ? tempId: tempId + 1);"
									 class="mud-button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day @(!firstMonthFirstYear || day.Day == _picker_month.Value.Day? GetDayClasses(tempMonth, day) : GetDayClasses(tempMonth, selectedDay))"
													@onclick="(() => { var d = selectedDay; OnDayClicked(d); })"
													@onclick:stopPropagation="true"
									 aria-label='@selectedDay.ToString("dddd, dd MMMM yyyy")'
									 onmouseover="this.closest('.mud-picker-calendar-content').style.setProperty('--selected-day', @(!firstMonthFirstYear ? tempId: tempId + 1));"
									 disabled="@((selectedDay < MinDate) || (selectedDay > MaxDate) || IsDateDisabledFunc(selectedDay))">
														<p class="mud-typography mud-typography-body2 mud-inherit-text">@GetCalendarDayOfMonth(selectedDay)</p>
													</button>
												}
												else
												{
													<button @key="0" type="button" style="--day-id: 1;"
									 class="mud-button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day mud-day"
									 aria-label='' disabled>
														<p class="mud-typography mud-typography-body2 mud-inherit-text"></p>
													</button>
												}
											}
										}
									</div>
								</div>
							}
						</div>
					}
				</div>
			</PickerContent>
		</CascadingValue>;
}