#include "OmoteUI.hpp"
#include "lvgl.h"
#include "omoteconfig.h"
#include <functional>

using namespace UI::Basic;

std::shared_ptr<OmoteUI> OmoteUI::mInstance = nullptr;

// This can be used to flag out specific code for SIM only
// #if defined(IS_SIMULATOR) && (IS_SIMULATOR == true)
// #endif

OmoteUI::OmoteUI(std::shared_ptr<HardwareAbstract> aHardware)
    : UIBase(aHardware) {}

// Set the page indicator scroll position relative to the tabview scroll
// position
void OmoteUI::store_scroll_value_event_cb(lv_event_t *e) {
  float bias = (150.0 + 8.0) / 240.0;
  int offset = 240 / 2 - 150 / 2 - 8 - 50 - 3;
  lv_obj_t *screen = lv_event_get_target(e);
  lv_obj_scroll_to_x(panel, lv_obj_get_scroll_x(screen) * bias - offset,
                     LV_ANIM_OFF);
}

// Update current device when the tabview page is changes
void OmoteUI::tabview_device_event_cb(lv_event_t *e) {
  currentDevice = lv_tabview_get_tab_act(lv_event_get_target(e));
  this->mHardware->setCurrentDevice(currentDevice);
}

// Slider Event handler
void OmoteUI::bl_slider_event_cb(lv_event_t *e) {
  lv_obj_t *slider = lv_event_get_target(e);
  auto newBrightness = std::clamp(lv_slider_get_value(slider), 60, 255);
  mHardware->display()->setBrightness(newBrightness);
}

// Apple Key Event handler
void OmoteUI::appleKey_event_cb(lv_event_t *e) {
  // Send IR command based on the event user data
  // mHardware->debugPrint(std::to_string(50 + (int)e->user_data));
}

// Wakeup by IMU Switch Event handler
void OmoteUI::WakeEnableSetting_event_cb(lv_event_t *e) {
  this->mHardware->setWakeupByIMUEnabled(
      lv_obj_has_state(lv_event_get_target(e), LV_STATE_CHECKED));
}

// Wakeup timeout dropdown Event handler
void OmoteUI::wakeTimeoutSetting_event_cb(lv_event_t *e) {
  lv_obj_t *drop = lv_event_get_target(e);

  int sleepTimeout = sleepTimeoutMap[lv_dropdown_get_selected(drop)];
  mHardware->setSleepTimeout(sleepTimeout);
}

// Smart Home Toggle Event handler
void OmoteUI::smartHomeToggle_event_cb(lv_event_t *e) {
  char payload[8];
  if (lv_obj_has_state(lv_event_get_target(e), LV_STATE_CHECKED))
    strcpy(payload, "true");
  else
    strcpy(payload, "false");
  // Publish an MQTT message based on the event user data
  // if ((int)e->user_data == 1)
  //   mHardware->MQTTPublish("bulb1_set", payload);
  // if ((int)e->user_data == 2)
  //   mHardware->MQTTPublish("bulb2_set", payload);
}

// Smart Home Toggle Event handler
void OmoteUI::smartHomeSlider_event_cb(lv_event_t *e) {
  lv_obj_t *slider = lv_event_get_target(e);
  char payload[8];
  auto sliderValue = lv_slider_get_value(slider);

  // TODO convert this dtostrf to somethign more portable.
  //  I gave it a stab here but not sure it is the same.
  // dtostrf(lv_slider_get_value(slider), 1, 2, payload);
  snprintf(payload, sizeof(payload), "%8.2f", sliderValue);

  // Publish an MQTT message based on the event user data
  // if ((int)e->user_data == 1)
  //   mHardware->MQTTPublish("bulb1_setbrightness", payload);
  // if ((int)e->user_data == 2)
  //   mHardware->MQTTPublish("bulb2_setbrightness", payload);
}

