package dev.cf.recipe;

import dev.cf.Tones;

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

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

/**
 * Why colours come from tokens: the switch restyles the live tree, and only the token follows.
 */
public class R02Theme extends Recipe
{
   /** A colour written as a literal. It cannot follow the theme, and that is the point. */
   private static final int CRAVADO = 0xFF1A1A1A;

   private static final int IC_TOKEN = 0xE40A, IC_FIXED = 0xE897;

   public String title()
   {
      return "Theme tokens";
   }

   public String note()
   {
      return "Flip the switch. The token line follows the theme; the hardcoded one does not, and"
         + " turns unreadable — no rebuild involved.";
   }

   public void build(Component body) throws Exception
   {
      // The tokens, on a card in the tone they themselves resolve: turning dark mode on moves the
      // card, the border and the three lines at once, and nothing here was told.
      Card tokens = Tones.card(Tones.accent());
      tokens.setLayout(new VerticalLayout(Position.START, Position.START));
      tokens.add(LAY_AUTO, Tones.head(IC_TOKEN, "From a token", Tones.accent()));
      tokens.add(LAY_AUTO, outgap(label("Styles.textColor", 1.2f, true, Styles.textColor,
         Position.START), 0, 0, 0, .3f));
      tokens.add(LAY_AUTO, label("Styles.captionColor", 1f, false, Styles.captionColor,
         Position.START));
      tokens.add(LAY_AUTO, outgap(label("Tones.accent() — a role of the scheme", 1f, true,
         Tones.accent(), Position.START), 0, .3f, 0, 0));
      body.add(LAY_AUTO, outgap(tokens, 0, 0, 0, .8f));

      // The literal: readable in light, almost invisible in dark. It is the demonstration, not the
      // example — and the error tone around it says which half of the screen is the wrong one.
      Card cravado = Tones.card(Tones.danger());
      cravado.setLayout(new VerticalLayout(Position.START, Position.START));
      cravado.add(LAY_AUTO, Tones.head(IC_FIXED, "Written down", Tones.danger()));
      cravado.add(LAY_AUTO, outgap(label("0xFF1A1A1A", 1.2f, true, CRAVADO, Position.START),
         0, 0, 0, 0));
      body.add(LAY_AUTO, outgap(cravado, 0, 0, 0, 1f));

      Switch escuro = new Switch("Dark mode");
      escuro.testTag("recipe.dark");
      escuro.checked(Styles.isDarkMode());
      // setDarkMode restyles every live component: nothing here rebuilds, and nothing needs to.
      escuro.onAction(c -> Styles.setDarkMode(escuro.isChecked()));
      body.add(LAY_AUTO, escuro);
   }
}