@page "/datetimeranges"
@inject IStringLocalizer<DateTimeRanges> Localizer

<h3>Date Time Range Picker</h3>

<h4>Select a date in the same picker</h4>

<DemoBlock Title="Basic skills" Introduction="Take 'day' as the basic unit, select a period of time" Name="Normal">
    <DateTimeRange @bind-Value="@DateTimeRangeValue1" OnConfirm="OnConfirm" />
    <BlockLogger @ref="DateLogger" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Data two-way binding" Introduction="Click the confirm button, the time selection box value is the same as the text box value" Name="BindValue">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimeRange @bind-Value="@DateTimeRangeValue2" OnValueChanged="v => OnValueChanged(v, 1)" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="time limit" />
                <Display TValue="string" Value="@range2" />
            </BootstrapInputGroup>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Max and Min" Introduction="set time range" Name="MaxMinValue">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimeRange @bind-Value="@DateTimeRangeValue5" OnValueChanged="v => OnValueChanged(v, 2)" MinValue=DateTime.Today.AddDays(-7) MaxValue=DateTime.Today.AddDays(7) />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="time limit" />
                <Display TValue="string" Value="@range" />
            </BootstrapInputGroup>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Disabled" Introduction="When the <code>IsDisabled</code> attribute value is set to <code>true</code>, the component disables input" Name="Disabled">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimeRange Value="@DateTimeRangeValue3" IsDisabled="@IsDisabled" />
        </div>
        <div class="col-12 col-sm-6">
            <Switch @bind-Value="@IsDisabled" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Sidebar with shortcut keys" Introduction="When the <code>ShowSidebar</code> property value is set to <code>true</code>, the component displays the shortcut sidebar" Name="Sidebar">
    <p>by setting <code>ShowSidebar</code> The parameter enables the display sidebar shortcut options function, by setting <code>SidebarItems</code> The parameter collection replaces the default shortcuts built into the component</p>
    <DateTimeRange Value="@DateTimeRangeValue4" ShowSidebar="true" />
</DemoBlock>

<DemoBlock Title="Show today button" Introduction="When the <code>ShowToday</code> attribute value is set to <code>true</code>, the today shortcut button is displayed below the component" Name="Today">
    <p>Click <code>Today </code> Button，time limit <code>yyyy-MM-dd 00:00:00 到 yyyy-MM-dd 23:59:59</code></p>
    <DateTimeRange Value="@DateTimeRangeValue4" ShowToday="true" />
</DemoBlock>

<DemoBlock Title="Used in the form" Introduction="Build components into <code>ValidateForm</code> used in" Name="ValidateForm">
    <FormInlineSwitch @bind-Value="@FormRowType" class="mb-3"></FormInlineSwitch>
    <ValidateForm Model="@Model">
        <div class="@GroupFormClassString">
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimeRange @bind-Value="@Model.Range" />
            </div>
            <div class="col-12">
                <Button ButtonType="ButtonType.Submit" Icon="fa-fw fa-solid fa-floppy-disk" Text="Submit" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="自动关闭" Introduction="点击侧边栏快捷方式自动关闭弹窗" Name="AutoClose">
    <div class="row">
        <div class="col-12 col-sm-6">
            <DateTimeRange Value="@DateTimeRangeValue4" ShowSidebar="true" AutoCloseClickSideBar="true" />
        </div>
    </div>
</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/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class DateTimeRanges
{
    [NotNull]
    private BlockLogger? DateLogger { get; set; }

    private DateTimeRangeValue DateTimeRangeValue1 { get; set; } = new DateTimeRangeValue();

    private DateTimeRangeValue DateTimeRangeValue2 { get; set; } = new DateTimeRangeValue();

    private DateTimeRangeValue DateTimeRangeValue3 { get; set; } = new DateTimeRangeValue() { Start = DateTime.Today, End = DateTime.Today.AddDays(3) };

    private DateTimeRangeValue DateTimeRangeValue4 { get; set; } = new DateTimeRangeValue();

    private DateTimeRangeValue DateTimeRangeValue5 { get; set; } = new DateTimeRangeValue() { Start = DateTime.Today, End = DateTime.Today.AddDays(3) };

    private string? range;
    private string? range2;

    private bool IsDisabled { get; set; } = true;

    [NotNull]
    private RangeFoo? Model { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }

    private RowType FormRowType { get; set; }

    private string? GroupFormClassString => CssBuilder.Default("row g-3")
        .AddClass("form-inline", FormRowType == RowType.Inline)
        .Build();

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        Model = new RangeFoo()
        {
            DateTime = DateTime.Now,
            Range = new DateTimeRangeValue()
            {
                Start = DateTime.Today.AddMonths(-1),
                End = DateTime.Today
            }
        };
    }

    private Task OnValueChanged(DateTimeRangeValue val, int index)
    {
        var ret = "";
        if (val.Start != DateTime.MinValue)
        {
            ret = val.Start.ToString("yyyy-MM-dd");
        }
        if (val.End != DateTime.MinValue)
        {
            ret = $"{ret} - {val.End.ToString("yyyy-MM-dd")}";
        }
        if (index == 1)
        {
            range2 = ret;
        }
        else
        {
            range = ret;
        }
        return Task.CompletedTask;
    }

    private Task OnConfirm(DateTimeRangeValue value)
    {
        DateLogger?.Log($"选择的时间范围是: {value.Start:yyyy-MM-dd} - {value.End:yyyy-MM-dd}");
        return Task.CompletedTask;
    }

    private class RangeFoo : Foo
    {
        [Required(ErrorMessage = "{0}不可为空")]
        [Display(Name = "时间范围")]
        public DateTimeRangeValue Range { get; set; } = new();
    }

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
        new EventItem()
        {
            Name = "OnConfirm",
            Description="Confirm callback delegate",
            Type ="Action"
        },
        new EventItem()
        {
            Name = "OnClearValue",
            Description="Clear callback delegate",
            Type ="Action"
        },
        new EventItem()
        {
            Name = "OnValueChanged",
            Description="ValueChanged callback delegate",
            Type ="Func<DateTimeRangeValue,Task>"
        }
    };

    /// <summary>
    /// Get property method
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "ShowLabel",
            Description = "Whether to show the pre-label",
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "ShowSidebar",
            Description = "Whether to show the shortcut sidebar",
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "ShowToday",
            Description = "Whether to show today shortcut button",
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = "IsDisabled",
            Description = "Whether to disable default is false",
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = "ShowSidebar",
            Description = "Whether to display the shortcut sidebar The default is fasle",
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = "Placement",
            Description = "Set the popup location",
            Type = "Placement",
            ValueList = "top|bottom|left|right",
            DefaultValue = "auto"
        },
        new AttributeItem() {
            Name = "DisplayText",
            Description = "Pre-label display text",
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "DateFormat",
            Description = "Date format string defaults to yyyy-MM-dd",
            Type = "string",
            ValueList = " — ",
            DefaultValue = "yyyy-MM-dd"
        },
        new AttributeItem() {
            Name = "Value",
            Description = "Custom class containing start time end time",
            Type = "DateTimeRangeValue",
            ValueList = "",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "SidebarItems",
            Description = "Sidebar shortcut options collection",
            Type = "IEnumerable<DateTimeRangeSidebarItem>",
            ValueList = "",
            DefaultValue = " — "
        }
    };
}