void OmoteUI::virtualKeypad_event_cb(lv_event_t *e) {
  lv_obj_t *target = lv_event_get_target(e);
  lv_obj_t *cont = lv_event_get_current_target(e);
  if (target == cont)
    return;

  char buffer[100];
  // sprintf(buffer, "check it out: %d\n",
  //         virtualKeyMapTechnisat[(int)target->user_data]);
  // mHardware->debugPrint(buffer);
}

void OmoteUI::loopHandler() {
  lv_timer_handler();
  lv_task_handler();
}

void OmoteUI::create_status_bar() {
  // Create a status bar
  lv_obj_t *statusbar = lv_btn_create(lv_scr_act());
  lv_obj_set_size(statusbar, 240, 20);
  lv_obj_set_style_shadow_width(statusbar, 0, LV_PART_MAIN);
  lv_obj_set_style_bg_color(statusbar, lv_color_black(), LV_PART_MAIN);
  lv_obj_set_style_radius(statusbar, 0, LV_PART_MAIN);
  lv_obj_align(statusbar, LV_ALIGN_TOP_MID, 0, 0);

  this->WifiLabel = lv_label_create(statusbar);
  lv_label_set_text(this->WifiLabel, "");
  lv_obj_align(this->WifiLabel, LV_ALIGN_LEFT_MID, -8, 0);
  lv_obj_set_style_text_font(this->WifiLabel, &lv_font_montserrat_12,
                             LV_PART_MAIN);

  this->objBattPercentage = lv_label_create(statusbar);
  lv_label_set_text(this->objBattPercentage, "");
  lv_obj_align(this->objBattPercentage, LV_ALIGN_RIGHT_MID, -16, 0);
  lv_obj_set_style_text_font(this->objBattPercentage, &lv_font_montserrat_12,
                             LV_PART_MAIN);

  this->objBattIcon = lv_label_create(statusbar);
  lv_label_set_text(this->objBattIcon, LV_SYMBOL_BATTERY_EMPTY);
  lv_obj_align(this->objBattIcon, LV_ALIGN_RIGHT_MID, 8, 0);
  lv_obj_set_style_text_font(this->objBattIcon, &lv_font_montserrat_16,
                             LV_PART_MAIN);

  batteryPoller = std::make_unique<poller>(
      [&batteryIcon = objBattIcon, battery = mHardware->battery()]() {
        auto percent = battery->getPercentage();
        if (percent > 95)
          lv_label_set_text(batteryIcon, LV_SYMBOL_BATTERY_FULL);
        else if (percent > 75)
          lv_label_set_text(batteryIcon, LV_SYMBOL_BATTERY_3);
        else if (percent > 50)
          lv_label_set_text(batteryIcon, LV_SYMBOL_BATTERY_2);
        else if (percent > 25)
          lv_label_set_text(batteryIcon, LV_SYMBOL_BATTERY_1);
        else
          lv_label_set_text(batteryIcon, LV_SYMBOL_BATTERY_EMPTY);
      });
}

void OmoteUI::setup_settings(lv_obj_t *parent) {
  // Add content to the settings tab
  // With a flex layout, setting groups/boxes will position themselves
  // automatically
  lv_obj_set_layout(parent, LV_LAYOUT_FLEX);
  lv_obj_set_flex_flow(parent, LV_FLEX_FLOW_COLUMN);
  lv_obj_set_scrollbar_mode(parent, LV_SCROLLBAR_MODE_ACTIVE);
  // Add a label, then a box for the display settings
  this->settingsMenu = lv_menu_create(parent);
  lv_obj_set_width(this->settingsMenu, 210);

  /* Create main page for settings this->settingsMenu*/
  this->settingsMainPage = lv_menu_page_create(this->settingsMenu, NULL);
  lv_obj_t *cont = lv_menu_cont_create(this->settingsMainPage);
  lv_obj_set_layout(cont, LV_LAYOUT_FLEX);
  lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);
  lv_obj_set_scrollbar_mode(cont, LV_SCROLLBAR_MODE_ACTIVE);
  // lv_obj_set_width(cont, lv_obj_get_width(parent));
  this->display_settings(cont);

  this->create_wifi_settings(this->settingsMenu, cont);

  // Another setting for the battery
  lv_obj_t *menuLabel = lv_label_create(cont);
  lv_label_set_text(menuLabel, "Battery");
  lv_obj_t *menuBox = lv_obj_create(cont);
  lv_obj_set_size(menuBox, lv_pct(100), 125);
  lv_obj_set_style_bg_color(menuBox, color_primary, LV_PART_MAIN);
  lv_obj_set_style_border_width(menuBox, 0, LV_PART_MAIN);

  lv_menu_set_page(this->settingsMenu, this->settingsMainPage);
}

