use dioxus::prelude::*;
use dioxus_std::utils::rw::UseRw;

use crate::base::Store;
use crate::components::contacts_window::contacts::Contacts;
use crate::components::contacts_window::user_infos::UserInfos;

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

#[inline_props]
pub fn ContactsWindow<'a>(cx: Scope, rw_store: &'a UseRw<Store>) -> Element {
    cx.render(rsx! {
        style { STYLE_SHEET },

        div {
            class: ClassName::CONTACTS_WINDOW,

            div {
                class: ClassName::HEADER,

                div {
                    class: ClassName::TITLE_BAR,
                },

                div {
                    class: ClassName::USER_INFO,
                },

                UserInfos {rw_store: rw_store},
            },

            div {
                class: ClassName::CONTACTS_NAV,
                div {
                    class: ClassName::INNER,

                    button {
                        class: ClassName::AERO_BUTTON,
                        style: "background: url(./images/letter.png) center no-repeat",
                    },
                    button {
                        class: ClassName::AERO_BUTTON,
                        style: "background: url(./images/directory.png) no-repeat center",
                    },
                    button {
                        class: ClassName::AERO_BUTTON,
                        style: "background: url(./images/news.png) no-repeat center",
                    },

                    button {
                        class: ClassName::FLEX_RIGHT_AERO_BUTTON,
                        style: "background: url(./images/brush.png) no-repeat center",
                    },
                    button {
                        class: ClassName::AERO_BUTTON,
                        style: "background: url(./images/settings.png) no-repeat center",
                    },

                },

            },

            div {
                class: ClassName::SEARCH,

                div {
                    class: ClassName::INNER,

                    input {
                        class: ClassName::SEARCH_INPUT,
                        placeholder: "Find a contact...",
                        r#type: "text",
                    },

                    button {
                        class: ClassName::BUTTON,
                        style: "background: url(./images/add_user.png) no-repeat center",
                    },

                    button {
                        class: ClassName::BUTTON,
                        style: "background: url(./images/tbc_transfert.png) no-repeat center",
                    },
                },
            },

            Contacts {rw_store: rw_store},

            div {
                class: ClassName::FOOTER,
            },
        },
    })
}