import * as UI from "../../lib";

import { Canvas, Meta, Story } from "@storybook/addon-docs";

<Meta title="Log" />

export const buttonDecorator = (Story, { args }) => {
  const button = document.createElement("button");
  button.innerText = args.buttonLabel;
  button.addEventListener("click", () => Story());
  return button;
};

# The Log module

On this page you'll find some examples from the log module. See
[API documentation](https://solidos.github.io/solid-ui/Documentation/api/modules/_log_)
for more information.

<div
  style={{background: "white", border: "0.5em solid black", position: "fixed", top: 0, right: 0, width: "300px", padding: "0.5em"}}>

**Status area:** This is the playground which the examples will interact with. Click the various
buttons to see their effect here.

<div
  id="status"
  style={{ border: "1px solid red", padding: "0.5em", maxHeight: "50vh", overflow: "auto" }}
></div>

Note that by default only `msg`, `warn` and `error` will add messages to the
status area. You can change this by using [setLevel](?path=/docs/log--set-level).

</div>

## log.msg: A simple message

<Canvas withSource="open">
  <Story
    name="simple message"
    decorators={[buttonDecorator]}
    args={{ buttonLabel: "Add a message" }}
  >
    {() => UI.log.msg("A simple message")}
  </Story>
</Canvas>

## log.warn: A warning message

<Canvas withSource="open">
  <Story
    name="warning message"
    decorators={[buttonDecorator]}
    args={{ buttonLabel: "Add a warning" }}
  >
    {() => UI.log.warn("A warning message")}
  </Story>
</Canvas>

## log.debug: A debug message

<Canvas withSource="open">
  <Story
    name="debug message"
    decorators={[buttonDecorator]}
    args={{ buttonLabel: "Add a debugging message" }}
  >
    {() => UI.log.debug("A debugging message")}
  </Story>
</Canvas>

## log.info: An info message

<Canvas withSource="open">
  <Story
    name="info message"
    decorators={[buttonDecorator]}
    args={{ buttonLabel: "Add an info message" }}
  >
    {() => UI.log.info("An info message")}
  </Story>
</Canvas>

## log.error: An error message

<Canvas withSource="open">
  <Story
    name="error message"
    decorators={[buttonDecorator]}
    args={{ buttonLabel: "Add an error message" }}
  >
    {() => UI.log.error("An error message")}
  </Story>
</Canvas>

## log.success: A success message

<Canvas withSource="open">
  <Story
    name="success message"
    decorators={[buttonDecorator]}
    args={{ buttonLabel: "Add a success message" }}
  >
    {() => UI.log.success("A success message")}
  </Story>
</Canvas>

## log.alert: A alert message

This example uses alert to notify user of a message. It will not log in the status area unless window.alert is not available.

<Canvas withSource="open">
  <Story
    name="alert message"
    decorators={[buttonDecorator]}
    args={{ buttonLabel: "Trigger an alert message" }}
  >
    {() => UI.log.alert("An alert message")}
  </Story>
</Canvas>

## log.clear: Clear messages

Using this method you can clear the existing messages in the status area.

<Canvas withSource="open">
  <Story
    name="clear messages"
    decorators={[buttonDecorator]}
    args={{ buttonLabel: "Clear status area" }}
  >
    {() => UI.log.clear()}
  </Story>
</Canvas>

## log.setLevel: Configure which messages are to be shown

The module uses [bitmask](<https://en.wikipedia.org/wiki/Mask_(computing)>) to filter which types of messages that will be shown. It assigns the following 10-based
number to each type (binaries in parenthesis):

- Error: 1 (000001)
- Warning: 2 (000010)
- Message: 4 (000100)
- Success: 8 (001000)
- Info: 16 (010000)
- Debug: 32 (100000)

By default only error, warning, and normal messages will be shown, hence the number 7 that is shown by default in this example. You can set it to show all types of messages by passing 63 (which is the sum of all, and is 111111 in binary).

<Canvas withSource="open">
  <Story name="set level">
    {() => {
      const div = document.createElement("div");
      const input = document.createElement("input");
      input.type = "text";
      input.inputmode = "numeric";
      input.pattern = "[0-9]*";
      input.value = 7;
      div.appendChild(input);
      const button = document.createElement("button");
      button.innerText = "Set level";
      button.addEventListener("click", () => UI.log.setLevel(parseInt(input.value, 10)));
      div.appendChild(button);
      return div;
    }}
  </Story>
</Canvas>

## log.dumpHTML: Dump all HTML in body in a log message

<Canvas withSource="open">
  <Story name="dump html" decorators={[buttonDecorator]} args={{ buttonLabel: "Dump HTML" }}>
    {() => UI.log.dumpHTML()}
  </Story>
</Canvas>

## log.logAscending: Start logging all messages in ascending order

<Canvas withSource="open">
  <Story
    name="log ascending"
    decorators={[buttonDecorator]}
    args={{ buttonLabel: "Log ascending" }}
  >
    {() => UI.log.logAscending()}
  </Story>
</Canvas>

## log.logDescending: Start logging all messages in descending order

<Canvas withSource="open">
  <Story
    name="log descending"
    decorators={[buttonDecorator]}
    args={{ buttonLabel: "Log descending" }}
  >
    {() => UI.log.logDescending()}
  </Story>
</Canvas>
