import '@operato/i18n/ox-i18n.js'
import '@things-factory/notification'
import '@things-factory/auth-ui/dist-client' /* for domain-switch */
import '@operato/dataset/usecase/qc'
import '@operato/dataset/ox-property-editor-qc-limits.js'

import { html } from 'lit-html'

import { registerDefaultGroups } from '@operato/board'
import { navigate, store } from '@operato/shell'
import { OxPropertyEditor } from '@operato/property-editor'

import { appendViewpart, toggleOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'
import { APPEND_APP_TOOL } from '@things-factory/apptool-base'
import { auth } from '@things-factory/auth-base/dist-client'
import { setAuthManagementMenus } from '@things-factory/auth-ui'
import { setupMenuPart, updateMenuTemplate } from '@things-factory/lite-menu'
import { ADD_MORENDA } from '@things-factory/more-base'
import { ADD_SETTING } from '@things-factory/setting-base'

import { getMenuTemplate } from './menu'
import { queryDataSets } from './query-data-sets'

console.log(
  `%c
 ▄▄▄▄▄▄    ▄▄▄▄     ▄▄▄▄    ▄▄   ▄▄   ▄▄▄▄▄
 ▓▓       ▓▓  ▓▓   ▓▓  ▓▓   ▓▓▓ ▓▓▓   ▓▓
 ▓▓       ▓▓       ▓▓  ▓▓   ▓▓▓▓▓▓▓   ▓▓
 ▄▄▄▄      ▄▄▄▄    ▓▓  ▓▓   ▓▓ ▄ ▓▓   ▄▄▄▄
 ▓▓           ▓▓   ▓▓  ▓▓   ▓▓   ▓▓   ▓▓
 ▓▓       ▓▓  ▓▓   ▓▓  ▓▓   ▓▓   ▓▓   ▓▓
 ▄▄▄▄▄     ▄▄▄▄     ▄▄▄▄    ▄▄   ▄▄   ▄▄▄▄▄`,
  'background: #222; color: #bada55'
)

export default function bootstrap() {
  /* set board-modeller group and default templates */
  registerDefaultGroups()

  OxPropertyEditor.register({
    'qc-limits': 'ox-property-editor-qc-limits'
  })

  setupMenuPart({
    slotTemplate: html` <domain-switch slot="tail"></domain-switch> `,
    hovering: true
  })

  auth.on('profile', async ({ credential }) => {
    updateMenuTemplate(getMenuTemplate(credential.owner, await queryDataSets()))

    /* set auth management menus into more-panel */
    setAuthManagementMenus(credential)

    if (credential.owner) {
      store.dispatch({
        type: ADD_MORENDA,
        morenda: {
          icon: html` <mwc-icon>pending_actions</mwc-icon> `,
          name: html` <i18n-msg msgid="title.work-shift"></i18n-msg> `,
          action: () => {
            navigate('work-shift')
          }
        }
      })

      store.dispatch({
        type: ADD_MORENDA,
        morenda: {
          icon: html` <mwc-icon>device_hub</mwc-icon> `,
          name: html` <ox-i18n msgid="text.connection"></ox-i18n> `,
          action: () => {
            navigate('connection')
          }
        }
      })

      store.dispatch({
        type: ADD_MORENDA,
        morenda: {
          icon: html` <mwc-icon>format_list_numbered</mwc-icon> `,
          name: html` <ox-i18n msgid="text.scenario"></ox-i18n> `,
          action: () => {
            navigate('scenario')
          }
        }
      })

      store.dispatch({
        type: ADD_MORENDA,
        morenda: {
          icon: html` <mwc-icon>vpn_key</mwc-icon> `,
          name: html` <ox-i18n msgid="text.oauth2-clients"></ox-i18n> `,
          action: () => {
            navigate('oauth2-clients')
          }
        }
      })

      store.dispatch({
        type: ADD_MORENDA,
        morenda: {
          icon: html` <mwc-icon>device_hub</mwc-icon> `,
          name: html` <ox-i18n msgid="text.installable-activities"></ox-i18n> `,
          action: () => {
            navigate('installable-activity-list')
          }
        }
      })
    }

    store.dispatch({
      type: ADD_MORENDA,
      morenda: {
        icon: html` <mwc-icon>extension</mwc-icon> `,
        name: html` <ox-i18n msgid="text.api-sandbox"></ox-i18n> `,
        action: () => {
          navigate('api-swagger')
        }
      }
    })

    store.dispatch({
      type: ADD_MORENDA,
      morenda: {
        icon: html` <mwc-icon>help</mwc-icon> `,
        name: html` <ox-i18n msgid="text.help"></ox-i18n> `,
        action: () => {
          navigate('help')
        }
      }
    })

    /* setting app-tools */
    store.dispatch({
      type: APPEND_APP_TOOL,
      tool: {
        name: 'notification-badge',
        template: html`
          <notification-badge
            @click=${e => {
              toggleOverlay('notification', {
                backdrop: true
              })
            }}
          >
          </notification-badge>
        `,
        position: TOOL_POSITION.REAR
      }
    })

    appendViewpart({
      name: 'notification',
      viewpart: {
        show: false,
        hovering: 'edge',
        template: html` <notification-list style="min-width: 300px;"></notification-list> `
      },
      position: VIEWPART_POSITION.ASIDEBAR
    })

    store.dispatch({
      type: ADD_SETTING,
      setting: {
        seq: 20,
        template: html` <notification-setting-let></notification-setting-let> `
      }
    })

    store.dispatch({
      type: ADD_SETTING,
      setting: {
        seq: 21,
        template: html` <lite-menu-setting-let></lite-menu-setting-let> `
      }
    })
  })
}
