# -*- coding: utf-8 -*-
import sys

import pandas
from bokeh.layouts import column
from bokeh.layouts import row
from bokeh.models import Div
from bokeh.models import Spacer
from bokeh.models.layouts import TabPanel
from bokeh.models.layouts import Tabs
from bokeh.plotting import curdoc
from bokeh.plotting import figure
from bokeh.plotting import show

try:
    from catalog import Catalog  # type: ignore[import]
    from env import Environment
    from home import Home
    from mode_selection import Interactive
except ImportError:
    from iechelle.gui.catalog import Catalog
    from iechelle.gui.env import Environment
    from iechelle.gui.home import Home
    from iechelle.gui.mode_selection import Interactive

# from bokeh.layouts import grid
# from bokeh.models import Panel
# from bokeh.models import Button  # for saving data
# from bokeh.models.widgets import Tabs
# from bokeh.layouts import layout, Spacer

env = Environment()

env.logo_div = Div(
    text="""
    <div style="text-align: right; margin-top: 0px;">
        <img src="gui/static/logo.png" style="width: 300px; max-width: 100%; height: auto;">
    </div>
    """,
    sizing_mode="stretch_width",
)


Catalog(env)
Interactive(env)
Home(env)

nxt_prv_button = row(env.next_button, env.previous_button, sizing_mode="fixed")

tab_int_1 = column(
    # nxt_prv_button,
    column(
        row(
            env.stretch_sliderint,
            env.check_color_map_lock,
            sizing_mode="stretch_width",
        ),
        env.fig_tpfint,
        sizing_mode="stretch_width",
    ),
    row(
        env.ll_button,
        Spacer(width=5),
        env.l_button,
        env.dnu_slider,
        env.r_button,
        Spacer(width=5),
        env.rr_button,
        Spacer(width=20),
        env.update_int_button,
        sizing_mode="stretch_width",
    ),
    row(
        env.frequency_minimum_text,
        env.frequency_maximum_text,
        env.frequency_maxdnu_text,
        env.dnu_text,
        env.echelle_noise_cuttoff_text,
        env.grid_circle_size,
        env.select_grid_color,
        env.select_color_palette,
        env.check_reverse_color_palette,
        sizing_mode="stretch_width",
    ),
    row(
        env.get_data_button,
        env.select_grid_menu,
        env.select_grid_marker,
        column(
            row(env.check_make_grid, env.check_show_modes_grid),
            row(env.check_show_echelle, env.check_show_horizontal_lines),
        ),
        sizing_mode="stretch_width",
    ),
    row(
        column(
            Div(
                text="<h2 style='text-align: center;'> Plot Configuration </h2>",
                sizing_mode="stretch_width",
            ),
            row(
                column(env.table_plot, env.show_plot, width=200),
                column(
                    env.select_x_axis_type, env.select_y_axis_type, width=150
                ),
                env.logo_div,
                sizing_mode="stretch_width",
            ),
        ),
        sizing_mode="stretch_width",
    ),
    sizing_mode="stretch_width",
)


tab_interactive_layout = column(
    row(tab_int_1, sizing_mode="stretch_width"),
    sizing_mode="stretch_width",
    styles={"max-width": "40%"},
)


# next_lay1 = row(env.previous_button, env.next_button)

# next_dflt_lay = column(next_lay1)

# layer_1 = column(next_dflt_lay)

layout_catalog = column(
    env.message_banner,
    row(
        tab_interactive_layout,
        column(
            env.fig_other_periodogram,
            row(
                # env.check_periodogram_axis_scale,
                env.inverted_slider,
                env.inverted_line_initial_y_text,
                env.inverted_line_length_text,
                env.inverted_line_scale_text,
                env.inverted_line_xvalue_text,
                env.inverted_slider_max_value_text,
                env.check_show_inverted_lines,
                env.inverted_line_update_button,
                sizing_mode="stretch_width",
            ),
            row(
                column(
                    Div(
                        text="<h2 style='text-align: center; margin-top: 5px; margin-bottom: 0px;'> Table 1 / Selection </h2>",
                        sizing_mode="stretch_width",
                        height=25,
                    ),
                    env.table_se_first,
                    sizing_mode="stretch_width",
                ),
                column(
                    Div(
                        text="<h2 style='color: white;'> spacer",
                        width=150,
                        height=30,
                    ),
                    env.test_button,
                    env.find_peaks_button,
                    env.clear_se_table1_button,
                    env.clear_se_grid_prd_button,
                    env.select_mode_menu,
                    env.mode_apply_button,
                    env.move_se_1_2_button,
                    env.move_se_2_1_button,
                    env.save_as_table_2_button,
                    env.save_to_default_button,
                    env.clear_se_table2_button,
                    env.calculate_synthetic_psd_button,
                    env.delete_row_button,
                    width=160,
                ),
                column(
                    Div(
                        text="<h2 style='text-align: center; margin-top: 5px; margin-bottom: 0px;'> Table 2 / Saving </h2>",
                        sizing_mode="stretch_width",
                        height=25,
                    ),
                    env.table_se_second,
                    sizing_mode="stretch_width",
                ),
                # column(
                #     # Div(
                #     #     text="<h2 style='text-align: center;'> Plot Configuration",
                #     #     sizing_mode="stretch_width",
                #     # ),
                #     # env.table_plot,
                #     # env.show_plot,
                #     env.save_as_table_2_button,
                #     env.save_to_default_button,
                #     env.clear_se_table2_button,
                #     env.calculate_synthetic_psd_button,
                #     width=150,
                # ),
                sizing_mode="stretch_width",
            ),
            sizing_mode="stretch_width",
        ),
        sizing_mode="stretch_width",
    ),
    # column(
    #     Div(text="<h2 style='text-align: center;'> FITS:", width=500),env.selected_filename_text,
    #     env.selected_filename_pkb_text,
    #     env.selected_filename_background_text,
    # ),
    sizing_mode="stretch_width",  # Optional: Adjust sizing mode
    css_classes=["centered-column"],
)

# layout_catalog = env.stretch_sliderint
tab_c = TabPanel(child=layout_catalog, title="Mode Selection")
tab_home = TabPanel(child=env.settings_layout, title="Home")
tabs = Tabs(tabs=[tab_home, tab_c], sizing_mode="stretch_width")
curdoc().add_root(tabs)
