use dioxus::prelude::*;
use dioxus_free_icons::icons::io_icons::IoChevronDown;
use dioxus_free_icons::Icon;

turf::style_sheet!("src/components/contacts.scss");

fn ContactsArrow(cx: Scope) -> Element {
    cx.render(rsx! {
        style { STYLE_SHEET },

        Icon {
            icon: IoChevronDown,
        },
    })
}

pub fn Contacts(cx: Scope) -> Element {
    let show_contacts = use_state(cx, || false);

    let classes = vec![
        ClassName::CONTACTS,
        if **show_contacts {
            ClassName::ACTIVE
        } else {
            ""
        },
    ]
    .join(" ");

    cx.render(rsx! {
        style { STYLE_SHEET },

        div {
            class: "{classes}",

            p {
                class: ClassName::HEADER,
                onclick: move |_| show_contacts.set(!show_contacts),

                ContactsArrow {},

                "Online (4)",
            },

            // TODO: Test overflow
            ul {
                li {
                    img {
                        src: "./images/status_online.png",
                    },
                    p {
                        "Contact AAAAAAAA -",
                    },
                    p {
                        style: "color: darkgrey;",
                        "i'm sad all day until i get to talk with friends, online friends that is",
                    },
                },
                li {
                    img {
                        src: "./images/status_busy.png",
                    },
                    p {
                        "Contact BBBBBB -",
                    },
                    p {
                        style: "color: darkgrey;",
                        "i'm sad all day until i get to talk with friends, online friends that is",
                    }
                },
                li {
                    img {
                        src: "./images/status_away.png",
                    },
                    p {
                        "Contact CCC -",
                    },
                    p {
                        style: "color: darkgrey;",
                        "i'm sad all day until i get to talk with friends, online friends that is",
                    }
                },
            },
        },
    })
}