package dev.cf.recipe;

import dev.crossfly.ui.*;
import dev.crossfly.ui.graphics.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.skin.Skin;
import dev.crossfly.ui.style.*;

import static dev.crossfly.ui.Widgets.*;

/**
 * Bottom navigation that turns into a rail on a wide screen, with no width check anywhere.
 *
 * <p>Resize the window and watch the strip move to the left edge and grow labels. Nothing below
 * asks how wide the screen is, listens for an orientation change, or holds a phone/tablet flag —
 * that behaviour is the {@link TabBar}'s, and an app that reimplements it gets a second, slightly
 * different answer to the same question.</p>
 */
public class R12Nav extends Recipe
{
   private static final int IC_HOME = 0xE88A, IC_LIST = 0xE8EF, IC_CHART = 0xE6E1, IC_MORE = 0xE5D2;

   public String title()
   {
      return "Bottom nav that becomes a rail";
   }

   public String note()
   {
      return "One flag — tabsAtBottom — and the strip is a bottom bar on a phone and a rail on a"
         + " tablet. Resize the window to see it happen.";
   }

   public void build(Component body) throws Exception
   {
      TabBar tabs = new TabBar(new TabBar.Tab("Home", MaterialIcon.of(IC_HOME, 1.5f)),
         new TabBar.Tab("Items", MaterialIcon.of(IC_LIST, 1.5f)),
         new TabBar.Tab("Reports", MaterialIcon.of(IC_CHART, 1.5f)),
         // railHidden: a "More" tab exists to reach what does not fit on a phone. On a rail
         // everything already fits, so the tab that only reopens the same list is dropped.
         new TabBar.Tab("More", MaterialIcon.of(IC_MORE, 1.5f)).railHidden(true));

      tabs.setContent(page("Home"), page("Items"), page("Reports"), page("More"));
      // A badge is a count the user has not dealt with. Null clears it — never show a zero.
      tabs.badge(1, "3");
      tabs.style(Skin.get()
         .tabBar()
         .copy()
         .tabsAtBottom(true));
      tabs.testTag("recipe.nav");
      body.add(LAY_FILL, tabs);
   }

   /** Each destination is a Component the bar keeps alive — not a Window. See dev.cf.app.crud. */
   private Component page(String name) throws Exception
   {
      Component c = new Component();
      c.setLayout(new VerticalLayout(Position.CENTER, Position.CENTER));
      c.add(LAY_AUTO, label(name, 1.5f, true, Styles.textColor, Position.CENTER));
      c.add(LAY_AUTO, outgap(label("Kept alive across switches, so coming back finds it where you"
         + " left it.", 1f, false, Styles.captionColor, Position.CENTER), 1f, .4f, 1f, 0));
      return c;
   }
}