"""
=====
TabUI
=====

This example shows how to use :class:`fury.ui.TabUI` to organize multiple
2D UI panels inside the same window.

Left click on a tab header to show its content. Left click on the active tab
again to hide that tab's content. Right click on a tab header to collapse the
tab UI. The whole widget can be dragged from the tab header or panel
background.
"""

##############################################################################
# First, a bunch of imports.

from fury.ui import Disk2D, LineSlider2D, Rectangle2D, TabUI, TextBlock2D
from fury.window import Scene, ShowManager


##############################################################################
# Creating a Scene.

scene = Scene()


##############################################################################
# Create a TabUI with three tabs. The first tab is visible on startup.

tab_ui = TabUI(
    position=(80, 80),
    size=(420, 320),
    tab_titles=["Shapes", "Slider", "Notes"],
    startup_tab_id=0,
    font_size=16,
    draggable=True,
    active_color=(0.95, 0.95, 1.0),
    inactive_color=(0.45, 0.48, 0.56),
)

##############################################################################
# Add content to the first tab.

rect = Rectangle2D(size=(90, 70), color=(0.9, 0.25, 0.35))
disk = Disk2D(outer_radius=45, color=(0.2, 0.75, 0.95))
caption = TextBlock2D(
    text="The first tab contains simple 2D shapes.",
    size=(340, 40),
    color=(1, 1, 1),
    font_size=16,
)

tab_ui.add_element(0, rect, (45, 75))
tab_ui.add_element(0, disk, (285, 110), anchor="center")
tab_ui.add_element(0, caption, (40, 205))


##############################################################################
# Add content to the second tab.

slider_label = TextBlock2D(
    text="A LineSlider2D can live inside a tab content panel.",
    size=(350, 40),
    color=(1, 1, 1),
    font_size=16,
)
slider = LineSlider2D(
    initial_value=35,
    min_value=0,
    max_value=100,
    length=300,
    orientation="horizontal",
    text_template="Value: {value:.0f}",
)

tab_ui.add_element(1, slider_label, (35, 65))
tab_ui.add_element(1, slider, (55, 150))


##############################################################################
# Add content to the third tab.

notes = TextBlock2D(
    text=(
        "TabUI groups several UI panels behind tab headers.\n"
        "Use TabUI.add_element(tab_index, element, coords)\n"
        "to place UI components in a specific tab."
    ),
    size=(360, 150),
    color=(1, 1, 1),
    font_size=15,
)

tab_ui.add_element(2, notes, (35, 70))


##############################################################################
# Add a status text outside the TabUI. The callbacks update this text when the
# active tab changes or the TabUI is collapsed.

status = TextBlock2D(
    text="Active tab: Shapes",
    position=(80, 430),
    size=(420, 35),
    color=(1, 1, 1),
    font_size=16,
)


def update_status(ui):
    """Update status text after selecting a tab."""
    if ui.active_tab_idx is None:
        status.message = "TabUI collapsed"
    else:
        status.message = f"Active tab: {ui.tabs[ui.active_tab_idx].title}"


def collapse_status(ui):
    """Update status text after collapsing the TabUI."""
    status.message = "TabUI collapsed"


tab_ui.on_change = update_status
tab_ui.on_collapse = collapse_status


##############################################################################
# TabUI can also use an accordion layout. In this mode each tab title spans the
# widget width. The active tab expands below its title while the other titles
# remain visible below the expanded content.

accordion_tab_ui = TabUI(
    position=(560, 80),
    size=(340, 320),
    tab_titles=["Info", "Color", "Help"],
    startup_tab_id=0,
    tab_bar_pos="accordion",
    font_size=15,
    draggable=True,
    active_color=(0.95, 0.95, 1.0),
    inactive_color=(0.45, 0.48, 0.56),
)

accordion_info = TextBlock2D(
    text="The active tab expands below its title.",
    size=(280, 80),
    color=(1, 1, 1),
    font_size=15,
)
accordion_square = Rectangle2D(size=(90, 90), color=(0.2, 0.8, 0.45))
accordion_help = TextBlock2D(
    text="Other tab titles stay visible\nbelow the expanded content.",
    size=(260, 90),
    color=(1, 1, 1),
    font_size=15,
)

accordion_tab_ui.add_element(0, accordion_info, (30, 45))
accordion_tab_ui.add_element(1, accordion_square, (125, 55))
accordion_tab_ui.add_element(2, accordion_help, (40, 45))

accordion_status = TextBlock2D(
    text="Accordion active tab: Info",
    position=(560, 430),
    size=(340, 35),
    color=(1, 1, 1),
    font_size=16,
)


