from __future__ import annotations

from ui.themes import THEMES, css_for_theme, theme_list

BASE_CSS = r"""
Screen {
    background: $surface;
    color: $text;
    layers: base overlay;
}
#root { height: 100%; width: 100%; padding: 0; margin: 0; background: $surface; }

#sidebar_full { background: $panel; border-right: solid $secondary; height: 100%; min-width: 18; width: 34; }
#sidebar_rail { background: $panel; border-right: solid $secondary; height: 100%; width: 6; min-width: 6; }
#sidebar_handle { width: 1; height: 100%; background: $secondary; }

#sidebar_top, #rail_top { height: 3; padding: 0 1; }
#sidebar_top Button, #rail_top Button { height: 3; margin: 0 1 0 0; }

#tabs { height: 1fr; border: none; }
TabbedContent, TabPane, TabBar { background: $panel; border: none; padding: 0; margin: 0; }
Tab { background: $panel; color: $text-muted; border: none; }
Tab.-active { background: $surface; color: $text; }
Tab.attn { color: $accent; background: $surface-lighten-1; }
Tab.attn.-active { color: $text; background: $surface; }

#bottom_bar { dock: bottom; height: 3; border-top: solid $secondary; padding: 0 1; background: $panel; }
#user_box { width: 1fr; content-align: left middle; color: $text-muted; }

#rail_bottom { dock: bottom; height: 4; padding: 0 0; }
#rail_bottom Button { width: 1fr; height: 3; margin: 0 0; }

#main { height: 100%; width: 1fr; padding: 0; margin: 0; background: $surface; border: none; }

#info_tab_bar { height: 1; padding: 0; margin: 0; background: $surface; border: none; }
#info_tab_spacer { width: 1fr; background: $surface; }
#info_tab_spacer_right { width: 1fr; background: $surface; }

#update_container { width: auto; height: 1; background: transparent; content-align: center middle; }
#update_container.hidden { display: none; }
#update_label { width: auto; color: $accent; text-style: bold; margin-right: 1; }
#btn_update { width: auto; min-width: 3; height: 1; padding: 0 1; margin: 0; content-align: center middle; background: $accent; border: none; color: $surface; text-style: bold; }
#btn_update:hover { background: $primary; }

.header_btn { width: 3; min-width: 3; height: 1; padding: 0 0; margin: 0 1 0 0; content-align: center middle; background: transparent; border: none; color: $text; text-style: bold; }
.header_btn:hover { background: $surface-lighten-1; }
.header_btn.hidden { display: none; }
#btn_call { width: 3; min-width: 3; height: 1; padding: 0 0; margin: 0 1 0 0; content-align: center middle; background: transparent; border: none; color: $text; text-style: bold; }
#info_tab { width: 3; min-width: 3; height: 1; padding: 0 0; margin: 0 0 0 0; content-align: center middle; background: transparent; border: none; color: $text; text-style: bold; }
#btn_call:hover, #info_tab:hover { background: $surface-lighten-1; }

#top_info_panel { background: $surface; border: none; overflow: hidden; display: none; height: 0; }
#system_log { padding: 0 1; color: $text-muted; background: $surface-darken-1; border-bottom: solid $secondary; }


#peer_search_panel {
    display: none;
    layer: overlay;
    position: absolute;
    offset: 2 2;
    width: 46;
    height: 8;
    background: $panel;
    border: solid $secondary;
    padding: 1 1;
}
#peer_search_header { height: 1; }
#peer_search_title { width: 1fr; text-style: bold; }
#peer_search_close { width: 3; content-align: right middle; color: $text-muted; }
#peer_search_close:hover { color: $text; background: $surface-lighten-1; }
#peer_search_input { height: 3; margin-top: 1; }
#peer_search_footer { height: 1; margin-top: 1; }
#peer_search_footer_spacer { width: 1fr; }
#peer_search_ok, #peer_search_cancel { width: auto; padding: 0 1; color: $text; background: transparent; }
#peer_search_ok:hover, #peer_search_cancel:hover { background: $surface-lighten-1; }
#peer_search_resize { width: 2; content-align: right bottom; color: $text-muted; background: transparent; }
#peer_search_resize:hover { color: $text; background: $surface-lighten-1; }

#transfer_bar { display: none; padding: 0 1; color: $text-muted; background: $surface-darken-1; border-bottom: solid $secondary; height: auto; }
#find_bar { padding: 0 1; height: auto; min-height: 1; background: $surface-darken-1; border-bottom: solid $secondary; }
#find_bar.hidden { display: none; }
#find_bar Static { height: auto; }
#find_bar_icon { width: auto; color: $text-muted; }
#find_bar_pattern { width: auto; color: $text; margin-right: 1; }
#find_bar_status { width: auto; color: $text; text-style: bold; margin-right: 1; }
#find_bar_hint { width: 1fr; text-align: right; color: $text-muted; }

#select_bar { padding: 0 1; height: 3; background: $warning-darken-2; border-bottom: wide $warning; }
#select_bar.hidden { display: none; }
#select_bar Static { height: auto; color: $text; }
#select_bar_icon { width: auto; color: $warning; }
#select_bar_count { width: auto; text-style: bold; color: $warning; }
#select_bar_hint { width: 1fr; text-align: right; color: $text-muted; }

.msg.find-highlight { border-left: wide yellow !important; background: $surface-lighten-1 !important; }
#messages .find-highlight { border-left: wide yellow !important; background: $surface-lighten-1 !important; }

#call_bar { display: none; padding: 0 1; color: $text-muted; background: $surface-darken-1; border-bottom: solid $secondary; height: 3; }
#call_controls { width: 1fr; content-align: center middle; }
#call_bar_spacer { width: 1fr; }
#call_bar Button { height: 3; padding: 0 2; }
#transfer_status { width: 1fr; }
#transfer_cancel { width: auto; }
#transfer_ok { width: auto; margin-left: 1; }

#call_panel { display: none; height: auto; background: $surface-darken-2; border-bottom: solid $accent; padding: 1; }
#call_participants { width: 100%; height: auto; content-align: center middle; }
.call-participant {
    width: auto;
    height: 3;
    padding: 0 2;
    margin: 0 1;
    content-align: center middle;
    border: solid $secondary;
    background: $surface;
}
.call-participant.me { color: $accent; text-style: bold; }
.call-participant.speaking { border: solid $accent; background: $surface-lighten-1; }
.call-participant.dim { color: $text-muted; text-style: dim; border: solid $surface-darken-1; }

#call_buttons { width: 100%; height: 3; content-align: center middle; margin-top: 1; }
#call_buttons Button { width: 5; height: 3; min-width: 5; margin: 0 1; padding: 0; }
#call_mute, #call_deafen { background: $surface; }
#call_mute:hover, #call_deafen:hover { background: $surface-lighten-1; }
#call_mute.active, #call_deafen.active { background: #ff0000; color: #ffffff; }
#call_hangup { background: #ff0000; color: #ffffff; }
#call_hangup:hover { background: #cc0000; }

#call_user_popover {
    display: none;
    layer: overlay;
    position: absolute;
    width: 60;
    height: 14;
    background: $surface-darken-2;
    border: wide $accent;
    padding: 1 2;
}
#pop_header { height: 2; border-bottom: solid $secondary; }
#pop_title { width: 1fr; text-style: bold; color: $accent; }
#pop_close { width: 5; height: 2; background: $surface-darken-1; }
#pop_close:hover { background: #ff0000; color: #ffffff; }

#pop_body { height: 1fr; }
#pop_remote_mute, #pop_self_mute, #pop_self_deafen {
    width: 100%;
    height: 3;
    margin-bottom: 1;
    background: $surface;
}
#pop_remote_mute:hover, #pop_self_mute:hover, #pop_self_deafen:hover { background: $surface-lighten-1; }
#pop_remote_mute.active, #pop_self_mute.active, #pop_self_deafen.active {
    background: #ff0000;
    color: #ffffff;
}
#pop_vol_row { height: 2; }
#pop_vol_label { width: 5; }
#pop_vol { width: 1fr; background: $surface; }

#messages {
    padding: 0;
    margin: 0;
    border: none;
    background: $surface;
    width: 1fr;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-size: 1 1;
    scrollbar-background: $surface;
    scrollbar-background-hover: $surface;
    scrollbar-background-active: $surface;
    scrollbar-color: $surface-darken-2;
    scrollbar-color-hover: $surface-darken-2;
    scrollbar-color-active: $surface-darken-2;
    scrollbar-corner-color: $surface;
}

#composer_frame { border-top: solid $secondary; background: $surface; padding: 0 1; height: auto; }
#reply_bar { height: auto; color: $text-muted; padding-left: 1; background: $surface; }
#composer_row { height: auto; padding-top: 0; padding-bottom: 0; }
#composer { border: none; background: $surface; color: $text; }
#composer:focus { border: none; background: $surface; }
#attach_btn { width: 3; height: 3; min-width: 3; padding: 0 0; margin: 0 1 0 0; }
#send_btn { width: 3; height: 3; min-width: 3; padding: 0 0; margin: 0 0 0 1; }

App.btn-style-flat Button { border: none; border-top: none; border-bottom: none; }
Button:hover { background: $panel-lighten-1; }
Button.-primary:hover { background: $panel-lighten-2; }
Button.-error:hover { background: $panel-lighten-1; }

Input { border: solid $secondary; background: $surface; color: $text; }
Input:focus { border: solid $secondary; background: $surface; }
Input.-invalid { border: solid red; }
TextArea { border: solid $secondary; background: $surface; color: $text; }
TextArea:focus { border: solid $secondary; background: $surface; }
TextArea .text-area--cursor-line { background: $surface-lighten-1; }
TextArea .text-area--cursor-gutter { background: $surface-lighten-1; }
TextArea .text-area--selection { background: $secondary; }
#composer .text-area--cursor-line { background: $surface-lighten-1; }
#composer .text-area--selection { background: $secondary; }

ListView { background: $surface; }
ListItem { background: transparent; }


ListView > ListItem.-highlight,
ListView > ListItem.--highlight,
ListView > ListItem.highlight {
    background: $surface-lighten-1;
    border-left: wide $accent;
}


ListView > ListItem.active_chat {
    background: $surface-lighten-1;
    border-left: wide $accent;
}

.chat_item_title { padding: 0 1; color: $text; }
.chat_item_sub { padding: 0 2; color: $text-muted; }
.req_item_title { padding: 0 1; color: $text; }
.req_item_sub { padding: 0 2; color: $text-muted; }


.msg {
    width: 1fr;
    padding: 0 1;
    border-left: wide $surface;
    height: auto;
    background: $surface;
    color: $text;
    overflow: hidden;
}

.msg:hover { background: $surface-lighten-1; border-left: wide $accent; }
.msg:focus { background: $surface-lighten-1; border-left: wide $accent; }
.msg:focus-within { background: $surface-lighten-1; }
.msg.flash { background: $surface-lighten-2; border-left: wide $accent; }
.msg.msg_indented { border-left: wide dimgrey; }
.msg.msg_indented:hover { border-left: wide $accent; }
.msg.msg_indented:focus { border-left: wide $accent; }


.msg.msg-selected {
    background: $primary-darken-2;
    border-left: wide $warning;
}
.msg.msg-selected:hover {
    background: $primary-darken-1;
    border-left: wide $warning;
}


.msg-header { color: $text; width: 1fr; min-width: 0; overflow: hidden; }
.msg-text { color: $text; width: auto; min-width: 0; overflow: hidden; }
.msg-text-row { height: auto; width: 1fr; min-width: 0; overflow: hidden; }
.msg-spoiler {
    width: auto;
    height: auto;
    background: $text;
    color: $text;
    padding: 0 1;
}
.msg-spoiler.revealed {
    background: $surface-lighten-1;
    color: $text;
}

/* Message history plugin - deleted messages */
.msg-deleted { color: #ff4444 !important; }
.msg-deleted-strike { text-style: strike; }
.msg-deleted-dim { text-opacity: 60%; }

.msg_header { color: $text; width: 1fr; min-width: 0; overflow: hidden; }
.msg_body { color: $text; width: 1fr; min-width: 0; overflow: hidden; }
.msg_meta { color: $text-muted; width: 1fr; min-width: 0; overflow: hidden; }
.msg_reply { background: $panel; color: $text-muted; border-left: solid $accent; width: 1fr; min-width: 0; overflow: hidden; }


.msg_header_row { height: 1; width: 1fr; min-width: 0; overflow: hidden; }
.msg_hist_btn { width: auto; height: 1; min-width: 4; padding: 0 1; border: none; background: $surface; color: $text-muted; }
.msg_hist_btn:hover { background: $surface-lighten-1; color: $text; }


.msg_edit_row { height: auto; margin-top: 0; width: 1fr; }
.msg_edit_ta { width: 1fr; height: 3; background: $panel; border: solid $secondary; }
.msg_edit_send { width: 3; min-width: 3; height: 3; margin-left: 1; padding: 0 0; }

#req_panes { height: 1fr; }
#req_in, #req_out { border: round $secondary; height: 1fr; background: $surface; }
#req_in_title, #req_out_title { padding: 0 1; color: $text-muted; height: 1; }

#btn_settings { height: 3; width: 12; min-width: 12; padding: 0 1; border: none; background: $panel; }

SettingsScreen { width: 100%; height: 100%; background: $surface; }
#settings_root { width: 100%; height: 100%; }
#settings_nav { width: 26; min-width: 26; background: $panel; border-right: solid $secondary; padding: 1 1; }
#settings_title { height: 1; content-align: left middle; color: $text; }
#settings_hint { height: 1; content-align: left middle; color: $text-muted; }
#settings_content { width: 1fr; padding: 1 2; background: $surface; }
#settings_header { height: 1; content-align: left middle; color: $text; }
#settings_tabs_scroll { height: 1fr; padding-top: 1; }
#settings_scroll { height: 1fr; }
.settings_tab { height: 3; padding: 0 1; margin: 0 0 1 0; content-align: left middle; color: $text-muted; background: $panel; border-left: wide transparent; }
.settings_tab:hover { background: $surface-lighten-1; color: $text; }
.settings_tab.active { background: $surface-lighten-1; color: $text; border-left: wide $accent; text-style: bold; }

.code-block { background: $surface; border: solid $secondary; margin: 1 2; padding: 0; height: auto; }
.code-header { height: 1; background: $panel; color: $text-muted; padding: 0 0; }
.code-content-wrapper { background: $surface; overflow: auto; border: none; scrollbar-size: 1 1; }
.code-content-wrapper:focus { border-left: wide $accent; }
.code-content { padding: 0 0; background: $surface; border: none; width: auto; height: auto; }
.code-footer { height: 1; background: $panel; padding: 0 0; }
.code-btn { height: 1; min-width: 3; padding: 0 1; background: transparent; border: none; color: $text-muted; }
.code-btn:hover { color: $text; background: $surface-lighten-1; }
.code-lang { width: 1fr; content-align: left middle; color: $accent; text-style: bold; padding-left: 1; }


.file-card { background: $surface; border: solid $secondary; margin: 0 1; padding: 0 1; height: auto; width: auto; max-width: 50; overflow: hidden; }
.file-card-header-simple { height: 1; width: 1fr; overflow: hidden; }
.file-card-caption { margin-top: 0; width: 1fr; overflow: hidden; color: $text-muted; }
.file-download-btn { margin-top: 0; }

.image-card { background: $surface; border: solid $secondary; margin: 0 1; padding: 0 1; height: auto; width: auto; max-width: 50; overflow: hidden; }
.image-card-header-simple { height: 1; width: 1fr; overflow: hidden; }
.image-card-caption { margin-top: 0; width: 1fr; overflow: hidden; color: $text-muted; }
.image-card-actions { height: auto; margin-top: 0; display: block; width: 1fr; }

.user_item_title { padding: 0 1; color: $text; }
.user_item_sub { padding: 0 2; color: $text-muted; }
.status_indicator { width: 1; height: 1; margin-right: 1; }

#network_status_panel { padding: 1 2; border: solid $secondary; background: $panel; height: auto; }
.net_label { margin-bottom: 1; color: $text; }
#ip_display { margin-bottom: 1; color: $accent; text-style: bold; }

.status_online { color: #00ff00; }
.status_idle { color: #ffff00; }
.status_dnd { color: #ff0000; }
.status_offline { color: #888888; }

.status_selector { height: 3; margin-bottom: 1; }
.status_btn { width: 1fr; height: 3; margin-right: 1; border: solid $secondary; }
.status_btn.active { border: solid $accent; background: $surface-lighten-1; }
.status_btn.online { color: #00ff00; }
.status_btn.idle { color: #ffff00; }
.status_btn.dnd { color: #ff0000; }
.status_btn.offline { color: #888888; }

.section_label { margin-top: 1; margin-bottom: 0; color: $text-muted; }
.section_desc { margin-bottom: 0; color: $text-muted; text-style: italic; }
.action_btn { margin-top: 1; width: 100%; background: $panel; }
.action_btn:hover { background: $panel-lighten-1; }

.bind_row { height: 1; width: 100%; margin-top: 0; padding: 0 1; }
.bind_key { width: 22; color: $accent; text-style: bold; }
.bind_desc { width: 1fr; color: $text; }

KeyBindingInput { height: auto; width: 100%; margin-bottom: 0; }
.keybind_row { height: 2; width: 100%; padding: 0 1; }
.keybind_desc { width: 1fr; height: 2; content-align: left middle; color: $text; }
.keybind_btn { width: 20; height: 2; min-width: 20; background: $panel; border: solid $secondary; }
.keybind_btn:hover { background: $surface-lighten-1; border: solid $accent; }
.keybind_btn.capturing { background: $accent; color: $surface; border: solid $accent; }
.keybind_reset_btn { width: 3; height: 2; min-width: 3; background: $panel; border: solid $secondary; margin-left: 1; }
.keybind_reset_btn:hover { background: $warning; color: $surface; border: solid $warning; }

#rules_list_container { background: $surface; padding: 1; margin-top: 1; }

.theme_sync_container { height: auto; margin-bottom: 1; }
.theme_sync_btn { width: 1fr; height: 3; margin-right: 1; background: $panel; border: solid $secondary; }
.theme_sync_btn:hover { background: $surface-lighten-1; border: solid $accent; }
.theme_sync_btn:last-child { margin-right: 0; }
.profile_info { margin-bottom: 0; color: $text; }

AppearanceCategory { height: auto; width: 100%; margin-bottom: 1; }
AppearanceCategory .cat-header { height: 1; width: 100%; content-align: center middle; text-style: bold; color: $text-muted; margin-top: 1; margin-bottom: 1; }
AppearanceCategory .cat-content { padding: 0 1; height: auto; }

NumberSlider { height: 1; width: 100%; }
NumberSlider .slider-track { width: 1fr; height: 1; color: $accent; }
NumberSlider .slider-value { width: 8; height: 1; text-align: right; color: $text-muted; }
SliderTrack { width: 1fr; height: 1; color: $accent; }

ColorPicker { height: 1; width: 100%; }
ColorPicker #cp_preview { width: 6; height: 1; }
ColorPicker #cp_hex { width: 10; height: 1; margin-left: 1; color: $text-muted; }
ColorPicker .cp_open_btn { width: 5; height: 1; min-width: 5; margin-left: 1; }

ColorRuleItem { height: 2; width: 100%; padding: 0 1; background: $surface; margin-bottom: 1; }
ColorRuleItem:hover { background: $surface-lighten-1; }
ColorRuleItem.disabled { color: $text-muted; }
ColorRuleItem .rule-color { width: 3; height: 1; }
ColorRuleItem .rule-info { width: 1fr; }
ColorRuleItem .rule-btn { width: 3; height: 1; min-width: 3; border: none; background: transparent; }
ColorRuleItem .rule-btn:hover { background: $surface-lighten-1; }

#rules_list_container { height: auto; width: 100%; padding: 1 0; }

.blocked_user_row { height: 3; align: center middle; }
.blocked_user_fp { width: 1fr; }
.unblock_btn { width: 10; min-width: 10; }

#user_search { margin: 0 0 1 0; height: 3; background: $surface-darken-1; border: none; }
.status_online { color: #b8bb26; }
.status_idle { color: #fabd2f; }
.status_dnd { color: #fb4934; }
.status_invisible { color: #928374; }
.status_offline { color: #928374; }

#user_search { height: 3; border: none; background: $surface-darken-1; margin-bottom: 1; }

.user_box_btn { width: 1fr; height: 3; content-align: left middle; background: transparent; color: $text-muted; border: none; }
.user_box_btn:hover { background: $surface-lighten-1; color: $text; }

#status_menu_list { padding: 1 2; height: auto; }
.status_menu_btn { width: 100%; margin-bottom: 1; }
.status_menu_action { width: 100%; margin-top: 1; }

UserProfileDialog, MyStatusDialog {
    align: left top;
    background: transparent !important;
}

#profile_dialog_panel, #my_status_panel {
    width: 40;
    height: auto;
    max-height: 80%;
    background: $panel;
    border: solid $secondary;
    padding: 1 2;
}

.profile_header { height: 3; align: center middle; margin-bottom: 1; }
.profile_alias_large { text-style: bold; color: $text; margin-left: 1; }
.profile_fp_small { color: $text-muted; text-align: center; margin-bottom: 1; }

.profile_bio_box {
    height: 8;
    max-height: 8;
    background: $surface;
    border: solid $secondary;
    padding: 1;
    margin-bottom: 1;
    overflow-y: auto;
}

.profile_bio_text { color: $text; }

.profile_footer, .panel_actions {
    height: 3;
    align: center middle;
    margin-top: 1;
}

.panel_title { text-align: center; text-style: bold; margin-bottom: 1; }
.status_list { height: auto; margin-bottom: 1; }

.status_grid { height: auto; margin-bottom: 1; }
.status_row { height: 3; margin-bottom: 0; }
.status_menu_btn_grid { width: 1fr; height: 3; margin-right: 1; border: solid $secondary; }
.status_menu_btn_grid.active { border: solid $accent; background: $surface-lighten-1; }
.status_menu_btn_grid.online { color: #00ff00; }
.status_menu_btn_grid.idle { color: #ffff00; }
.status_menu_btn_grid.dnd { color: #ff0000; }
.status_menu_btn_grid.offline { color: #888888; }

.status_list_horizontal { height: 3; margin-bottom: 1; }
.status_menu_btn_h { width: 1fr; height: 3; margin-right: 1; border: solid $secondary; }
.status_menu_btn_h.active { border: solid $accent; background: $surface-lighten-1; }
.status_menu_btn_h.online { color: #00ff00; }
.status_menu_btn_h.idle { color: #ffff00; }
.status_menu_btn_h.dnd { color: #ff0000; }
.status_menu_btn_h.offline { color: #888888; }

.profile_status_msg { color: $text-muted; margin-bottom: 1; text-align: center; }

.logout_btn { dock: bottom; width: 100%; margin-top: 1; }
"""

THEME_CSS = "".join(css_for_theme(name, THEMES.get(name, {})) for name in theme_list())

CSS = BASE_CSS + "\n" + THEME_CSS
