use leptos::{
    IntoView, component,
    error::Error,
    html::Select,
    prelude::{
        ClassAttribute, CollectView, ElementChild, GlobalAttributes, NodeRef, NodeRefAttribute,
    },
    server::LocalResource,
    view,
};

use crate::components::{async_fetch::AsyncFetch, get_id};

#[component]
pub fn SelectPlaceholder(
    label: &'static str,
    node_ref: NodeRef<Select>,
    options: LocalResource<Result<Vec<(String, String)>, Error>>,
) -> impl IntoView {
    let id = get_id();

    view! {
        <div class="relative h-14">
            <select
                id=id.to_string()
                class="\
                absolute \
                bottom-0 \
                bg-gray-200 \
                border-8 \
                border-b-2 \
                border-b-trasparent \
                border-gray-200 \
                focus:outline-none \
                h-10 \
                peer \
                placeholder-transparent \
                rounded-t-lg \
                text-gray-900 \
                w-full \
                "
                node_ref=node_ref
            >
                {move || {
                    AsyncFetch! {
                        @map_error_in_producer
                        from_resource = options,
                        producer = |options| {
                            options
                                .into_iter()
                                .map(|(label, value)| {
                                    view! { <option value=value>{label}</option> }
                                })
                                .collect_view()
                        }
                    }
                }}
            </select>

            // TODO: Reference `var(--tw-border-2)` instead of the `2 px` <2025-10-01>
            <div class="
            absolute \
            bottom-0 \
            h-[2px] \
            w-full \
            bg-gray-300 \
            peer-focus:bg-indigo-600 \
            " />

            <label
                for=id.to_string()
                class="\
                bottom-10 \
                absolute \
                left-0 \
                text-gray-700 \
                text-sm \
                transition-all \
                peer-focus:bottom-10 \
                peer-focus:left-0 \
                peer-focus:text-gray-700 \
                peer-focus:text-sm \
                peer-placeholder-shown:text-base \
                peer-placeholder-shown:text-gray-400 \
                peer-placeholder-shown:bottom-2 \
                peer-placeholder-shown:left-2 \
                "
            >
                {label}
            </label>
        </div>
    }
}