if !Code.ensure_loaded?(Kino.SmartCell) do
  defmodule Evision.SmartCell.SimpleList do
  end
else
  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
end