MultiSelect

use std::collections::HashSet;

use leptos::prelude::*;
use strum::{Display, EnumIter, IntoEnumIterator};

use crate::components::_coming_soon::multi_select::{
    MultiSelect, MultiSelectContent, MultiSelectGroup, MultiSelectItem, MultiSelectOption, MultiSelectTrigger,
    MultiSelectValue,
};

#[derive(Debug, Clone, Copy, PartialEq, Display, EnumIter)]
enum Fruits {
    Apple,
    Banana,
    Orange,
    Strawberry,
    Mango,
}

#[component]
pub fn DemoMultiSelect() -> impl IntoView {
    let fruits_signal = RwSignal::new(HashSet::<String>::new());

    view! {
        <div class="flex flex-col gap-4">
            <span class="text-sm">
                {move || {
                    let values = fruits_signal.get();
                    if values.is_empty() {
                        "No fruits selected".to_string()
                    } else {
                        format!("Selected: {}", values.iter().cloned().collect::<Vec<_>>().join(", "))
                    }
                }}
            </span>

            <div class="mx-auto">
                <MultiSelect values=fruits_signal>
                    <MultiSelectTrigger class="w-[150px]">
                        <MultiSelectValue placeholder="Select fruits" />
                    </MultiSelectTrigger>

                    <MultiSelectContent>
                        <MultiSelectGroup>
                            {Fruits::iter()
                                .map(|fruit| {
                                    let fruit_str = fruit.to_string();
                                    view! {
                                        <MultiSelectItem>
                                            <MultiSelectOption value=fruit_str.clone()>{fruit_str}</MultiSelectOption>
                                        </MultiSelectItem>
                                    }
                                })
                                .collect_view()}
                        </MultiSelectGroup>
                    </MultiSelectContent>
                </MultiSelect>
            </div>
        </div>
    }
}