(** Types for the SX native render tree.

    Every SX element is converted to a [node] with a [style] record
    that the layout engine positions and the painter draws. *)

type color = { r: float; g: float; b: float; a: float }

type edges = { top: float; right: float; bottom: float; left: float }

type style = {
  display: [`Flex | `Block | `None];
  flex_direction: [`Row | `Column];
  gap: float;
  padding: edges;
  margin: edges;
  align_items: [`Start | `Center | `End | `Stretch];
  justify_content: [`Start | `Center | `End | `Between];
  flex_grow: float;
  bg_color: color option;
  text_color: color;
  font_size: float;
  font_weight: [`Normal | `Bold];
  font_style: [`Normal | `Italic];
  font_family: [`Sans | `Mono];
  border_radius: float;
  border_width: float;
  border_color: color option;
  width: [`Auto | `Px of float | `Full];
  height: [`Auto | `Px of float | `Full];
  shadow: [`None | `Sm | `Md];
  overflow_hidden: bool;
}

type box = {
  mutable x: float;
  mutable y: float;
  mutable w: float;
  mutable h: float;
}

type node = {
  tag: string;
  style: style;
  children: node list;
  text: string option;
  box: box;
  href: string option;
  on_click: (unit -> unit) option;
}

let zero_edges = { top = 0.; right = 0.; bottom = 0.; left = 0. }

let stone_800 = { r = 0.114; g = 0.094; b = 0.082; a = 1.0 }

let default_style = {
  display = `Flex;
  flex_direction = `Column;
  gap = 0.;
  padding = zero_edges;
  margin = zero_edges;
  align_items = `Stretch;
  justify_content = `Start;
  flex_grow = 0.;
  bg_color = None;
  text_color = stone_800;
  font_size = 16.;
  font_weight = `Normal;
  font_style = `Normal;
  font_family = `Sans;
  border_radius = 0.;
  border_width = 0.;
  border_color = None;
  width = `Auto;
  height = `Auto;
  shadow = `None;
  overflow_hidden = false;
}

let make_box () = { x = 0.; y = 0.; w = 0.; h = 0. }
