@page "/components/carousel"

<PageTitle>Carousel — Lumeo</PageTitle>

<PageHeader Title="Carousel" Description="A carousel with motion and swipe built using scroll snapping." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Image galleries and product photo showcases</li>
        <li>Testimonial sliders and customer review rotations</li>
        <li>Onboarding flows and feature highlight walkthroughs</li>
        <li>Product showcases where multiple items share limited horizontal space</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Container MaxWidth="xs">
            <Carousel>
                <CarouselContent>
                    @for (var i = 1; i <= 5; i++)
                    {
                        var index = i;
                        <CarouselItem>
                            <Stack Class="p-1">
                                <Card>
                                    <CardContent Class="flex aspect-square items-center justify-center p-6">
                                        <Lumeo.Text As="span" Class="text-4xl font-semibold">@index</Lumeo.Text>
                                    </CardContent>
                                </Card>
                            </Stack>
                        </CarouselItem>
                    }
                </CarouselContent>
                <CarouselPrevious />
                <CarouselNext />
            </Carousel>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Loop" Code="@_loopCode">
        <Container MaxWidth="xs">
            <Carousel Loop="true">
                <CarouselContent>
                    @for (var i = 1; i <= 5; i++)
                    {
                        var index = i;
                        <CarouselItem>
                            <Stack Class="p-1">
                                <Card>
                                    <CardContent Class="flex aspect-square items-center justify-center p-6">
                                        <Lumeo.Text As="span" Class="text-4xl font-semibold">@index</Lumeo.Text>
                                    </CardContent>
                                </Card>
                            </Stack>
                        </CarouselItem>
                    }
                </CarouselContent>
                <CarouselPrevious />
                <CarouselNext />
            </Carousel>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Orientation — interactive" Code="@_orientationInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a value to see it applied live.</Lumeo.Text>
            <Segmented @bind-Value="_carouselOrientationSel" Options="_carouselOrientationOptions" />
            <Container MaxWidth="xs">
                @if (_carouselOrientationSel == "Vertical")
                {
                    <Carousel Orientation="Carousel.CarouselOrientation.Vertical" Class="h-64">
                        <CarouselContent Class="h-full">
                            @for (var i = 1; i <= 4; i++)
                            {
                                var index = i;
                                <CarouselItem>
                                    <Stack Class="p-1">
                                        <Card>
                                            <CardContent Class="flex items-center justify-center p-6 h-48">
                                                <Lumeo.Text As="span" Class="text-4xl font-semibold">@index</Lumeo.Text>
                                            </CardContent>
                                        </Card>
                                    </Stack>
                                </CarouselItem>
                            }
                        </CarouselContent>
                        <CarouselPrevious />
                        <CarouselNext />
                    </Carousel>
                }
                else
                {
                    <Carousel Orientation="Carousel.CarouselOrientation.Horizontal">
                        <CarouselContent>
                            @for (var i = 1; i <= 4; i++)
                            {
                                var index = i;
                                <CarouselItem>
                                    <Stack Class="p-1">
                                        <Card>
                                            <CardContent Class="flex aspect-square items-center justify-center p-6">
                                                <Lumeo.Text As="span" Class="text-4xl font-semibold">@index</Lumeo.Text>
                                            </CardContent>
                                        </Card>
                                    </Stack>
                                </CarouselItem>
                            }
                        </CarouselContent>
                        <CarouselPrevious />
                        <CarouselNext />
                    </Carousel>
                }
            </Container>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Product Gallery" Code="@_galleryCode">
        <Container MaxWidth="sm">
            <Carousel>
                <CarouselContent>
                    @foreach (var product in _products)
                    {
                        <CarouselItem>
                            <Stack Class="p-1">
                                <Card>
                                    <AspectRatio Ratio="4.0 / 3.0" Class="rounded-t-lg overflow-hidden bg-muted">
                                        <Flex Class="items-center justify-center h-full text-muted-foreground text-sm">@product.Category</Flex>
                                    </AspectRatio>
                                    <CardContent Class="p-4">
                                        <Lumeo.Text Size="sm" Weight="semibold">@product.Name</Lumeo.Text>
                                        <Lumeo.Text Size="sm" Color="muted">@product.Price</Lumeo.Text>
                                    </CardContent>
                                </Card>
                            </Stack>
                        </CarouselItem>
                    }
                </CarouselContent>
                <CarouselPrevious />
                <CarouselNext />
            </Carousel>
        </Container>
    </ComponentDemo>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="carousel" Level="3" Class="mt-8 scroll-mt-20">Carousel</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The carousel content (CarouselContent, CarouselPrevious, CarouselNext).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Orientation</TableCell><TableCell Class="font-mono text-xs">CarouselOrientation</TableCell><TableCell Class="font-mono text-xs">Horizontal</TableCell><TableCell>Scroll direction. Values: Horizontal, Vertical.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Loop</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Whether the carousel wraps around at the ends.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Disabled</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Disables navigation, keyboard interactions, and the prev/next buttons.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="carouselcontent" Level="3" Class="mt-8 scroll-mt-20">CarouselContent</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The carousel items.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="carouselitem" Level="3" Class="mt-8 scroll-mt-20">CarouselItem</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The slide content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Index</TableCell><TableCell Class="font-mono text-xs">int?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Zero-based index of this slide (auto-assigned if omitted).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Total</TableCell><TableCell Class="font-mono text-xs">int?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Optional total count used for aria-label announcements.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="carouselprevious" Level="3" Class="mt-8 scroll-mt-20">CarouselPrevious</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes. Automatically disables when at the start.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="carouselnext" Level="3" Class="mt-8 scroll-mt-20">CarouselNext</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes. Automatically disables when at the end.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/tabs" class="text-primary hover:underline">Tabs</a> — For switching between distinct content panels without sliding</li>
        <li><a href="/components/scroll-area" class="text-primary hover:underline">ScrollArea</a> — For scrollable content areas with custom scrollbars</li>
    </ul>
