import * as UI from '../../src/index'

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

import { action } from "@storybook/addon-actions";

<Meta title="Interactive" />

## Ask name

[API docs](https://solidos.github.io/solid-ui/docs/api/modules/_widgets_buttons_.html#askname)

<Canvas>
  <Story name="Ask name">
    {() => {
      const div = document.createElement("div");
      UI.widgets
        .askName(document, SolidLogic.store, div)
        .then((name) => window.alert(`You picked "${name}"`));
      return div;
    }}
  </Story>
</Canvas>

## Attachment list

Component that displays a list of resources, for instance the attachments of a message, or the various documents related to a meeting.
Accepts dropping URLs onto it to add attachments to it.

[API docs](https://solidos.github.io/solid-ui/docs/api/modules/_widgets_buttons_.html#attachmentlist)

<Canvas>
  <Story name="Attachment list">
    {() => {
      const div = document.createElement("div");
      SolidLogic.store.add(
        $rdf.namedNode("https://example-user.inrupt.net/public/some-message.ttl#this"),
        UI.ns.wf("attachment"),
        $rdf.namedNode("http://example.com/#some-attachment")
      );
      UI.widgets.attachmentList(
        document,
        $rdf.namedNode("https://example-user.inrupt.net/public/some-message.ttl" + "#this"),
        div
      );
      return div;
    }}
  </Story>
</Canvas>

## personTR

A TR to represent a draggable person, etc in a list

[API docs](https://solidos.github.io/solid-ui/docs/api/modules/_widgets_buttons_.html#persontr)

<Canvas>
  <Story name="Person TR">
    {() => {
      const michiel = $rdf.namedNode("https://michielbdejong.inrupt.net/profile/card#me");
      return UI.widgets.personTR(document, null, michiel);
    }}
  </Story>
</Canvas>

## renderAsDIV

A Div to represent a draggable person, etc in a list

[API docs](https://solidos.github.io/solid-ui/docs/api/modules/_widgets_buttons_.html#persontr)

<Canvas>
  <Story name="Render As DIV">
    {() => {
      const michiel = $rdf.namedNode("https://michielbdejong.inrupt.net/profile/card#me");
      const options = {
        wrapInATR: true,
      };
      return UI.widgets.renderAsDiv(document, michiel, options);
    }}
  </Story>
</Canvas>

## selectorPanel

[API docs](https://solidos.github.io/solid-ui/docs/api/modules/_widgets_buttons_.html#selectorpanel)

<Canvas>
  <Story name="selectorPanel">
    {() => {
      const kb = $rdf.graph();
      const type = $rdf.namedNode("http://example.com/#type");
      const predicate = $rdf.namedNode("http://example.com/#pred");
      const inverse = false;
      const possible = [
        $rdf.namedNode("http://example.com/#blue"),
        $rdf.namedNode("http://example.com/#green"),
        $rdf.namedNode("http://example.com/#yellow"),
      ];
      const options = {};
      return UI.widgets.selectorPanel(
        document,
        kb,
        type,
        predicate,
        inverse,
        possible,
        options,
        action("selection"),
        action("link clicked")
      );
    }}
  </Story>
</Canvas>

## selectorPanelRefresh

[API docs](https://solidos.github.io/solid-ui/docs/api/modules/_widgets_buttons_.html#selectorpanelrefresh)

<Canvas>
  <Story name="selectorPanelRefresh">
    {() => {
      const list = document.createElement("div");
      const kb = $rdf.graph();
      const type = $rdf.namedNode("http://example.com/#type");
      const predicate = $rdf.namedNode("http://example.com/#pred");
      const inverse = false;
      const possible = [
        $rdf.namedNode("http://example.com/#blue"),
        $rdf.namedNode("http://example.com/#green"),
        $rdf.namedNode("http://example.com/#yellow"),
      ];
      const options = {};
      return UI.widgets.selectorPanelRefresh(
        list,
        document,
        kb,
        type,
        predicate,
        inverse,
        possible,
        options,
        action("selection"),
        action("link clicked")
      );
    }}
  </Story>
</Canvas>
