import * as configuration from './lib/configuration.js'
import TemplateProperties from './components/Properties/TemplateProperties.js'
import EntityTree from './components/EntityTree/EntityTree.js'
import EntityTreeInputSearch from './components/EntityTree/EntityTreeInputSearch.js'
import Startup from './containers/Startup/Startup.js'
import ApiModal from './components/Modals/ApiModal.js'

export default () => {
  configuration.propertiesComponents.push({
    title: TemplateProperties.title,
    shouldDisplay: (entity) => entity.__entitySet === 'templates',
    component: TemplateProperties
  })

  configuration.editorComponents.templates = require('./components/Editor/TemplateEditor.js')
  configuration.editorComponents.templates.reformat = (reformatter, entity) => {
    const content = reformatter(entity.content, 'html')
    const helpers = reformatter(entity.helpers, 'js')

    return {
      content: content,
      helpers: helpers
    }
  }
  configuration.editorComponents.startup = Startup
  configuration.entitySets.templates = {
    name: 'templates',
    visibleName: 'template',
    nameAttribute: 'name',
    referenceAttributes: ['name', 'recipe', 'shortid'],
    entityTreePosition: 1000
  }

  configuration.sharedComponents.EntityTree = EntityTree

  configuration.apiSpecs = {
    template: {
      content: '...',
      helpers: '...',
      engine: '...',
      recipe: '...'
    },
    data: {
      aProperty: '...'
    },
    options: {}
  }

  // default filter by name strategy
  configuration.entityTreeFilterItemResolvers.push((entity, entitySets, filterInfo) => {
    const { name } = filterInfo

    if (name == null || name === '') {
      return true
    }

    const entityName = entitySets[entity.__entitySet].nameAttribute ? entity[entitySets[entity.__entitySet].nameAttribute] : entity.name

    return entityName.indexOf(name) !== -1
  })

  configuration.entityTreeToolbarComponents.push((props) => (
    <EntityTreeInputSearch {...props} />
  ))

  configuration.toolbarComponents.settings.push(() => <div
    onClick={() => configuration.modalHandler.open(ApiModal, { apiSpecs: configuration.apiSpecs })}>
    <i className='fa fa-plug'></i> API</div>)

  configuration.initializeListeners.push(() => {
    configuration.entityTreeIconResolvers.push((entity) => {
      if (entity.__entitySet !== 'templates') {
        return
      }

      if (entity.recipe === 'html') {
        return 'fa-html5'
      }

      if (entity.recipe.indexOf('xlsx') !== -1) {
        return 'fa-table'
      }

      if (entity.recipe.indexOf('pdf') !== -1) {
        return 'fa-file-pdf-o'
      }

      if (entity.recipe.indexOf('html') !== -1) {
        return 'fa-html5'
      }
    })
  })
}

@@ -1,12 +1,50 @@
+import %7B connect %7D from 'react-redux'%0A
 import * as 
@@ -422,16 +422,65 @@
 odal.js'
+%0Aimport %7B openTab %7D from './redux/editor/actions'
 %0A%0Aexport
@@ -2130,19 +2130,319 @@
 ush(
-() =%3E %3Cdiv%0A
+connect(%0A    undefined,%0A    %7B openTab %7D%0A  )((props) =%3E (%0A    %3Cdiv%0A      onClick=%7B() =%3E props.openTab(%7B key: 'StartupPage', editorComponentKey: 'startup', title: 'Startup' %7D)%7D%3E%0A      %3Ci className='fa fa-home'%3E%3C/i%3E Startup page%0A    %3C/div%3E%0A  )))%0A%0A  configuration.toolbarComponents.settings.push(() =%3E (%0A    %3Cdiv%0A  
     
@@ -2538,24 +2538,26 @@
 cs %7D)%7D%3E%0A    
+  
 %3Ci className
@@ -2578,22 +2578,31 @@
 %3C/i%3E API
+%0A    
 %3C/div%3E
+%0A  )
 )%0A%0A  con

add “Startup page” item in settings menu