use dioxus::prelude::*;
use log::error;
use matrix_sdk::ruma::OwnedRoomId;

use super::edit_section::EditSection;
use crate::base::{sync_messages, ROOMS};
use crate::ui::components::avatar_selector::AvatarSelector;
use crate::ui::components::icons::DownArrowIcon;

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

#[component]
pub(super) fn Conversation(room_id: OwnedRoomId) -> Element {
    error!("Conversation {} rendering", room_id);

    let _sync_message_coro: Coroutine<()> =
        use_coroutine(|_: UnboundedReceiver<_>| sync_messages(&ROOMS, room_id));


    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 {}
                },
            },
        },
    }
}