void OmoteUI::ta_kb_event_cb(lv_event_t *e) {
  lv_event_code_t code = lv_event_get_code(e);
  lv_obj_t *ta = lv_event_get_target(e);
  lv_obj_t *kb = (lv_obj_t *)lv_event_get_user_data(e);
  switch (code) {
  case LV_EVENT_FOCUSED:
    lv_keyboard_set_textarea(kb, ta);
    lv_obj_clear_flag(kb, LV_OBJ_FLAG_HIDDEN);
    lv_obj_move_foreground(kb);
    break;
  case LV_EVENT_DEFOCUSED:
    lv_keyboard_set_textarea(kb, NULL);
    lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
    break;
  default:
    break;
  }
}

void OmoteUI::create_keyboard() {
  this->kb = lv_keyboard_create(lv_scr_act());
  lv_obj_add_flag(this->kb, LV_OBJ_FLAG_HIDDEN);
  lv_obj_set_y(this->kb, 0);
}

void OmoteUI::hide_keyboard() { lv_obj_add_flag(this->kb, LV_OBJ_FLAG_HIDDEN); }

void OmoteUI::reset_settings_menu() {
  lv_menu_set_page(this->settingsMenu, this->settingsMainPage);
}

void OmoteUI::attach_keyboard(lv_obj_t *textarea) {
  if (this->kb == NULL) {
    this->create_keyboard();
  }
  lv_keyboard_set_textarea(this->kb, textarea);
  lv_obj_add_event_cb(
      textarea, [](lv_event_t *e) { mInstance->ta_kb_event_cb(e); },
      LV_EVENT_FOCUSED, this->kb);
  lv_obj_add_event_cb(
      textarea, [](lv_event_t *e) { mInstance->ta_kb_event_cb(e); },
      LV_EVENT_DEFOCUSED, this->kb);
}

