defmodule Evision.SmartCell.SimpleList do
  # code taken from
  # https://github.com/livebook-dev/kino_bumblebee/blob/main/lib/kino/bumblebee/scored_list.ex

  @moduledoc """
  A kino for displaying a list of labels.
  This kino is primarily used to present top classification predictions.
  ## Examples
      predictions =  [
        "malamute",
        "Siberian husky",
        "Eskimo dog",
        "Tibetan mastiff",
        "German shepherd"
      ]
      Evision.SmartCell.SimpleList.new(predictions)
  """

  use Kino.JS

  @type t :: Kino.JS.t()

  @doc """
  Creates a new kino displaying the given list of items.
  Expects a list of tuples, each element being the label and its score.
  """
  @spec new(list({String.t(), number()})) :: t()
  def new(items) when is_list(items) do
    Kino.JS.new(__MODULE__, items)
  end

  asset "main.js" do
    """
    export function init(ctx, items) {
      ctx.importCSS("main.css");
      ctx.importCSS(
        "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"
      );
      ctx.root.innerHTML = `
        <div class="app">
          <ol class="list">
            ${items.map((item) => (`
              <li class="item">
                <div class="label">
                  <div>${item}</div>
                </div>
              </li>
            `)).join("")}
          </ol>
        </div>
      `;
    }
    """
  end

  asset "main.css" do
    """
    .app {
      font-family: "JetBrains Mono", monospace;
      font-size: 14px;
      color: #8BA2FF;
    }
    .list {
      padding: 0;
      margin: 0;
    }
    .item {
      display: flex;
      justify-content: space-between;
    }
    .item:not(:first-child) {
      margin-top: 16px;
    }
    .label {
      flex-grow: 1;
      margin-right: 8px;
    }
    """
  end
end