import React, { useEffect } from 'react'
import { AppLoader, useCommit, useActions, useData } from '@ttk/app-loader'
import { Layout } from 'antd';
import { useRouteMeta, useRouteMatch, useLocation } from '@ttk/router'

const { Content } = Layout
export default function RouterView(props) {
  const { appName } = props
  const actions = useActions({ appName: 'app-layout' })
  const routeMeta = useRouteMeta()
  const routeMatch = useRouteMatch()
  const location = useLocation()
  const commit = useCommit()
  const { openKeys, selectedKeys } = useData('app-root/tempState').toJS()
  useEffect(() => {
    // const [root, matchParam] = location.pathname.split(routeMeta.url)
    // console.log('j route meta: ', matchParam, 'search: ', location.search)
    // actions.openTab({ ...routeMeta, url: routeMeta + matchParam + location.search })
    actions.openTab(routeMeta)
    commit([{ appName: 'app-root' }, 'tempState'], { type: "setSelectedKeys", data: [routeMeta.functioinId]})
    commit([{ appName: 'app-root' }, 'tempState'], { type: "setOpenKeys", data: Array.from(new Set([...openKeys, ...routeMeta.menupath]))})
    // console.log(4444, routeMeta, routeMatch, location);
    // commit('app-root/tags', {
    //   type: 'addTag',
    //   data: routeMeta
    // })
  }, [])

  return (
    <Layout style={{ padding: '0 10px 10px' }}>
      <Content style={{
        background: '#fff',
        padding: 20,
        margin: 0,
        minHeight: 280,
      }}>
        <AppLoader {...props} appName={appName} name={appName} />
      </Content>
    </Layout>
  )
}