import { observable } from 'mobx';
import { createPage } from '<%= subLevelPath %>../../common/weapp-page'
import { concatClassList, px2rpx } from '<%= subLevelPath %>../../common/style'
import { app, $app } from '<%= subLevelPath %>../../app/weapps-api'
import { <%= pageNameVar %> as handlers } from '../../app/handlers'
<%= importor.lifecycle? `import lifecycle from '../../lowcode/${pageName}/lifecycle'` : "const lifecycle = {}" %>
<%= importor.state? `import state from '../../lowcode/${pageName}/state'` : "const state = {}" %>
<%= importor.computed? `import computed from '../../lowcode/${pageName}/computed'` : "const computed = {}" %>
import { $page, $w } from './api'
import { widgetProps } from './data'

<% function printBoundData(boundData={}) {
  const list = []
  Object.entries(boundData).map(([prop, bindMeta])=>{
    const str = `'${prop}': ($page, lists, forItems, event, $context, $w, params) => {${bindMeta.imports} return(
      ${bindMeta.expression === '' ? 'undefined': bindMeta.expression}
    )}`
    list.push(str)
  })
  return list.join(',')
}%>

<% function printEventHandler(eventHandlers) {
  Object.entries(eventHandlers).map(([handlerName, listeners])=>{
    print(`"${handlerName}": [
      ${listeners.map(l=>{
        let handler = 'undefined'
        switch(l.type){
          case 'rematch': {
            handler = `handlers.${l.handler}`
            break;
          }
          case 'material': {
            handler = `function(...args) { return require('../../materials/${l.handlerModule}/actions/${l.handler}/index').default(...args) }`
            break;
          }
          default: {
            handler = l.handler
          }
        }
        return `{
          key: '${l.key||''}',
          sourceKey: '${ l.sourceKey||"" }',
          handler: ${handler},
          data: ${stringifyObj(l.data||{}, {depth: null})},
          boundData: {${printBoundData(l.boundData)}}
        }`
      }).join(',')}
    ],`)
  })
}%>

/** widget event listeners **/
const evtListeners = {<% printEventHandler(eventHandlers) %>}

const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
  <%= id %>: { <%= printBoundData(widgetBinds) %>
  },<%}) %>
}

const query = {<% Object.entries(query).map(([id, item])=>{%>
  <%= id %>: { <% const {dataBinds={}, eventHandlers, handler, ...rest } = item %>
    ...(<%= stringifyObj(rest, {depth: null}) %>),
    handler: <%= handler %>,
    dataBinds: {<%= printBoundData(dataBinds) %>},
    eventHandlers: {<% printEventHandler(eventHandlers) %>}
  },<%}) %>
}

const eventFlows = [<% eventFlows.map(flow => {%> { <% const { eventHandlers, ...rest } = flow %>
  ...(<%= stringifyObj(rest, {depth: null}) %>),
  eventHandlers: {<% printEventHandler(eventHandlers) %>}
},<%}) %>
]

createPage({
  app,
  pageContext: $page,
  id: '<%= pageName %>',
  widgetProps,
  lifecycle,
  state,
  computed,
  evtListeners,
  dataBinds,
  handlers,
  query,
  eventFlows,
  pageAttributes: <%= pageAttributes? stringifyObj(pageAttributes, {depth: null}):'{}' %>,
  resetShare: <%= resetShare %>
})
