"""
========================================
Using Layouts with different UI elements
========================================

This example shows how to place different UI elements in different Layouts.
The Layouts used here is GridLayout (with different cell shapes).

First, let's import fury.
"""

import fury

###############################################################################
# We create some panels and then we arrange them in a grid fashion
#
# First, we create some panels with different sizes/positions

panel_1 = fury.ui.Panel2D(size=(200, 200), color=(0.4, 0.6, 0.3), position=(100, 100))

panel_2 = fury.ui.Panel2D(size=(250, 250), color=(0.8, 0.3, 0.5), position=(150, 150))

###############################################################################
# Now we create two listboxes

listbox_1 = fury.ui.ListBox2D(size=(150, 150), values=["First", "Second", "Third"])

listbox_2 = fury.ui.ListBox2D(size=(250, 250), values=["First", "Second", "Third"])

###############################################################################
# Now we create two different UI i.e. a slider and a listbox

slider = fury.ui.LineSlider2D(length=150)
listbox = fury.ui.ListBox2D(size=(150, 150), values=["First", "Second", "Third"])

###############################################################################
# Now, we create grids with different shapes

rect_grid = fury.layout.GridLayout(position_offset=(0, 0, 0))
square_grid = fury.layout.GridLayout(cell_shape="square", position_offset=(0, 300, 0))
diagonal_grid = fury.layout.GridLayout(
    cell_shape="diagonal", position_offset=(0, 600, 0)
)


###############################################################################
# Applying the grid to the ui elements

rect_grid.apply([panel_1, panel_2])
square_grid.apply([listbox_1, listbox_2])
diagonal_grid.apply([slider, listbox])

current_size = (1500, 1500)
show_manager = fury.window.ShowManager(size=current_size, title="FURY UI Layout")

show_manager.scene.add(panel_1, panel_2, listbox_1, listbox_2, slider, listbox)

# To interact with the UI, set interactive = True
interactive = False

if interactive:
    show_manager.start()

fury.window.record(scene=show_manager.scene, out_path="ui_layout.png", size=(400, 400))
