import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { wc } from '../../utils/stencil'

export default class Test extends Component {
  render() {
    const navViews = [{
      name: 'test-page-one',
      title: 'Test Page One',
      getView: () => (TestPageOne)
    }, {
      name: 'test-page-two',
      title: 'Test Page Two',
      getView: () => (TestPageTwo)
    }, {
      name: 'test-page-three',
      title: 'Test Page Three',
      getView: () => (TestPageThree)
    }]
    return (
      <ion-nav
        location={this.props.location.pathname}
        root-page='test-page-one'
        ref={wc({
        },{
          rootPage: 'test-page-one',
          renderChildren: renderChildren(navViews)
        })}>
      </ion-nav>
    );
  }
}

function renderChildren(navViews) {
  return (el, push, pop, viewNames) => {
    const nav = {
      pop: pop,
      push: push
    };
    ReactDOM.render(
      viewNames.map(([pageName, params], index, array) => {
        const Page = navViews.find(view => view.name === pageName).getView();
        const style = {};
        if (index !== array.length - 1) {
          style.display = 'none'
        }
        return (
          <ion-page style={style}>
            <Page key={index} nav={nav} params={params}></Page>
          </ion-page>
        )
      }),
      el
    );
  };
}

class TestPageOne extends Component {
  render() {
    return [
      <ion-header>
        <ion-navbar>
          <ion-title>Page One</ion-title>
        </ion-navbar>
      </ion-header>,
      <ion-content>
        Page One Content
        <div>
          <ion-button
            onClick={() => this.props.nav.push('test-page-two', { id: 1, name: 'Michael Scott'})}
          >Go to Page Two</ion-button>
        </div>
      </ion-content>
    ];
  }
}
const TestPageTwo = ({ nav, style, params }) => {
  return [
    <ion-header>
      <ion-navbar>
        <ion-title>Page Two</ion-title>
      </ion-navbar>
    </ion-header>,
    <ion-content>
      Page Two Content
      <span>{params.id} {params.name}</span>
      <div>
        <ion-button onClick={() => nav.pop()}>Go to Page One</ion-button>
        <ion-button onClick={() => nav.push('test-page-three')}>Go to Page Three</ion-button>
      </div>
    </ion-content>
  ];
}
const TestPageThree = ({ nav, style }) => {
  return [
    <ion-header>
      <ion-navbar>
        <ion-title>Page Three</ion-title>
      </ion-navbar>
    </ion-header>,
    <ion-content>
      Page Three Content
      <div>
        <ion-button onClick={() => nav.pop()}>Go to Page Two</ion-button>
      </div>
    </ion-content>
  ];
}

@@ -109,16 +109,106 @@
 stencil'
+%0Aimport SchedulePage from '../SchedulePage';%0Aimport SessionDetail from '../SessionDetail';
 %0A%0Aexport
@@ -293,37 +293,28 @@
      name: '
-test-page-one
+root
 ',%0A      tit
@@ -322,20 +322,15 @@
 e: '
-Test Page On
+Schedul
 e',%0A
@@ -351,26 +351,27 @@
  () =%3E (
-TestPageOn
+SchedulePag
 e)%0A    %7D
@@ -387,29 +387,23 @@
  name: '
-test-page-two
+session
 ',%0A     
@@ -415,128 +415,22 @@
 e: '
-Test Page Two',%0A      getView: () =%3E (TestPageTwo)%0A    %7D, %7B%0A      name: 'test-page-three',%0A      title: 'Test Page Three
+Session Detail
 ',%0A 
@@ -450,29 +450,29 @@
  () =%3E (
-TestPageThree
+SessionDetail
 )%0A    %7D%5D
@@ -567,29 +567,20 @@
 t-page='
-test-page-one
+root
 '%0A      
@@ -594,57 +594,11 @@
 wc(%7B
-%0A        %7D,%7B%0A          rootPage: 'test-page-one',
+%7D,%7B
 %0A   
@@ -1598,21 +1598,15 @@
 sh('
-test-page-two
+session
 ', %7B

refactor test page to include actual tabs and schedule details.