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

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

<Meta title="Forms/Options" />

## UI.widgets.field[UI.ns.ui('Options').uri], using RDF types

<Canvas>
  <Story name="using RDF types">
    {() => {
      const container = document.createElement("div");
      const already = {};
      const subject = UI.rdf.namedNode("http://first.example/#this");
      const exampleOptionsField = UI.rdf.namedNode("http://first.example/#exampleOptionsField");
      const store = UI.rdf.namedNode("http://first.example/#store");
      /* UI to display in case subject is a house: */
      UI.store.add(
        exampleOptionsField,
        UI.ns.ui("case"),
        UI.rdf.namedNode("http://first.example/#if-subject-is-house"),
        UI.rdf.namedNode("http://first.example/")
      );
      UI.store.add(
        UI.rdf.namedNode("http://first.example/#if-subject-is-house"),
        UI.ns.ui("for"),
        UI.rdf.namedNode("http://first.example/#house"),
        UI.rdf.namedNode("http://first.example/")
      );
      UI.store.add(
        UI.rdf.namedNode("http://first.example/#if-subject-is-house"),
        UI.ns.ui("use"),
        UI.rdf.namedNode("http://first.example/#number-of-bedrooms"),
        UI.rdf.namedNode("http://first.example/")
      );
      UI.store.add(
        UI.rdf.namedNode("http://first.example/#number-of-bedrooms"),
        UI.ns.rdf("type"),
        UI.ns.ui("Comment")
      );
      UI.store.add(
        UI.rdf.namedNode("http://first.example/#number-of-bedrooms"),
        UI.ns.ui("contents"),
        "[UI for houses]"
      );
      /* UI to display in case subject is a cow: */
      UI.store.add(
        exampleOptionsField,
        UI.ns.ui("case"),
        UI.rdf.namedNode("http://first.example/#if-subject-is-cow"),
        UI.rdf.namedNode("http://first.example/")
      );
      UI.store.add(
        UI.rdf.namedNode("http://first.example/#if-subject-is-cow"),
        UI.ns.ui("for"),
        UI.rdf.namedNode("http://first.example/#cow"),
        UI.rdf.namedNode("http://first.example/")
      );
      UI.store.add(
        UI.rdf.namedNode("http://first.example/#if-subject-is-cow"),
        UI.ns.ui("use"),
        UI.rdf.namedNode("http://first.example/#number-of-legs"),
        UI.rdf.namedNode("http://first.example/")
      );
      UI.store.add(
        UI.rdf.namedNode("http://first.example/#number-of-legs"),
        UI.ns.rdf("type"),
        UI.ns.ui("Comment")
      );
      UI.store.add(
        UI.rdf.namedNode("http://first.example/#number-of-legs"),
        UI.ns.ui("contents"),
        "[UI for cows]"
      );
      UI.store.add(
        subject,
        UI.ns.rdf("type"),
        UI.rdf.namedNode("http://first.example/#cow"),
        UI.rdf.namedNode("http://first.example/")
      ); // Subject is a cow, so it should display [UI for cows]
      document.outlineManager = {
        // FIXME: https://github.com/solidos/solid-ui/issues/239
        appendPropertyTRs: () => {},
      };
      UI.widgets.field[UI.ns.ui("Options").uri](
        document,
        container,
        already,
        subject,
        exampleOptionsField,
        store,
        action("callback")
      );
      return container;
    }}
  </Story>
</Canvas>

## UI.widgets.field[UI.ns.ui('Options').uri], using dependingOn

<Canvas>
  <Story name="depending on">
    {() => {
      const container = document.createElement("div");
      const already = {};
      const subject = UI.rdf.namedNode("http://second.example/#this");
      const exampleOptionsField = UI.rdf.namedNode("http://second.example/#exampleOptionsField");
      const store = UI.rdf.namedNode("http://second.example/#store");
      /* This form depends on persona: */
      UI.store.add(
        exampleOptionsField,
        UI.ns.ui("dependingOn"),
        UI.rdf.namedNode("http://second.example/#persona"),
        UI.rdf.namedNode("http://second.example/")
      );
      /* UI to display in case subject is developer: */
      UI.store.add(
        exampleOptionsField,
        UI.ns.ui("case"),
        UI.rdf.namedNode("http://second.example/#if-subject-is-developer"),
        UI.rdf.namedNode("http://second.example/")
      );
      UI.store.add(
        UI.rdf.namedNode("http://second.example/#if-subject-is-developer"),
        UI.ns.ui("for"),
        UI.rdf.namedNode("http://second.example/#developer"),
        UI.rdf.namedNode("http://second.example/")
      );
      UI.store.add(
        UI.rdf.namedNode("http://second.example/#if-subject-is-developer"),
        UI.ns.ui("use"),
        UI.rdf.namedNode("http://second.example/#ui-for-developers"),
        UI.rdf.namedNode("http://second.example/")
      );
      UI.store.add(
        UI.rdf.namedNode("http://second.example/#ui-for-developers"),
        UI.ns.rdf("type"),
        UI.ns.ui("Comment")
      );
      UI.store.add(
        UI.rdf.namedNode("http://second.example/#ui-for-developers"),
        UI.ns.ui("contents"),
        "[UI for developers]"
      );
      /* UI to display in case subject is power user: */
      UI.store.add(
        exampleOptionsField,
        UI.ns.ui("case"),
        UI.rdf.namedNode("http://second.example/#if-subject-is-power-user"),
        UI.rdf.namedNode("http://second.example/")
      );
      UI.store.add(
        UI.rdf.namedNode("http://second.example/#if-subject-is-power-user"),
        UI.ns.ui("for"),
        UI.rdf.namedNode("http://second.example/#power-user"),
        UI.rdf.namedNode("http://second.example/")
      );
      UI.store.add(
        UI.rdf.namedNode("http://second.example/#if-subject-is-power-user"),
        UI.ns.ui("use"),
        UI.rdf.namedNode("http://second.example/#ui-for-power-users"),
        UI.rdf.namedNode("http://second.example/")
      );
      UI.store.add(
        UI.rdf.namedNode("http://second.example/#ui-for-power-users"),
        UI.ns.rdf("type"),
        UI.ns.ui("Comment")
      );
      UI.store.add(
        UI.rdf.namedNode("http://second.example/#ui-for-power-users"),
        UI.ns.ui("contents"),
        "[UI for power users]"
      );
      /* Subject is both a developer and a power user, so it should display both [UI for developers] and [UI for
       power users] */
      UI.store.add(
        subject,
        UI.rdf.namedNode("http://second.example/#persona"),
        UI.rdf.namedNode("http://second.example/#developer"),
        UI.rdf.namedNode("http://second.example/")
      );
      UI.store.add(
        subject,
        UI.rdf.namedNode("http://second.example/#persona"),
        UI.rdf.namedNode("http://second.example/#power-user"),
        UI.rdf.namedNode("http://second.example/")
      );
      document.outlineManager = {
        // FIXME: https://github.com/solidos/solid-ui/issues/239
        appendPropertyTRs: () => {},
      };
      UI.widgets.field[UI.ns.ui("Options").uri](
        document,
        container,
        already,
        subject,
        exampleOptionsField,
        store,
        action("callback")
      );
      return container;
    }}
  </Story>
</Canvas>
