import '@things-factory/notification'
import '@things-factory/board-ui'
import './viewparts/menu-tools'
import './apptools/favorite-tool'
import '@operato/help/ox-help-panel.js'

import { html } from 'lit-html'

import { registerDefaultGroups } from '@operato/board/register-default-groups.js'
import { APPEND_APP_TOOL } from '@things-factory/apptool-base'
import { auth } from '@things-factory/auth-base'
import { setAuthManagementMenus } from '@things-factory/auth-ui'
import {
  appendViewpart,
  toggleOverlay,
  TOOL_POSITION,
  updateViewpart,
  VIEWPART_LEVEL,
  VIEWPART_POSITION
} from '@things-factory/layout-base'
import { ADD_MORENDA } from '@things-factory/more-base'
import { ADD_SETTING } from '@things-factory/setting-base'
import { navigate, store, UPDATE_BASE_URL } from '@things-factory/shell'

import permissions from './reducers/permissions'

export default function bootstrap() {
  store.addReducers({ permissions })

  store.dispatch({
    type: UPDATE_BASE_URL
  })

  /* set board-modeller group and default templates */
  registerDefaultGroups()

  /* set auth management menus into more-panel */
  auth.on('profile', async ({ credential }) => {
    console.log('on profile', credential)
    setAuthManagementMenus(credential)
  })

  /* append viewpart anchor to asidebar */
  appendViewpart({
    name: 'viewpart-info',
    viewpart: {
      show: false,
      hovering: 'edge',
      backdrop: true
    },
    position: VIEWPART_POSITION.ASIDEBAR
  })

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

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

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

  /* append top-menu to layout */
  var width

  appendViewpart({
    name: 'board-topmenu',
    viewpart: {
      show: true,
      template: html` <menu-tools></menu-tools> `
    },
    position: VIEWPART_POSITION.NAVBAR
  })

  store.subscribe(async () => {
    var state = store.getState()

    if (state.layout.width == width) {
      return
    }

    width = state.layout.width

    updateViewpart('board-topmenu', {
      position: width == 'WIDE' ? VIEWPART_POSITION.NAVBAR : VIEWPART_POSITION.FOOTERBAR,
      level: VIEWPART_LEVEL.TOPMOST
    })
  })

  /* append favorite tool to app-tools */
  var acceptedPages = ['board-viewer']

  store.dispatch({
    type: APPEND_APP_TOOL,
    tool: {
      name: 'favorite-tool',
      template: html` <favorite-tool .acceptedPages=${acceptedPages}></favorite-tool> `,
      position: TOOL_POSITION.REAR
    }
  })

  /* 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` <board-view-setting-let></board-view-setting-let> `
    }
  })
}