</div>

@code {
    // Interactive: Orientation
    private string _carouselOrientationSel = "Horizontal";
    private List<Segmented.SegmentedOption> _carouselOrientationOptions = new()
    {
        new() { Label = "Horizontal", Value = "Horizontal" },
        new() { Label = "Vertical", Value = "Vertical" },
    };
    private string _orientationInteractiveCode = @"<Segmented @bind-Value=""_orientationSel"" Options=""_orientationOptions"" />
<Carousel Orientation=""@(Enum.Parse<Carousel.CarouselOrientation>(_orientationSel))"">
    <CarouselContent>
        @for (var i = 1; i <= 4; i++) {
            var index = i;
            <CarouselItem>
                <Card>
                    <CardContent Class=""flex aspect-square items-center justify-center p-6"">
                        <span class=""text-4xl font-semibold"">@index</span>
                    </CardContent>
                </Card>
            </CarouselItem>
        }
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
</Carousel>

@code {
    private string _orientationSel = ""Horizontal"";
    private List<Segmented.SegmentedOption> _orientationOptions = new()
    {
        new() { Label = ""Horizontal"", Value = ""Horizontal"" },
        new() { Label = ""Vertical"", Value = ""Vertical"" },
    };
}";

    private string _defaultCode = @"<Carousel>
    <CarouselContent>
        @for (var i = 1; i <= 5; i++)
        {
            var index = i;
            <CarouselItem>
                <div class=""p-1"">
                    <Card>
                        <CardContent Class=""flex aspect-square items-center justify-center p-6"">
                            <span class=""text-4xl font-semibold"">@index</span>
                        </CardContent>
                    </Card>
                </div>
            </CarouselItem>
        }
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
</Carousel>";

    private string _loopCode = @"<Carousel Loop=""true"">
    <CarouselContent>
        @for (var i = 1; i <= 5; i++)
        {
            var index = i;
            <CarouselItem>
                <div class=""p-1"">
                    <Card>
                        <CardContent Class=""flex aspect-square items-center justify-center p-6"">
                            <span class=""text-4xl font-semibold"">@index</span>
                        </CardContent>
                    </Card>
                </div>
            </CarouselItem>
        }
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
</Carousel>";

    private string _galleryCode = @"<Carousel>
    <CarouselContent>
        @foreach (var product in _products)
        {
            <CarouselItem>
                <div class=""p-1"">
                    <Card>
                        <AspectRatio Ratio=""4.0 / 3.0"" Class=""rounded-t-lg overflow-hidden bg-muted"">
                            <div class=""flex items-center justify-center h-full text-sm text-muted-foreground"">@product.Category</div>
                        </AspectRatio>
                        <CardContent Class=""p-4"">
                            <Lumeo.Text Size=""sm"" Weight=""semibold"">@product.Name</Lumeo.Text>
                            <Lumeo.Text Size=""sm"" Color=""muted"">@product.Price</Lumeo.Text>
                        </CardContent>
                    </Card>
                </div>
            </CarouselItem>
        }
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
</Carousel>";

    private record ProductItem(string Name, string Category, string Price);

    private readonly ProductItem[] _products =
    [
        new("Wireless Headphones", "Electronics", "$79.99"),
        new("Leather Wallet", "Accessories", "$34.99"),
        new("Running Shoes", "Footwear", "$119.99"),
        new("Coffee Mug", "Kitchen", "$14.99"),
    ];
}
