import React, { Component } from 'react'
import '@qnpm/hysdk'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, createHashHistory, withRouter } from 'react-router'

import { Layout, Section, Item, Card, Header, nav } from '../utils'

import '../yo/yo-card.css'

const hashHistory = createHashHistory({ uniqueKey: 'life-cycles-spa', spa: true, wechatSupport: true,basename: __dirname })

const ACTIVE = { color: 'red' }
/* eslint-disable no-console */
class App extends Component {
  actived() {
    console.log('App show！！！')
  }

  render() {
    return (   
     <Layout header={<Header title="生命周期" />}>
        <Section note="可以通过页面输出（hy）或控制台打印（h5）查看页面生命周期变化">
          <Item to="/a" activeStyle={ACTIVE}>/a</Item>
          <Item to="/a/ac" activeStyle={ACTIVE}>/a/ac</Item>
          <Item to="/b" activeStyle={ACTIVE}>/b</Item>
          <Item to="/c" activeStyle={ACTIVE}>/c(动画为 moveFromBottom)</Item>
          <Card title="页面内容">{this.props.children}</Card>
        </Section>
        <button onClick={() => hashHistory.goBack()}>点我返回</button>
        <button onClick={() => window.location.reload()}>点我刷新</button>
      </Layout>
    )
  }
}

const M = () => <div>首页</div>

const createComponent = (name) => {
  return class Dummy extends Component {
    constructor(props) {
      super(props)
      this.state = { list: [] }
    }

    actived(data) {
    
      this.setState({
        list: [ ...this.state.list,  `Page ${name} active ` + data.type ]
      })
      console.log('actived', this._pendingStates)
      log(`Page ${name} active ` + data.type)
    }

    deactived() {
      console.log('deactived', this.state.list.length)
      this.setState({
        list: [ ...this.state.list, `Page ${name} deactive ` ]
      })
      log(`Page ${name} deactive`)
    }

    render() {  
      console.log(name, this.state.list)
      return (
        <div className="Dummy">{this.state.list.map((data, i) => <p title={i} key={i}>{data}</p>)}</div>
      )
    }
  }
}

const A = createComponent('A')
const B = createComponent('B')
const C = createComponent('C')

const AC = () => <div>a-child</div>

const log = (data) => {
  if (window.hysdk.env === 'hy') {
    window.hysdk.log(data)
  } else {
    console.log(data)
  }
}

render((
  <Router history={hashHistory} noZIndex>
    <Route
      path="/"
      component={withRouter(App, { lifecycle: true })}
      onEnter={() => log('index onEnter')}
      onChange={() => log('index onChange')}
      onLeave={() => log('index onLeave')}
      navigation={nav('生命周期')}
    >
      <IndexRoute component={M} />
      <Route
        path="/a"
        onEnter={() => log('Page A onEnter')}
        onChange={() => log('Page A onChange')}
        onLeave={() => log('Page A onLeave')}
      >
        <IndexRoute component={withRouter(A, { lifecycle: true })} />
        <Route
          path="ac"
          component={AC}
          onEnter={() => log('Page AC onEnter')}
          onChange={() => log('Page AC onChange')}
          onLeave={() => log('Page AC onLeave')}
        />
      </Route>
      <Route
        path="/b"
        component={withRouter(B, { lifecycle: true })}
        onEnter={() => log('Page B onEnter')}
        onChange={() => log('Page B onChange')}
        onLeave={() => log('Page B onLeave')}
      />
      <Route
        path="/c"
        component={withRouter(C, { lifecycle: true })}
        animate="moveFromBottom"
        onEnter={() => log('Page C onEnter')}
        onChange={() => log('Page C onChange')}
        onLeave={() => log('Page C onLeave')}
      />
    </Route>
  </Router>
), document.getElementById('example'))
