use gpui::{ParentElement, Styled, div, AppContext};

use crate::{api, app, component::{
    font_icon::{FontIcon, font_icon},
    text::text,
}, query};
use crate::app::query_store;
use crate::query::use_query;

pub struct TitleBar {}

pub struct RepoSelector {}

impl gpui::Render for TitleBar {
    fn render(
        &mut self,
        _window: &mut gpui::Window,
        cx: &mut gpui::Context<Self>,
    ) -> impl gpui::IntoElement {
        let g = cx.global::<app::Global>();

        div()
            .w_full()
            .h_8()
            .flex()
            .px(g.safe_area.size.width)
            .py_2()
            .flex_row()
            .justify_center()
            .items_center()
            .border_b_1()
            .border_color(g.current_theme.colors.border)
            .bg(g.current_theme.colors.surface)
            .text_color(g.current_theme.colors.text)
            .child(repo_selector(cx))
    }
}

impl RepoSelector {
    pub fn new(cx: &mut gpui::Context<Self>) -> Self {
        use_query(api::repo::List, cx);
        Self {}
    }
}

fn repo_selector<T>(cx: &gpui::Context<T>) -> gpui::Div {
    let store = app::query_store(cx);
    let repo = store.read_query(api::repo::List, cx);

    div()
        .flex()
        .flex_row()
        .items_center()
        .gap_1()
        .text_xs()
        .child(font_icon(FontIcon::FolderGit, cx).size_3())
        .child(text("test/repo", cx))
        .child(font_icon(FontIcon::ChevronDown, cx).size_3())
}