use web_sys::MouseEvent;
use yew::{function_component, html, Html, use_state, Callback};

use crate::{component::image_viewer::{ImageDescription, ImageViewer}};

const GALLERY: [&str; 13] = [
    "gallery-1.jpg",
    "gallery-2.jpg",
    "gallery-3.jpg",
    "gallery-4.jpg",
    "gallery-5.jpg",
    "gallery-6.jpg",
    "gallery-7.jpg",
    "gallery-8.jpg",
    "gallery-9.png",
    "gallery-10.jpg",
    "gallery-11.jpg",
    "gallery-12.jpg",
    "gallery-13.jpg",
];

fn gallery_entry(link: &&str, onclick: Callback<MouseEvent>) -> Html {
    html! {
        <div><img src={format!("/img/{}", link)} onclick={onclick}/></div>
    }
}

#[function_component]
pub fn Gallery() -> Html {
    let images = GALLERY.iter().map(|it| ImageDescription::new_blank(it.to_string())).collect::<Vec<ImageDescription>>();
    let is_open = use_state(|| false);
    let selected_image = use_state(|| 0);
    let select_next = selected_image.clone();
    let select_prev = selected_image.clone();
    let next = (*select_next + images.len() + 1) % images.len();
    let prev = (*select_prev + images.len() - 1) % images.len();
    
    html! {
        <>
            <div class="image-gallery">
                {
                    GALLERY.iter().enumerate().map(|(index, img_str)| {
                        let select = selected_image.clone();
                        let open = is_open.clone();
                        gallery_entry(img_str, Callback::from(move |_| {
                            select.set(index);
                            open.set(true);
                        }))
                    }).collect::<Html>()
                }
            </div>
            <ImageViewer
                image={images[*selected_image].clone()}
                open={*is_open && !images.is_empty()}
                onclose={Callback::from(move |_| is_open.set(false))}
                has_next=true
                has_prev=true
                onnext={Callback::from(move |_| select_next.set(next))}
                onprev={Callback::from(move |_| select_prev.set(prev))}
            />
        </>
    }
}