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

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

<Meta title="Forms/appendForm" />

## appendForm

### trivial / Comment field

This example shows a trivial use of the `appendForm` function, in conjunction with a Comment field.

<Canvas>
  <Story name="trivial / Comment field">
    {() => {
      const container = document.createElement("div")
      const already = {}
      const subject = UI.rdf.namedNode('http://example.com/#subject')
      const form = UI.rdf.namedNode('http://example.com/#form')
      const doc = subject.doc()
      UI.store.add(UI.rdf.namedNode('http://example.com/#form'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
      UI.store.add(UI.rdf.namedNode('http://example.com/#form'), UI.ns.ui('contents'), '[a trivial form with just a comment]')
      UI.widgets.appendForm(document, container, already, subject, form, doc)
      return container
    }}
  </Story>
</Canvas>

### live

<Canvas>
  <Story name="live">
    {() => {
      const container = document.createElement("div")
      const already = {}
      const subject = UI.rdf.namedNode('https://michielbdejong.inrupt.net/profile/card#me')
      const form = UI.rdf.namedNode('https://timbl.com/timbl/Public/Test/Forms/individualForm.ttl#form1')
      const doc = subject.doc()
      const loadProfile = UI.store.fetcher.load(doc)
      const loadForm = UI.store.fetcher.load(form.doc())
      Promise.all([loadProfile,loadForm]).then(() => {
        UI.widgets.appendForm(document, container, already, subject, form, doc)
      })
      return container
    }}
  </Story>
</Canvas>
