@page "/calendars"
@inject IStringLocalizer<Calendars> Localizer

<h3>Calendar</h3>

<h4>Containers that display data as calendars. When the data is date or by date, such as schedule, schedule, price calendar, etc., lunar calendar, etc. Year/month switching is currently supported.</h4>

<DemoBlock Title="Basic usage" Introduction="The underlying calendar is displayed." Name="Normal">
    <Calendar ValueChanged="@OnValueChanged" />
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Data is bound in both directions" Introduction="The calendar box automatically updates the text box when the time is selected" Name="Bind">
    <Calendar @bind-Value="@BindValue" />
    <BootstrapInput @bind-Value="@BindValue" Formatter="@Formatter" style="margin-top: 1rem;" />
</DemoBlock>

<DemoBlock Title="Cell Template" Introduction="customer the cell template via <code>CellTemplate</code>" Name="CellTemplate">
    <Calendar>
        <CellTemplate>
            <td class="@context.DefaultCss">
                <div class="calendar-day">
                    <div>@context.CellValue.Day</div>
                </div>
            </td>
        </CellTemplate>
    </Calendar>
</DemoBlock>

<DemoBlock Title="Show by week" Introduction="By setting the property <code>CalendarViewMode.Week</code>" Name="ViewModel">
    <Calendar ViewMode="CalendarViewMode.Week" />
</DemoBlock>

<DemoBlock Title="Practical applications" Introduction="Curriculum" Name="App">
    <p>Currently, the <code>ChildContext</code> is temporarily rendered by the week component, and the data-related operating components in all cells are not encapsulated and will be refined later</p>
    <Calendar ViewMode="CalendarViewMode.Week">
        <tr>
            <td class="none">None</td>
            <td rowspan="4"><div class="less ch">Chinese</div></td>
            <td>Math</td>
            <td>Chinese</td>
            <td>Math</td>
            <td>English</td>
            <td class="none">None</td>
        </tr>
        <tr>
            <td class="none">None</td>
            <td>Math</td>
            <td rowspan="3"><div class="less en">English</div></td>
            <td>Math</td>
            <td>English</td>
            <td class="none">None</td>
        </tr>
        <tr>
            <td class="none">None</td>
            <td>Math</td>
            <td>Math</td>
            <td>English</td>
            <td class="none">None</td>
        </tr>
        <tr>
            <td class="none">None</td>
            <td>Math</td>
            <td>Math</td>
            <td>English</td>
            <td class="none">None</td>
        </tr>
        <tr>
            <td style="background-color: #f8f9fa;" colspan="7">午休</td>
        </tr>
        <tr>
            <td class="none">None</td>
            <td>Math</td>
            <td>Chinese</td>
            <td>English</td>
            <td>Math</td>
            <td>English</td>
            <td class="none">None</td>
        </tr>
        <tr>
            <td class="none">None</td>
            <td>Study</td>
            <td>Study</td>
            <td>Study</td>
            <td>Study</td>
            <td>Study</td>
            <td class="none">None</td>
        </tr>
        <tr>
            <td class="none">None</td>
            <td>Study</td>
            <td>Study</td>
            <td>Study</td>
            <td>Study</td>
            <td>Study</td>
            <td class="none">None</td>
        </tr>
    </Calendar>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Calendars
{
    private BlockLogger? Trace { get; set; }

    private DateTime BindValue { get; set; } = DateTime.Today;

    private void OnValueChanged(DateTime ts)
    {
        Trace?.Log($"{ts:yyyy-MM-dd}");
    }

    private static string Formatter(DateTime ts) => ts.ToString("yyyy-MM-dd");

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
        new EventItem()
        {
            Name = "ValueChanged",
            Description = Localizer["ValueChanged"],
            Type ="EventCallback<DateTime>"
        }
    };

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        // TODO: 移动到数据库中
        new AttributeItem() {
            Name = "Value",
            Description = Localizer["Value"],
            Type = "DateTime",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "ChildContent",
            Description = Localizer["ChildContent"],
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "CellTemplate",
            Description = Localizer["CellTemplate"],
            Type = "RenderFragment<CalendarCellValue>",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}