import * as UI from '../../lib'

import { Canvas, Meta, Story } from '@storybook/addon-docs'
import { rawJsonDecorator } from './decorators'

<Meta title="Notepad" />

## notepad: Creates a notepad

In this first example we'll see how you can create a notepad. This method creates input fields
which allow you to provide a notepad component to your application.

The inputs will be stored to [https://example-user.inrupt.net/public/example-notepad/index.ttl#this](https://example-user.inrupt.net/public/example-notepad/index.ttl#this)

<Canvas>
  <Story name="notepad">
        {() => {
          const pad = UI.rdf.namedNode('https://example-user.inrupt.net/public/example-notepad/index.ttl#this')
          const me = new UI.rdf.NamedNode('https://example-user.inrupt.net/profile/card#me')
          const subject = UI.store.sym('https://test.test#')
          const options = {}
          return UI.pad.notepad(document, pad.doc(), subject, me, options)
        }}
   </Story>
</Canvas>

## manageParticipation: Creates the table to display the participants

<Canvas>
  <Story name="manageParticipation">
    {() => {
      const me = new UI.rdf.NamedNode('https://example-user.inrupt.net/profile/card#me')
      const structure = document.createElement('div')
      const container = document.createElement('div')
      const subject = UI.store.sym('https://test.test#')
      const pad = UI.rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this')
      const options = { statusArea: container }
      return UI.pad.manageParticipation(document, structure, pad.doc(), subject, me, options)
    }}
  </Story>
</Canvas>

## notepadToHTML: Converts a Turtle file to an HTML

This method converts a pad.ttl document to HTML.

<Canvas>
  <Story name="notepadToHTML">
    {() => {
      const div = document.createElement("div")
      const kb = UI.store
      const fetcher = UI.rdf.fetcher(kb)
      const pad = UI.rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this')
      fetcher.load(pad.doc()).then(() => {
        const htmlStr = UI.pad.notepadToHTML(pad, kb)
        div.appendChild(document.createTextNode(htmlStr))
      })
      return div
    }}
  </Story>
</Canvas>

## lightColorHash : Determines a color to be used for a participants notepad entry

This method returns a hex value for setting the color of the input box of the notepad. It does this by hashing the uri passed in as an argument. Ideally this would be the uri of the person logged in.

<Canvas>
  <Story name="lightColorHash">
    {() => {
        const colorStr = UI.pad.lightColorHash(new UI.rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me'))
      const inputBox = document.createElement('INPUT')
      inputBox.setAttribute("type", "text")
      inputBox.style.backgroundColor = colorStr
      return inputBox
    }}
  </Story>
</Canvas>

## renderParticipants: Creates a table of participants on a given notepad document

Creates the table with the list of participants that have contributed to the given pad that is passed in. This gets called from manageParticipation, but can be used on it's own as well.

<Canvas>
  <Story name="renderParticipants">
    {() => {
      const div = document.createElement("div")
      const table = document.createElement('table');
      const kb = UI.store
      const fetcher = UI.rdf.fetcher(kb)
      const pad = UI.rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this')
      fetcher.load(pad.doc()).then(() => {
        // subject = new NamedNode('test') // this i think the page where a list.. ns.ws('participants') are stored
        const subject = kb.sym('https://test.test#')
        const options = {} // what to put in options
        //options are used in the button personTR there are the following properties can be defined deleteFunction, link, draggable
        const tableOfParticipants = UI.pad.renderParticipants(document, table, pad, subject, new UI.rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me'), options)
        div.appendChild(tableOfParticipants)
      })
      return div
    }}
  </Story>
</Canvas>

## participationObject: Contains the subject, pad and URI for the participants

<Canvas>
  <Story name="participationObject">
    {() => {
      const container = document.createElement("pre")
      const kb = UI.store
      const subject = kb.sym('https://test.test#');
      const fetcher = UI.rdf.fetcher(kb)
      const pad = UI.rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this')
      fetcher.load(pad.doc()).then(() => {
        const me = new UI.rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me')
        return UI.pad.participationObject(subject, pad, me);
      }).then((node) => {
        container.appendChild(document.createTextNode(JSON.stringify(node, null, 2)))
      })
      return container
    }
    }
  </Story>
</Canvas>
