use dioxus::prelude::*;
use tracing::debug;

use super::edit_section::EditSection;
use crate::components::avatar_selector::AvatarSelector;
use crate::components::icons::DownArrowIcon;

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

pub(super) fn Conversation(cx: Scope) -> Element {
    debug!("Conversation {} rendering", "TBD");

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

        div {
            class: ClassName::CONVERSATION,
            div {
                class: ClassName::ROOM_EVENTS,
                ul {
                    li {
                        class: ClassName::ROOM_EVENT,
                        div {
                            p {
                                class: ClassName::TITLE,
                                "MON POTE says:"
                            },
                            p {
                                class: ClassName::CONTENT,
                                "Coucou mon pote",
                            },
                        },
                    },
                },
            },
            div {
                class: ClassName::OTHER_AVATAR_SELECTOR_CONTAINER,
                div {
                    class: ClassName::AVATAR_SELECTOR,
                    AvatarSelector {},
                },
                div {
                    class: ClassName::WEBCAM,
                    img {
                        src: "images/webcam.svg"
                    },
                },
                div {
                    class: ClassName::ARROW_ICON,
                    DownArrowIcon {}
                },
            },
            div {
                class: ClassName::HOLDER,
                "••••••"
            },
            div {
                class: ClassName::EDIT_SECTION,
                EditSection {},
            },
            div {
                class: ClassName::MY_AVATAR_SELECTOR_CONTAINER,
                div {
                    class: ClassName::AVATAR_SELECTOR,
                    AvatarSelector {},
                },
                div {
                    class: ClassName::WEBCAM,
                    img {
                        src: "images/webcam.svg"
                    },
                },
                div {
                    class: ClassName::ARROW_ICON,
                    DownArrowIcon {}
                },
            },
        },
    })
}