/components/hexagon/hexagon

import { emptyCell, hexagon, hexagonGrid, hexagonRow } from "@hedia/hexui/components/hexagon";
import { prose } from "@hedia/hexui/components/prose";
import { br, div, h3 } from "@hedia/html/elements";

export default {
  BasicHexagon,
  HexagonWithContent,
  HexagonSizes,
  HexagonColors,
  HexagonRow,
  HexagonGridMultiRow,
};

export function BasicHexagon() {
  return div({ class: "align-items-center" }, hexagonGrid(hexagonRow(hexagon())));
}

export function HexagonWithContent() {
  return div(
    { class: "align-items-center" },
    hexagonGrid(
      { size: "xl" },
      hexagonRow(
        hexagon({
          color: "green",
          top: "AVG",
          middle: "7.2",
          bottom: "mmol/L",
        }),
      ),
    ),
  );
}

export function HexagonSizes() {
  return div(
    { class: "align-items-center" },
    hexagonGrid({ size: "xs" }, hexagonRow(hexagon({ middle: "xs" }))),
    br(),
    hexagonGrid({ size: "sm" }, hexagonRow(hexagon({ middle: "sm" }))),
    br(),
    hexagonGrid({ size: "md" }, hexagonRow(hexagon({ middle: "md" }))),
    br(),
    hexagonGrid({ size: "lg" }, hexagonRow(hexagon({ middle: "lg" }))),
    br(),
    hexagonGrid({ size: "xl" }, hexagonRow(hexagon({ middle: "xl" }))),
  );
}

export function HexagonColors() {
  return div(
    { class: "align-items-center" },
    hexagonGrid(
      { padBottom: true },
      hexagonRow(
        hexagon({ color: "primary", top: "primary" }),
        hexagon({ color: "base", top: "base" }),
        hexagon({ color: "green", top: "green" }),
      ),
      hexagonRow(
        hexagon({ color: "red", top: "red" }),
        hexagon({ color: "yellow", top: "yellow" }),
        hexagon({ color: "black", top: "black" }),
      ),
      hexagonRow(
        hexagon({ color: "white", top: "white" }),
        hexagon({ color: "transparent", top: "transparent" }),
      ),
    ),
  );
}

export function HexagonRow() {
  return [
    prose(h3("Standard hexagon row")),
    hexagonGrid(
      { size: "sm", padBottom: true },
      hexagonRow(
        hexagon({ color: "red", top: "Low", middle: "11%" }),
        hexagon({ color: "green", top: "Target", middle: "75%" }),
        hexagon({ color: "yellow", top: "High", middle: "13%" }),
        hexagon({ color: "base", top: "Off", middle: "1%" }),
      ),
    ),
    br(),
    prose(h3("Inverted hexagon row")),
    hexagonGrid(
      { inverted: true, size: "sm", padBottom: true },
      hexagonRow(
        hexagon({ color: "red", top: "Low", middle: "11%" }),
        hexagon({ color: "green", top: "Target", middle: "75%" }),
        hexagon({ color: "yellow", top: "High", middle: "13%" }),
        hexagon({ color: "base", top: "Off", middle: "1%" }),
      ),
    ),
  ];
}

export function HexagonGridMultiRow() {
  return div(
    { class: "align-items-center" },
    hexagonGrid(
      { size: "sm", padBottom: true },
      hexagonRow(
        hexagon({ color: "primary", middle: "1" }),
        hexagon({ color: "primary", middle: "2" }),
        hexagon({ color: "green", middle: "3" }),
        hexagon({ color: "green", middle: "4" }),
      ),
      hexagonRow(
        hexagon({ color: "primary", middle: "5" }),
        hexagon({ color: "primary", middle: "6" }),
        hexagon({ color: "green", middle: "7" }),
        hexagon({ color: "green", middle: "8" }),
      ),
      hexagonRow(
        hexagon({ color: "red", middle: "9" }),
        emptyCell(),
        hexagon({ color: "primary", middle: "10" }),
        hexagon({ color: "yellow", middle: "11" }),
      ),
      hexagonRow(hexagon({ color: "base", middle: "12" }), hexagon({ color: "base", middle: "13" })),
    ),
  );
}