Card Carousel

use icons::{ChevronLeft, ChevronRight};
use leptos::prelude::*;

use crate::components::ui::card::{CardContent, CardDescription, CardTitle};
use crate::components::ui::card_carousel::{
    CardCarousel, CardCarouselImage, CardCarouselIndicator, CardCarouselIndicators, CardCarouselNav,
    CardCarouselNavButton, CardCarouselOverlay, CardCarouselTrack,
};

/* ========================================================== */
/*                     ✨ FUNCTIONS ✨                        */
/* ========================================================== */

#[component]
pub fn DemoCardCarousel() -> impl IntoView {
    view! {
        <div class="flex flex-col gap-4 mt-10">
            <SharedDemo />
            <SharedDemo />
        </div>

        // * JS script with event delegation for all CardCarousels.
        <script type="module" src="/components/card_carousel.js"></script>
    }
}

/* ========================================================== */
/*                     ✨ FUNCTIONS ✨                        */
/* ========================================================== */

#[component]
pub fn SharedDemo() -> impl IntoView {
    let images = vec![
        "https://a0.muscache.com/im/pictures/e24c13b9-dd2a-4e15-9845-dd588a884e39.jpg?im_w=720",
        "https://a0.muscache.com/im/pictures/373443ec-b377-4181-b753-3a2f3508c2b3.jpg?im_w=720",
        "https://a0.muscache.com/im/pictures/97b92645-f975-4e60-9ae0-205885af64b0.jpg?im_w=720",
        "https://a0.muscache.com/im/pictures/0089340a-409a-4fbe-9ab7-cb26884bf267.jpg?im_w=720",
        "https://a0.muscache.com/im/pictures/90e58fdf-257b-43a5-a6dc-a08f518397fe.jpg?im_w=720",
    ];
    let images_count = images.len();

    view! {
        <div>
            <CardCarousel>
                <CardCarouselOverlay>
                    <CardCarouselNav>
                        <CardCarouselNavButton attr:aria-disabled=true>
                            <ChevronLeft />
                        </CardCarouselNavButton>
                        <CardCarouselNavButton>
                            <ChevronRight />
                        </CardCarouselNavButton>
                    </CardCarouselNav>
                    <CardCarouselIndicators>
                        {(0..images_count)
                            .map(|i| {
                                view! { <CardCarouselIndicator attr:aria-current=move || i == 0 /> }
                            })
                            .collect_view()}
                    </CardCarouselIndicators>
                </CardCarouselOverlay>
                <CardCarouselTrack>
                    {images
                        .into_iter()
                        .map(|src| {
                            view! { <CardCarouselImage attr:src=src attr:alt="CardCarousel img" /> }
                        })
                        .collect_view()}
                </CardCarouselTrack>
            </CardCarousel>

            <CardContent class="py-4">
                <CardTitle>"MV, Maldives"</CardTitle>
                <CardDescription>"4,843 kilometers away"</CardDescription>
                <CardDescription>"Aug 1 – 6"</CardDescription>
                <CardDescription>"$685 per night"</CardDescription>
            </CardContent>
        </div>
    }
}