void OmoteUI::layout_UI() {

  // Set the background color
  lv_obj_set_style_bg_color(lv_scr_act(), lv_color_black(), LV_PART_MAIN);
  this->create_keyboard();
  // Setup a scrollable tabview for devices and settings
  lv_obj_t *tabview;
  tabview =
      lv_tabview_create(lv_scr_act(), LV_DIR_TOP,
                        0); // Hide tab labels by setting their height to 0
  lv_obj_set_style_bg_color(tabview, lv_color_black(), LV_PART_MAIN);
  lv_obj_set_size(tabview, SCREEN_WIDTH,
                  270); // 270 = screenHeight(320) - panel(30) - statusbar(20)
  lv_obj_align(tabview, LV_ALIGN_TOP_MID, 0, 20);

  // Add 4 tabs (names are irrelevant since the labels are hidden)
  lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Settings");
  lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "Technisat");
  lv_obj_t *tab3 = lv_tabview_add_tab(tabview, "Apple TV");
  lv_obj_t *tab4 = lv_tabview_add_tab(tabview, "Smart Home");

  // Configure number button grid
  static lv_coord_t col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_FR(1),
                                 LV_GRID_TEMPLATE_LAST}; // equal x distribution
  static lv_coord_t row_dsc[] = {
      52, 52, 52, 52, LV_GRID_TEMPLATE_LAST}; // manual y distribution to
                                              // compress the grid a bit

  // Create a container with grid for tab2
  lv_obj_set_style_pad_all(tab2, 0, LV_PART_MAIN);
  lv_obj_t *cont = lv_obj_create(tab2);
  lv_obj_set_style_shadow_width(cont, 0, LV_PART_MAIN);
  lv_obj_set_style_bg_color(cont, lv_color_black(), LV_PART_MAIN);
  lv_obj_set_style_border_width(cont, 0, LV_PART_MAIN);
  lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0);
  lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0);
  lv_obj_set_size(cont, 240, 270);
  lv_obj_set_layout(cont, LV_LAYOUT_GRID);
  lv_obj_align(cont, LV_ALIGN_TOP_MID, 0, 0);
  lv_obj_set_style_radius(cont, 0, LV_PART_MAIN);

  lv_obj_t *buttonLabel;
  lv_obj_t *obj;

  // Iterate through grid buttons configure them
  for (int i = 0; i < 12; i++) {
    uint8_t col = i % 3;
    uint8_t row = i / 3;
    // Create the button object
    if ((row == 3) && ((col == 0) || (col == 2)))
      continue; // Do not create a complete fourth row, only a 0 button
    obj = lv_btn_create(cont);
    lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
                         LV_GRID_ALIGN_STRETCH, row, 1);
    lv_obj_set_style_bg_color(obj, this->color_primary, LV_PART_MAIN);
    lv_obj_set_style_radius(obj, 14, LV_PART_MAIN);
    lv_obj_set_style_shadow_color(obj, lv_color_hex(0x404040), LV_PART_MAIN);
    lv_obj_add_flag(obj, LV_OBJ_FLAG_EVENT_BUBBLE); // Clicking a button causes
                                                    // a event in its container
    // Create Labels for each button
    buttonLabel = lv_label_create(obj);
    if (i < 9) {
      lv_label_set_text_fmt(buttonLabel, std::to_string(i + 1).c_str(), col,
                            row);
      lv_obj_set_user_data(obj,
                           (void *)i); // Add user data so we can identify which
                                       // button caused the container event
    } else {
      lv_label_set_text_fmt(buttonLabel, "0", col, row);
      lv_obj_set_user_data(obj, (void *)9);
    }
    lv_obj_set_style_text_font(buttonLabel, &lv_font_montserrat_24,
                               LV_PART_MAIN);
    lv_obj_center(buttonLabel);
  }
  // Create a shared event for all button inside container
  lv_obj_add_event_cb(
      cont, [](lv_event_t *e) { mInstance->virtualKeypad_event_cb(e); },
      LV_EVENT_CLICKED, NULL);

  // Add content to the Apple TV tab (3)
  // Add a nice apple tv logo
  lv_obj_t *appleImg = imgs.addAppleTVIcon(tab3);
  // create two buttons and add their icons accordingly
  lv_obj_t *button = lv_btn_create(tab3);
  lv_obj_align(button, LV_ALIGN_BOTTOM_LEFT, 10, 0);
  lv_obj_set_size(button, 60, 60);
  lv_obj_set_style_radius(button, 30, LV_PART_MAIN);
  lv_obj_set_style_bg_color(button, color_primary, LV_PART_MAIN);
  lv_obj_add_event_cb(
      button, [](lv_event_t *e) { mInstance->appleKey_event_cb(e); },
      LV_EVENT_CLICKED, (void *)1);

  appleImg = imgs.addAppleDisplayImage(button);
  lv_obj_align(appleImg, LV_ALIGN_CENTER, -3, 0);
  lv_obj_set_style_img_recolor(appleImg, lv_color_white(), LV_PART_MAIN);
  lv_obj_set_style_img_recolor_opa(appleImg, LV_OPA_COVER, LV_PART_MAIN);
  lv_obj_align(appleImg, LV_ALIGN_CENTER, -3, 0);

  button = lv_btn_create(tab3);
  lv_obj_align(button, LV_ALIGN_BOTTOM_RIGHT, -10, 0);
  lv_obj_set_size(button, 60, 60);
  lv_obj_set_style_radius(button, 30, LV_PART_MAIN);
  lv_obj_set_style_bg_color(button, color_primary, LV_PART_MAIN);
  lv_obj_add_event_cb(
      button, [](lv_event_t *e) { mInstance->appleKey_event_cb(e); },
      LV_EVENT_CLICKED, (void *)2);

  appleImg = imgs.addAppleDisplayImage(button);
  lv_obj_align(appleImg, LV_ALIGN_CENTER, 0, 0);
  lv_obj_set_style_img_recolor(appleImg, lv_color_white(), LV_PART_MAIN);
  lv_obj_set_style_img_recolor_opa(appleImg, LV_OPA_COVER, LV_PART_MAIN);
  lv_obj_align(appleImg, LV_ALIGN_CENTER, 0, 0);

  this->setup_settings(tab1);

  // Add content to the smart home tab (4)
  lv_obj_set_layout(tab4, LV_LAYOUT_FLEX);
  lv_obj_set_flex_flow(tab4, LV_FLEX_FLOW_COLUMN);
  lv_obj_set_scrollbar_mode(tab4, LV_SCROLLBAR_MODE_ACTIVE);

  // Add a label, then a box for the light controls
  lv_obj_t *menuLabel = lv_label_create(tab4);
  lv_label_set_text(menuLabel, "Living Room");

  lv_obj_t *menuBox = lv_obj_create(tab4);
  lv_obj_set_size(menuBox, lv_pct(100), 79);
  lv_obj_set_style_bg_color(menuBox, color_primary, LV_PART_MAIN);
  lv_obj_set_style_border_width(menuBox, 0, LV_PART_MAIN);

  lv_obj_t *bulbIcon = imgs.addLightBulbIcon(menuBox);
  lv_obj_align(bulbIcon, LV_ALIGN_TOP_LEFT, 0, 0);

  menuLabel = lv_label_create(menuBox);
  lv_label_set_text(menuLabel, "Floor Lamp");
  lv_obj_align(menuLabel, LV_ALIGN_TOP_LEFT, 22, 3);
  lv_obj_t *lightToggleA = lv_switch_create(menuBox);
  lv_obj_set_size(lightToggleA, 40, 22);
  lv_obj_align(lightToggleA, LV_ALIGN_TOP_RIGHT, 0, 0);
  lv_obj_set_style_bg_color(lightToggleA, lv_color_lighten(color_primary, 50),
                            LV_PART_MAIN);
  lv_obj_set_style_bg_color(lightToggleA, color_primary, LV_PART_INDICATOR);
  lv_obj_add_event_cb(
      lightToggleA,
      [](lv_event_t *e) { mInstance->smartHomeToggle_event_cb(e); },
      LV_EVENT_VALUE_CHANGED, (void *)1);

  lv_obj_t *slider = lv_slider_create(menuBox);
  lv_slider_set_range(slider, 0, 100);
  lv_obj_set_style_bg_color(slider, lv_color_lighten(lv_color_black(), 30),
                            LV_PART_INDICATOR);
  lv_obj_set_style_bg_grad_color(
      slider, lv_color_lighten(lv_palette_main(LV_PALETTE_AMBER), 180),
      LV_PART_INDICATOR);
  lv_obj_set_style_bg_grad_dir(slider, LV_GRAD_DIR_HOR, LV_PART_INDICATOR);
  lv_obj_set_style_bg_color(slider, lv_color_white(), LV_PART_KNOB);
  lv_obj_set_style_bg_opa(slider, 255, LV_PART_MAIN);
  lv_obj_set_style_bg_color(slider, lv_color_lighten(color_primary, 50),
                            LV_PART_MAIN);
  lv_slider_set_value(slider, 255, LV_ANIM_OFF);
  lv_obj_set_size(slider, lv_pct(90), 10);
  lv_obj_align(slider, LV_ALIGN_TOP_MID, 0, 37);
  lv_obj_add_event_cb(
      slider, [](lv_event_t *e) { mInstance->smartHomeSlider_event_cb(e); },
      LV_EVENT_VALUE_CHANGED, (void *)1);

  // Add another this->settingsMenu box for a second appliance
  menuBox = lv_obj_create(tab4);
  lv_obj_set_size(menuBox, lv_pct(100), 79);
  lv_obj_set_style_bg_color(menuBox, color_primary, LV_PART_MAIN);
  lv_obj_set_style_border_width(menuBox, 0, LV_PART_MAIN);

  bulbIcon = imgs.addLightBulbIcon(menuBox);
  lv_obj_align(bulbIcon, LV_ALIGN_TOP_LEFT, 0, 0);

  menuLabel = lv_label_create(menuBox);
  lv_label_set_text(menuLabel, "Ceiling Light");
  lv_obj_align(menuLabel, LV_ALIGN_TOP_LEFT, 22, 3);
  lv_obj_t *lightToggleB = lv_switch_create(menuBox);
  lv_obj_set_size(lightToggleB, 40, 22);
  lv_obj_align(lightToggleB, LV_ALIGN_TOP_RIGHT, 0, 0);
  lv_obj_set_style_bg_color(lightToggleB, lv_color_lighten(color_primary, 50),
                            LV_PART_MAIN);
  lv_obj_set_style_bg_color(lightToggleB, color_primary, LV_PART_INDICATOR);
  lv_obj_add_event_cb(
      lightToggleB,
      [](lv_event_t *e) { mInstance->smartHomeToggle_event_cb(e); },
      LV_EVENT_VALUE_CHANGED, (void *)2);

  slider = lv_slider_create(menuBox);
  lv_slider_set_range(slider, 0, 100);
  lv_obj_set_style_bg_color(slider, lv_color_lighten(lv_color_black(), 30),
                            LV_PART_INDICATOR);
  lv_obj_set_style_bg_grad_color(
      slider, lv_color_lighten(lv_palette_main(LV_PALETTE_AMBER), 180),
      LV_PART_INDICATOR);
  lv_obj_set_style_bg_grad_dir(slider, LV_GRAD_DIR_HOR, LV_PART_INDICATOR);
  lv_obj_set_style_bg_color(slider, lv_color_white(), LV_PART_KNOB);
  lv_obj_set_style_bg_opa(slider, 255, LV_PART_MAIN);
  lv_obj_set_style_bg_color(slider, lv_color_lighten(color_primary, 50),
                            LV_PART_MAIN);
  lv_slider_set_value(slider, 255, LV_ANIM_OFF);
  lv_obj_set_size(slider, lv_pct(90), 10);
  lv_obj_align(slider, LV_ALIGN_TOP_MID, 0, 37);
  lv_obj_add_event_cb(
      slider, [](lv_event_t *e) { mInstance->smartHomeSlider_event_cb(e); },
      LV_EVENT_VALUE_CHANGED, (void *)2);

  // Add another room (empty for now)
  menuLabel = lv_label_create(tab4);
  lv_label_set_text(menuLabel, "Kitchen");

  menuBox = lv_obj_create(tab4);
  lv_obj_set_size(menuBox, lv_pct(100), 79);
  lv_obj_set_style_bg_color(menuBox, color_primary, LV_PART_MAIN);
  lv_obj_set_style_border_width(menuBox, 0, LV_PART_MAIN);

  // Set current page according to the current Device
  currentDevice = this->mHardware->getCurrentDevice();
  lv_tabview_set_act(tabview, currentDevice, LV_ANIM_OFF);

  // Create a page indicator
  panel = lv_obj_create(lv_scr_act());
  lv_obj_clear_flag(
      panel, LV_OBJ_FLAG_CLICKABLE); // This indicator will not be clickable
  lv_obj_set_size(panel, SCREEN_WIDTH, 30);
  lv_obj_set_flex_flow(panel, LV_FLEX_FLOW_ROW);
  lv_obj_align(panel, LV_ALIGN_BOTTOM_MID, 0, 0);
  lv_obj_set_scrollbar_mode(panel, LV_SCROLLBAR_MODE_OFF);
  // This small hidden button enables the page indicator to scroll further
  lv_obj_t *btn = lv_btn_create(panel);
  lv_obj_set_size(btn, 50, lv_pct(100));
  lv_obj_set_style_shadow_width(btn, 0, LV_PART_MAIN);
  lv_obj_set_style_opa(btn, LV_OPA_TRANSP, LV_PART_MAIN);
  // Create actual (non-clickable) buttons for every tab
  btn = lv_btn_create(panel);
  lv_obj_clear_flag(btn, LV_OBJ_FLAG_CLICKABLE);
  lv_obj_set_size(btn, 150, lv_pct(100));
  lv_obj_t *label = lv_label_create(btn);
  lv_label_set_text_fmt(label, "Settings");
  lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
  lv_obj_set_style_shadow_width(btn, 0, LV_PART_MAIN);
  lv_obj_set_style_bg_color(btn, color_primary, LV_PART_MAIN);

  btn = lv_btn_create(panel);
  lv_obj_clear_flag(btn, LV_OBJ_FLAG_CLICKABLE);
  lv_obj_set_size(btn, 150, lv_pct(100));
  label = lv_label_create(btn);
  lv_label_set_text_fmt(label, "Technisat");
  lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
  lv_obj_set_style_shadow_width(btn, 0, LV_PART_MAIN);
  lv_obj_set_style_bg_color(btn, color_primary, LV_PART_MAIN);

  btn = lv_btn_create(panel);
  lv_obj_clear_flag(btn, LV_OBJ_FLAG_CLICKABLE);
  lv_obj_set_size(btn, 150, lv_pct(100));
  label = lv_label_create(btn);
  lv_label_set_text_fmt(label, "Apple TV");
  lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
  lv_obj_set_style_shadow_width(btn, 0, LV_PART_MAIN);
  lv_obj_set_style_bg_color(btn, color_primary, LV_PART_MAIN);

  btn = lv_btn_create(panel);
  lv_obj_clear_flag(btn, LV_OBJ_FLAG_CLICKABLE);
  lv_obj_set_size(btn, 150, lv_pct(100));
  label = lv_label_create(btn);
  lv_label_set_text_fmt(label, "Smart Home");
  lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
  lv_obj_set_style_shadow_width(btn, 0, LV_PART_MAIN);
  lv_obj_set_style_bg_color(btn, color_primary, LV_PART_MAIN);
  // This small hidden button enables the page indicator to scroll further
  btn = lv_btn_create(panel);
  lv_obj_set_size(btn, 50, lv_pct(100));
  lv_obj_set_style_shadow_width(btn, 0, LV_PART_MAIN);
  lv_obj_set_style_opa(btn, LV_OPA_TRANSP, LV_PART_MAIN);

  // Make the indicator scroll together with the tabs by creating a scroll event
  lv_obj_add_event_cb(
      lv_tabview_get_content(tabview),
      [](lv_event_t *e) { mInstance->store_scroll_value_event_cb(e); },
      LV_EVENT_SCROLL, NULL);
  lv_obj_add_event_cb(
      tabview, [](lv_event_t *e) { mInstance->tabview_device_event_cb(e); },
      LV_EVENT_VALUE_CHANGED, NULL);
  // Initialize scroll position for the indicator
  lv_event_send(lv_tabview_get_content(tabview), LV_EVENT_SCROLL, NULL);

  // Style the panel background
  static lv_style_t style_btn;
  lv_style_init(&style_btn);
  lv_style_set_pad_all(&style_btn, 3);
  lv_style_set_border_width(&style_btn, 0);
  lv_style_set_bg_opa(&style_btn, LV_OPA_TRANSP);
  lv_obj_add_style(panel, &style_btn, 0);

  // Make the indicator fade out at the sides using gradient bitmaps
  lv_obj_t *img1 = imgs.addLeftGradiant(lv_scr_act());
  lv_obj_align(img1, LV_ALIGN_BOTTOM_LEFT, 0, 0);
  lv_obj_set_size(img1, 30, 30); // stretch the 1-pixel high image to 30px
  lv_obj_t *img2 = imgs.addRightGradiant(lv_scr_act());
  lv_obj_align(img2, LV_ALIGN_BOTTOM_RIGHT, 0, 0);
  lv_obj_set_size(img2, 30, 30);

  this->create_status_bar();
  this->mHardware->wifi()->begin();
}