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

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

<Meta title="Matrix" />

# Matrix

More complex examples can be investigated on the
[example page](http://solidos.github.io/solid-ui/examples/matrix/index.html).

## for query

<Canvas>
  <Story name="for query">
    {() => {
      const testDocURI = "https://pod.example/";
      const testDoc = $rdf.sym(testDocURI);
      const kb = SolidLogic.store;
      kb.removeMany(undefined, undefined, undefined, testDoc);
      const turtle = `@prefix :  <#>.
@prefix foaf:  <http://xmlns.com/foaf/0.1/>.
@prefix sched: <http://www.w3.org/ns/pim/schedule#>.
@prefix cal:  <http://www.w3.org/2002/12/cal/ical#>.
@prefix dc:    <http://purl.org/dc/elements/1.1/>.
:event1 dc:author :a0;
    a sched:YesNoMaybe ;
    sched:response :r1, :r2 .
:a0 foaf:name "Zoe" .
:a1 foaf:name "Alice" .
:a2 foaf:name "Bob" .
:r1 dc:author :a1;
    sched:cell
          [ sched:availabilty sched:No; cal:dtstart "2015-01-01" ],
          [ sched:availabilty sched:Yes; cal:dtstart "2015-01-05"] .
:r2 dc:author :a2;
    sched:cell
          [ sched:availabilty sched:Maybe; cal:dtstart "2015-01-01" ] .
`;
      $rdf.parse(turtle, kb, testDocURI, "text/turtle");
      const SCHED = $rdf.Namespace("http://www.w3.org/ns/pim/schedule#");
      const DC = $rdf.Namespace("http://purl.org/dc/elements/1.1/");
      const ICAL = $rdf.Namespace("http://www.w3.org/2002/12/cal/ical#");
      const invitation = kb.sym(`${testDocURI}#event1`);
      var query = new $rdf.Query("Responses");
      const variables = {
        time: $rdf.variable("time"),
        author: $rdf.variable("author"),
        availabilty: $rdf.variable("value"),
        response: $rdf.variable("response"),
        cell: $rdf.variable("cell"),
      };
      query.pat.add(invitation, SCHED("response"), variables.response);
      query.pat.add(variables.response, DC("author"), variables.author);
      query.pat.add(variables.response, SCHED("cell"), variables.cell);
      query.pat.add(variables.cell, SCHED("availabilty"), variables.availabilty);
      query.pat.add(variables.cell, ICAL("dtstart"), variables.time);
      const options = {
        cellFunction: (cell, x, y, value) => {
          cell.textContent = value ? UI.utils.label(value) : "-";
        },
      };
      return UI.matrix.matrixForQuery(
        document,
        query,
        variables.time,
        variables.author,
        variables.availabilty,
        options,
        function () {}
      );
    }}
  </Story>
</Canvas>