def update_accordion_status(ui):
    """Update status text after selecting an accordion tab."""
    if ui.active_tab_idx is None:
        accordion_status.message = "Accordion TabUI collapsed"
    else:
        title = ui.tabs[ui.active_tab_idx].title
        accordion_status.message = f"Accordion active tab: {title}"


def collapse_accordion_status(ui):
    """Update status text after collapsing the accordion TabUI."""
    accordion_status.message = "Accordion TabUI collapsed"


accordion_tab_ui.on_change = update_accordion_status
accordion_tab_ui.on_collapse = collapse_accordion_status


##############################################################################
# The tab bar can also be placed at the bottom of the widget.

bottom_tab_ui = TabUI(
    position=(80, 500),
    size=(420, 300),
    tab_titles=["Bottom Tab 1", "Bottom Tab 2"],
    startup_tab_id=0,
    tab_bar_pos="bottom",
    font_size=15,
    draggable=True,
    active_color=(0.95, 0.95, 1.0),
    inactive_color=(0.45, 0.48, 0.56),
)

bottom_text = TextBlock2D(
    text="This TabUI uses tab_bar_pos='bottom'.",
    size=(330, 45),
    color=(1, 1, 1),
    font_size=15,
)
bottom_rect = Rectangle2D(size=(120, 80), color=(0.9, 0.65, 0.2))

bottom_tab_ui.add_element(0, bottom_text, (40, 55))
bottom_tab_ui.add_element(1, bottom_rect, (145, 65))

bottom_status = TextBlock2D(
    text="Bottom active tab: Bottom Tab 1",
    position=(80, 820),
    size=(420, 35),
    color=(1, 1, 1),
    font_size=16,
)


def update_bottom_status(ui):
    """Update status text after selecting a bottom tab."""
    if ui.active_tab_idx is None:
        bottom_status.message = "Bottom TabUI collapsed"
    else:
        title = ui.tabs[ui.active_tab_idx].title
        bottom_status.message = f"Bottom active tab: {title}"


def collapse_bottom_status(ui):
    """Update status text after collapsing the bottom TabUI."""
    bottom_status.message = "Bottom TabUI collapsed"


bottom_tab_ui.on_change = update_bottom_status
bottom_tab_ui.on_collapse = collapse_bottom_status


##############################################################################
# The tab bar can also be vertical. In this mode the tab headers stack along
# the left or right side of the widget and the content panel uses the remaining
# horizontal space.

vertical_tab_ui = TabUI(
    position=(560, 500),
    size=(340, 300),
    tab_titles=["Left Side Tab 1", "Left Side Tab 2", "Left Side Tab 3"],
    startup_tab_id=0,
    tab_bar_pos="left",
    font_size=14,
    draggable=True,
    active_color=(0.95, 0.95, 1.0),
    inactive_color=(0.45, 0.48, 0.56),
)

vertical_text = TextBlock2D(
    text="This TabUI uses tab_bar_pos='left'.",
    size=(250, 45),
    color=(1, 1, 1),
    font_size=15,
)
vertical_disk = Disk2D(outer_radius=42, color=(0.55, 0.35, 0.95))
vertical_rect = Rectangle2D(size=(105, 75), color=(0.15, 0.8, 0.75))

vertical_tab_ui.add_element(0, vertical_text, (35, 60))
vertical_tab_ui.add_element(1, vertical_disk, (150, 120), anchor="center")
vertical_tab_ui.add_element(2, vertical_rect, (105, 90))

vertical_status = TextBlock2D(
    text="Vertical active tab: Left Side Tab 1",
    position=(560, 820),
    size=(340, 35),
    color=(1, 1, 1),
    font_size=16,
)


def update_vertical_status(ui):
    """Update status text after selecting a vertical tab."""
    if ui.active_tab_idx is None:
        vertical_status.message = "Vertical TabUI collapsed"
    else:
        title = ui.tabs[ui.active_tab_idx].title
        vertical_status.message = f"Vertical active tab: {title}"


def collapse_vertical_status(ui):
    """Update status text after collapsing the vertical TabUI."""
    vertical_status.message = "Vertical TabUI collapsed"


vertical_tab_ui.on_change = update_vertical_status
vertical_tab_ui.on_collapse = collapse_vertical_status


##############################################################################
# Now that all elements have been initialized, add them to the scene.

scene.add(tab_ui)
scene.add(status)
scene.add(accordion_tab_ui)
scene.add(accordion_status)
scene.add(bottom_tab_ui)
scene.add(bottom_status)
scene.add(vertical_tab_ui)
scene.add(vertical_status)


##############################################################################
# Starting the ShowManager.

current_size = (980, 900)
show_manager = ShowManager(
    scene=scene,
    size=current_size,
    title="FURY TabUI Example",
)
show_manager.start()