@page "/carousels"
@inject IStringLocalizer<Carousels> Localizer

<h3>Carousel</h3>

<h4>In limited space, loop through the same type of pictures, text, and more</h4>

<DemoBlock Title="Basic usage" Introduction="A wide range of basic usages are used to bind components to an array of picture paths by setting the <code>Items</code> property values" Name="Normal">
    <Carousel Images="@Images" Width="280" ShowControls="false" ShowIndicators="false"></Carousel>
</DemoBlock>

<DemoBlock Title="Show Controls" Introduction="Set <code>ShowControls</code> to <code>true</code> for show/hide the controls of Carousel" Name="ShowControls">
    <Carousel Images="@Images" Width="280" ShowControls="true" ShowIndicators="false"></Carousel>
</DemoBlock>

<DemoBlock Title="Indicator" Introduction="Set <code>ShowIndicators</code> to <code>true</code> for show/hide the indicator of Carousel" Name="ShowIndicators">
    <Carousel Images="@Images" Width="280" ShowControls="true" ShowIndicators="true"></Carousel>
</DemoBlock>

<DemoBlock Title="Fade in and out" Introduction="By setting the <code>IsFade</code> property, the picture switches with a fade-in and fade-out effect" Name="Fade">
    <Carousel Images="@Images" Width="280" IsFade="true"></Carousel>
</DemoBlock>

<DemoBlock Title="Caption" Introduction="Set <code>CarouselItem</code> parameter <code>Caption</code> for the content of caption" Name="Caption">
    <Carousel Width="280" IsFade="true">
        <CarouselItem Caption="First slide label">
            <img src="_content/BootstrapBlazor.Shared/images/Pic0.jpg" alt="demo-image" />
        </CarouselItem>
        <CarouselItem Caption="Second slide label">
            <img src="_content/BootstrapBlazor.Shared/images/Pic1.jpg" alt="demo-image" />
        </CarouselItem>
        <CarouselItem Caption="Thrid slide label">
            <img src="_content/BootstrapBlazor.Shared/images/Pic2.jpg" alt="demo-image" />
        </CarouselItem>
    </Carousel>
</DemoBlock>

<DemoBlock Title="Individual interval" Introduction="Set <code>Interval</code> to a <code>CarouselItem</code> to change the amount of time to delay between automatically cycling to the next item. the default value is <b>5000</b> ms" Name="Interval">
    <Carousel Width="280" IsFade="true">
        <CarouselItem Caption="First slide label" Interval="5000">
            <img src="_content/BootstrapBlazor.Shared/images/Pic0.jpg" alt="demo-image" />
        </CarouselItem>
        <CarouselItem Caption="Second slide label" Interval="2000">
            <img src="_content/BootstrapBlazor.Shared/images/Pic1.jpg" alt="demo-image" />
        </CarouselItem>
        <CarouselItem Caption="Thrid slide label">
            <img src="_content/BootstrapBlazor.Shared/images/Pic2.jpg" alt="demo-image" />
        </CarouselItem>
    </Carousel>
</DemoBlock>

<DemoBlock Title="Caption Template" Introduction="Set <code>CarouselItem</code> 的 <code>CaptionTemplate</code> custom the caption of item" Name="CaptionTemplate">
    <Carousel Width="280" IsFade="true">
        <CarouselItem>
            <CaptionTemplate>
                <h5>First slide label</h5>
                <p>Pic0.jpg</p>
            </CaptionTemplate>
            <ChildContent>
                <img src="_content/BootstrapBlazor.Shared/images/Pic0.jpg" alt="demo-image" />
            </ChildContent>
        </CarouselItem>
        <CarouselItem>
            <CaptionTemplate>
                <h5>Second slide label</h5>
                <p>Pic1.jpg</p>
            </CaptionTemplate>
            <ChildContent>
                <img src="_content/BootstrapBlazor.Shared/images/Pic1.jpg" alt="demo-image" />
            </ChildContent>
        </CarouselItem>
        <CarouselItem>
            <CaptionTemplate>
                <h5>Third slide label</h5>
                <p>Pic2.jpg</p>
            </CaptionTemplate>
            <ChildContent>
                <img src="_content/BootstrapBlazor.Shared/images/Pic2.jpg" alt="demo-image" />
            </ChildContent>
        </CarouselItem>
    </Carousel>
</DemoBlock>

<DemoBlock Title="Caption Class" Introduction="Set <code>CarouselItem</code> 的 <code>CaptionClass</code> custome the class of caption" Name="CaptionClass">
    <p>Set the <code>CaptionClass</code> to <code>d-none d-md-block</code> do not show the <code>Caption</code> in the small screen</p>
    <Carousel Width="280" IsFade="true">
        <CarouselItem CaptionClass="d-none d-md-block">
            <CaptionTemplate>
                <h5>First slide label</h5>
                <p>Pic0.jpg</p>
            </CaptionTemplate>
            <ChildContent>
                <img src="_content/BootstrapBlazor.Shared/images/Pic0.jpg" alt="demo-image" />
            </ChildContent>
        </CarouselItem>
        <CarouselItem CaptionClass="d-none d-md-block">
            <CaptionTemplate>
                <h5>Second slide label</h5>
                <p>Pic1.jpg</p>
            </CaptionTemplate>
            <ChildContent>
                <img src="_content/BootstrapBlazor.Shared/images/Pic1.jpg" alt="demo-image" />
            </ChildContent>
        </CarouselItem>
        <CarouselItem CaptionClass="d-none d-md-block">
            <CaptionTemplate>
                <h5>Third slide label</h5>
                <p>Pic2.jpg</p>
            </CaptionTemplate>
            <ChildContent>
                <img src="_content/BootstrapBlazor.Shared/images/Pic2.jpg" alt="demo-image" />
            </ChildContent>
        </CarouselItem>
    </Carousel>
