const insightsChartEditor = appmixer.ui.InsightsChartEditor(config)

insightsChartEditor.set(key, value)
insightsChartEditor.get(key)

insightsChartEditor.state(name, value)

insightsChartEditor.on(event, handler)

insightsChartEditor.on('close', () => {/* ... */})

const insightsChartEditor = appmixer.ui.InsightsChartEditor({
    el: '#insights-chart-editor'
})

insightsChartEditor.open()

const designer = appmixer.ui.Designer(config)

designer.set(key, value)
designer.get(key)

appmixer.ui.Designer({
  /* ... */
  options: {
      menu: [
        { event: 'flow:rename', label: 'Rename', icon: 'data:image/svg+xml;base64,...' },
        { event: 'flow:share', label: 'Share', icon: 'https://www.example.com/images/image.jpg' },
        { event: 'flow:wizard-builder', label: 'Wizard' },
        { event: 'flow:export-svg', label: 'Export SVG' },
        { event: 'flow:export-png', label: 'Export PNG' },
        { event: 'flow:print', label: 'Print' }
    ]
  }
}

const designer = appmixer.ui.Designer({
  /* ... */
  options: {
      toolbar: [
        ['undo', 'redo'],
        ['zoom-to-fit', 'zoom-in', 'zoom-out'],
        ['logs'],
        [{
          tooltip: 'Reload',
          widget: {
              template: (
                  `<div @click="onClick" style="border: solid 1px gray; border-radius: 3px;">
                      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
                        <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
                      </svg>
                  </div>`
              ),
              methods: {
                  onClick() {
                    designer.reload()
                  }
              }
          }
        }]
    ]
  }
}

designer.state(name, value)

designer.on(event, handler)

designer.on('flow:start', flow => {/* ... */})

designer.on('flow:stop', flow => {/* ... */})

designer.on('flow:share', flow => {/* ... */})

designer.on('flow:rename', flow => {/* ... */})

designer.on('flow:export-svg', flow => {/* ... */})

designer.on('flow:export-png', flow => {/* ... */})

designer.on('flow:print', flow => {/* ... */})

designer.on('flow:wizard-builder', flow => {/* ... */})

designer.on('component:add', ({ data, next }) => {/* ... */})

designer.on('component:open', ({ data, next }) => {/* ... */})

designer.on('component:close', ({ data, next }) => {/* ... */})

designer.on('component:rename', ({ data, next }) => {/* ... */})

designer.on('component:update-type', ({ data, next }) => {/* ... */})

designer.on('navigate:validation', (flowId) => {/* ... */})

const designer = appmixer.ui.Designer({
    el: '#designer',
    options: {
        menu: [
          { event: 'flow:rename', label: 'Rename' },
          { event: 'flow:share', label: 'Share' },
          { event: 'flow:wizard-builder', label: 'Wizard' },
          { event: 'flow:export-svg', label: 'Export SVG' },
          { event: 'flow:export-png', label: 'Export PNG' },
          { event: 'flow:print', label: 'Print' }
        ],
        toolbar: [
          ['undo', 'redo'],
          ['zoom-to-fit', 'zoom-in', 'zoom-out'],
          ['logs']
        ]
    }
})

const flowId = await appmixer.api.createFlow('New flow')
designer.set('flowId', flowId)
designer.open()

const insightsLogs = appmixer.ui.InsightsLogs(config)

insightsLogs.set(key, value)
insightsLogs.get(key)

insightsLogs.state(name, value)

const insightsLogs = appmixer.ui.InsightsLogs({
    el: '#insights-logs'
})

insightsLogs.open()

const flowManager = appmixer.ui.FlowManager(config)

flowManager.set(key, value)
flowManager.get(key)

appmixer.ui.FlowManager({
  /* ... */
  options: {
      menu: [
        { event: 'flow:open', label: 'Open', icon: 'data:image/svg+xml;base64,...' },
        { event: 'flow:rename', label: 'Rename', icon: 'https://www.example.com/images/image.jpg' },
        { event: 'flow:insights', label: 'Insights' },
        { event: 'flow:clone', label: 'Clone' },
        { event: 'flow:share', label: 'Share' },
        { event: 'flow:remove', label: 'Remove' },
        { event: 'my-custom-event', label: 'Custom Event' }
    ]
  }
}

appmixer.ui.FlowManager({
  /* ... */
  options: {
    filters: [
      { property: 'stage', value: 'running', label: 'Running flows' },
      { property: 'stage', value: 'stopped', label: 'Stopped flows' },
      { property: 'sharedWith', value: 'myFlows', label: 'My flows' },
      { property: 'sharedWith', value: 'sharedWithOthers', label: 'Shared with others' },
      { property: 'sharedWith', value: 'sharedWithMe', label: 'Shared with me' }
    ]
  }
}

appmixer.ui.FlowManager({
  /* ... */
  options: {
    customFilter: {
      stage: 'running'
    }
  }
}

appmixer.ui.FlowManager({
  /* ... */
  options: {
    customFilter: {
      'customFields.category': 'healthcare',
      'customFields.template': true
    }
  }
}

appmixer.ui.FlowManager({
  /* ... */
  options: {
    sorting: [
      { label: 'Last Modified', property: 'mtime', value: -1 },
      { label: 'Last Created', property: 'btime', value: -1 }
    ]
  }
}

flowManager.state(name, value)

flowManager.on(event, handler)

flowManager.on('flow:open', flowId => {/* ... */})

flowManager.on('flow:create', () => {/* ... */})

flowManager.on('flow:start', flowId => {/* ... */})

flowManager.on('flow:stop', flowId => {/* ... */})

flowManager.on('flow:clone', flowId => {/* ... */})

flowManager.on('flow:share', flowId => {/* ... */})

flowManager.on('flow:rename', flowId => {/* ... */})

flowManager.on('flow:remove', flowId => {/* ... */})

appmixer.ui.FlowManager({
  /* ... */
  options: {
    menu: [{ event: 'flow:share', label: 'Share' }],
    // specify custom types and scopes
    shareTypes: [
      { value: 'email', label: 'Email', placeholder: 'Enter an email' },
      { value: 'scope', label: 'Scope', placeholder: 'Enter a scope' },
      { value: 'domain', label: 'Domain', placeholder: 'Enter a domain' }
    ],
    // override default permissions
    sharePermissions: [
      { label: 'Read', value: 'read' },
      { label: 'Start', value: 'start' },
      { label: 'Stop', value: 'stop' }
    ]
  }
}

// create a new widget
const flowManager = appmixer.ui.FlowManager({
  el: '#flow-manager',
  options: {
    menu: [
      { event: 'flow:open', label: 'Open' },
      { event: 'custom-event', label: 'Custom' },
      { event: 'flow:rename', label: 'Rename' },
      { event: 'flow:insights', label: 'Insights' },
      { event: 'flow:clone', label: 'Clone' },
      { event: 'flow:share', label: 'Share' },
      { event: 'flow:remove', label: 'Remove' }
    ],
    filters: [
      { property: 'stage', value: 'running', label: 'Running flows' },
      { property: 'stage', value: 'stopped', label: 'Stopped flows' },
      { property: 'sharedWith', value: 'myFlows', label: 'My flows' },
      { property: 'sharedWith', value: 'sharedWithOthers', label: 'Shared with others' },
      { property: 'sharedWith', value: 'sharedWithMe', label: 'Shared with me' }
    ],
    sorting: [
      { label: 'Last Modified', property: 'mtime', value: -1 },
      { label: 'Last Created', property: 'btime', value: -1 }
    ]
  }
})

// change default layout
flowManager.state('layout', 'list')

// override a built-in event
flowManager.on('flow:create', () => {
  flowManager.state('error', 'Creating a new flow overridden by a custom event handler.')
})

// load flow details with a custom event
flowManager.on('custom-event', async flowId => {
  try {
    flowManager.state('loader', true)
    const flow = await appmixer.api.getFlow(flowId)
    alert(`Flow ${flow.name} has ${Object.keys(flow.flow).length} component(s).`)
  } catch (error) {
    flowManager.state('error', 'Loading flow failed.')
  } finally {
    flowManager.state('loader', false)
  }
})

// open the widget
flowManager.open()

const appmixer = new Appmixer(/* ... */)
const widget = appmixer.ui.FlowManager(config)

widget.open()

widget.close()

widget.reload()

widget.reset()

widget.state(path, value) // setter
widget.state(path) // getter

widget.set(key, value)

widget.get(key, value)

widget.on(name, handler)

widget.off(name)

const connectors = appmixer.ui.Connectors(config)

connectors.set(key, value)
connectors.get(key)

connectors.state(name, value)

const connectors = appmixer.ui.Connectors({
    el: '#connectors'
})

connectors.open()

const insightsDashboard = appmixer.ui.InsightsDashboard(config)

insightsDashboard.set(key, value)
insightsDashboard.get(key)

insightsDashboard.state(name, value)

insightsDashboard.on(event, handler)

insightsDashboard.on('chart:clone', chartId => {/* ... */})

insightsDashboard.on('chart:remove', chartId => {/* ... */})

insightsDashboard.on('chart:open', chartId => {/* ... */})

const insightsDashboard = appmixer.ui.InsightsDashboard({
    el: '#insights-dashboard'
})

insightsDashboard.open()

const accounts = appmixer.ui.Accounts(config)

accounts.set(key, value)
accounts.get(key)

accounts.state(name, value)

accounts.on(event, handler)

accounts.on('flow:open', flowId => {/* ... */})

const accounts = appmixer.ui.Accounts({
    el: '#accounts'
})

accounts.open()

const integrations = appmixer.ui.Integrations(config)

integrations.set(key, value)
integrations.get(key)

appmixer.ui.Integrations({
  /* ... */
  options: {
    customFilter: {
      // displaying Integrations with a certain customField
      'customFields.category': 'healthcare',
      // that are shared with someone
      'sharedWith': '![]'
      // and in this example, that are shared throught the 'domain'
      // options with a 'testdomain.com'
      'sharedWith.domain': 'testdomain.com'
      // or we could filter only Integrations that are shared with
      // scope 'user'
      // 'sharedWith.scope': 'user',
    }
  }
}

integrations.state(name, value)

integrations.on(event, handler)

integrations.on('integration:create', integrationId => {/* ... */})

integrations.on('integration:edit', integrationId => {/* ... */})

integrations.on('integration:remove', integrationId => {/* ... */})

integrations.on('integration:start', integrationId => {/* ... */})

integrations.on('integration:stop', integrationId => {/* ... */})

const integrations = appmixer.ui.Integrations({
    el: '#integrations'
})

integrations.open()

integrations.on('integration:create', async templateId => {
    // Create integration flow as a clone of the template. Disconnect
    // accounts because they might not be shared with the end user.
    const integrationId = await appmixer.api.cloneFlow(templateId, { connectAccounts: false })
    await appmixer.api.updateFlow(integrationId, { templateId })

    const wizard = appmixer.ui.Wizard({
        el: '#your-wizard-div',
        flowId: integrationId,
    });

    wizard.open()
    integrations.reload()
})

integrations.on('integration:edit', function(integrationId) {
    var wizard = appmixer.ui.Wizard({
        el: '#wizard',
        flowId: integrationId
    });
    wizard.open()
});

integrations.open()

const peopleTasks = appmixer.ui.PeopleTasks(config)

peopleTasks.set(key, value)
peopleTasks.get(key)

peopleTasks.state(name, value)

const peopleTasks = appmixer.ui.PeopleTasks({
    el: '#people-tasks'
})

peopleTasks.open()

const wizard = appmixer.ui.Wizard(config)

wizard.set(key, value)
wizard.get(key)

wizard.state(name, value)

wizard.on(event, handler)

wizard.on('flow:start', flowId => {/* ... */})

wizard.on('flow:validation', errors => {/* ... */})

wizard.on('cancel', () => {/* ... */})

wizard.on('close', () => {/* ... */})

const wizard = appmixer.ui.Wizard({
    el: '#wizard',
    flowId: 'your-integration-id'
})

wizard.on('flow:start', async flowId => {
    await appmixer.api.startFlow(flowId)
    wizard.close()
})

wizard.open()

const storage = appmixer.ui.Storage(config)

storage.set(key, value)
storage.get(key)

storage.state(name, value)

const storage = appmixer.ui.Storage({
    el: '#storage'
})

storage.open()