</DemoBlock>

<DemoBlock Title="Click on the image to call back the event" Introduction="After you set the <code>OnClick</code> property by setting, click <code>Image</code> to trigger the <code>OnClick</code> callback delegate" Name="OnClick">
    <Carousel Images="@Images" Width="280" IsFade="true" OnClick="@OnClick"></Carousel>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Disable touch swiping" Introduction="Set <code>DisableTouchSwiping</code> disable the swiping function on mobile" Name="DisableTouchSwiping">
    <Carousel Width="280" IsFade="true" DisableTouchSwiping="true">
        <CarouselItem Caption="First slide label" Interval="5000">
            <img src="_content/BootstrapBlazor.Shared/images/Pic0.jpg" alt="demo-image" />
        </CarouselItem>
        <CarouselItem Caption="Second slide label" Interval="2000">
            <img src="_content/BootstrapBlazor.Shared/images/Pic1.jpg" alt="demo-image" />
        </CarouselItem>
        <CarouselItem Caption="Thrid slide label">
            <img src="_content/BootstrapBlazor.Shared/images/Pic2.jpg" alt="demo-image" />
        </CarouselItem>
    </Carousel>
</DemoBlock>

<DemoBlock Title="ChildContent" Introduction="Use <code>ChildContent</code> render the customer content" Name="ChildContent">
    <Carousel Width="720" ShowIndicators="false">
        <CarouselItem>
            <div class="carousel-item-demo2">
                <div class="demo-item">
                    <div class="top">
                        <div>Sales champion</div>
                        <div>www.blazor.zone</div>
                    </div>
                    <img src="_content/BootstrapBlazor.Shared/images/avatars/150-5.jpg" alt="demo-image" />
                    <div class="bottom">
                        Carousel Item
                    </div>
                </div>
                <div class="demo-item">
                    <div class="top">
                        <div>Sales champion</div>
                        <div>www.blazor.zone</div>
                    </div>
                    <img src="_content/BootstrapBlazor.Shared/images/avatars/150-7.jpg" alt="demo-image" />
                    <div class="bottom">
                        Carousel Item
                    </div>
                </div>
                <div class="demo-item">
                    <div class="top">
                        <div>Sales champion</div>
                        <div>www.blazor.zone</div>
                    </div>
                    <img src="_content/BootstrapBlazor.Shared/images/avatars/150-11.jpg" alt="demo-image" />
                    <div class="bottom">
                        Carousel Item
                    </div>
                </div>
            </div>
        </CarouselItem>
        <CarouselItem>
            <div class="carousel-item-demo2">
                <div class="demo-item">
                    <div class="top">
                        <div>Sales champion</div>
                        <div>www.blazor.zone</div>
                    </div>
                    <img src="_content/BootstrapBlazor.Shared/images/avatars/150-6.jpg" alt="demo-image" />
                    <div class="bottom">
                        Carousel Item
                    </div>
                </div>
                <div class="demo-item">
                    <div class="top">
                        <div>Sales champion</div>
                        <div>www.blazor.zone</div>
                    </div>
                    <img src="_content/BootstrapBlazor.Shared/images/avatars/150-12.jpg" alt="demo-image" />
                    <div class="bottom">
                        Carousel Item
                    </div>
                </div>
                <div class="demo-item">
                    <div class="top">
                        <div>Sales champion</div>
                        <div>www.blazor.zone</div>
                    </div>
                    <img src="_content/BootstrapBlazor.Shared/images/avatars/150-15.jpg" alt="demo-image" />
                    <div class="bottom">
                        Carousel Item
                    </div>
                </div>
            </div>
        </CarouselItem>
    </Carousel>
</DemoBlock>

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

// 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 Carousels
{
    /// <summary>
    /// 
    /// </summary>
    private BlockLogger? Trace { get; set; }

    private static List<string> Images => new()
    {
        "_content/BootstrapBlazor.Shared/images/Pic0.jpg",
        "_content/BootstrapBlazor.Shared/images/Pic1.jpg",
        "_content/BootstrapBlazor.Shared/images/Pic2.jpg"
    };

    /// <summary>
    /// 
    /// </summary>
    /// <param name="imageUrl"></param>
    /// <returns></returns>
    private Task OnClick(string imageUrl)
    {
        Trace?.Log($"Image Clicked: {imageUrl}");
        return Task.CompletedTask;
    }

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        // TODO: 移动到数据库中
        new AttributeItem() {
            Name = "Images",
            Description = Localizer["Images"],
            Type = "IEnumerable<string>",
            ValueList = "—",
            DefaultValue = "—"
        },
        new AttributeItem() {
            Name = "IsFade",
            Description = Localizer["IsFade"],
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "Width",
            Description = Localizer["Width"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = "—"
        },
        new AttributeItem() {
            Name = "OnClick",
            Description = Localizer["OnClick"],
            Type = "Func<string, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}