
import React, { Component } from 'react'
import { Router, Route } from '..'
import assert from './assert'

function Index({ children }) {
  return <div>
    <h1>Index</h1>
    {children}
  </div>
}

function Users({ children }) {
  return <div>
    <h2>Users</h2>
    {children}
  </div>
}

function User({ children, params: { userId } }) {
  return <div>
    <h2>User {userId}</h2>
    {children}
  </div>
}

function Pets({ children }) {
  return <div>
    <h2>Pets</h2>
    {children}
  </div>
}

function Pet({ params: { petId } }) {
  return <div>pet {petId}</div>
}

function NotFound() {
  return <div>Not Found</div>
}

// Simple index route
assert(<Router location="/">
  <Route path="/" component={Index} />
</Router>, <Index />)

// Nested route
assert(<Router location="/pets">
  <Route path="/" component={Index}>
    <Route path="pets" component={Pets} />
  </Route>
</Router>, <Index><Pets /></Index>)

// Deeply nested route
assert(<Router location="/pets/12">
  <Route path="/" component={Index}>
    <Route path="pets" component={Pets}>
      <Route path=":petId" component={Pet} />
    </Route>
  </Route>
</Router>, <Index><Pets><Pet params={{ petId: 12 }}></Pet></Pets></Index>)

// Many deeply nested route
assert(<Router location="/users/5">
  <Route path="/" component={Index}>
    <Route path="pets" component={Pets}>
      <Route path=":petId" component={Pet} />
    </Route>

    <Route path="users" component={Users}>
      <Route path=":userId" component={User} />
    </Route>
  </Route>
</Router>, <Index><Users><User params={{ userId: 5 }}></User></Users></Index>)

// Catch-all
assert(<Router location="/something">
  <Route path="/" component={Index}>
    <Route path="pets" component={Pets}>
      <Route path=":petId" component={Pet} />
    </Route>

    <Route path="users" component={Users}>
      <Route path=":userId" component={User} />
    </Route>
  </Route>

  <Route path="*" component={NotFound} />
</Router>, <NotFound />)

// Nested route but index route
assert(<Router location="/">
  <Route path="/" component={Index}>
    <Route path="pets" component={Pets} />
  </Route>
</Router>, <Index />)

// Shallow routes
assert(<Router location="/">
  <Route path="/" component={Index} />
  <Route path="/users" component={Users} />
</Router>, <Index />)

assert(<Router location="/users">
  <Route path="/" component={Index} />
  <Route path="/users" component={Users} />
</Router>, <Users />)

assert(<Router location="/user/5">
  <Route path="/" component={Index} />
  <Route path="/users" component={Users} />
  <Route path="/user/:userId" component={User} />
</Router>, <User params={{ userId: 5 }} />)

// Many nested routes and params
assert(<Router location="/users/5/pets/2">
  <Route path="/" component={Index}>
    <Route path="users" component={Users}>
      <Route path=":userId" component={User}>
        <Route path="pets" component={Pets}>
          <Route path=":petId" component={Pet} />
        </Route>
      </Route>
    </Route>
  </Route>
</Router>, <Index>
  <Users>
    <User params={{ userId: 5 }}>
      <Pets>
        <Pet params={{ petId: 2 }}>
        </Pet>
      </Pets>
    </User>
  </Users>
</Index>)

@@ -622,16 +622,114 @@
 div%3E%0A%7D%0A%0A
+function List(%7B items %7D) %7B%0A  return %3Cul%3E%7Bitems.map((item, i) =%3E %3Cli key=%7Bi%7D%3E%7Bitem%7D%3C/li%3E)%7D%3C/ul%3E%0A%7D%0A%0A
 // Simpl
@@ -829,24 +829,258 @@
 %3CIndex /%3E)%0A%0A
+// Props%0Aassert(%3CRouter location=%22/list%22 items=%7B%5B%22foo%22, %22bar%22, %22baz%22%5D%7D%3E%0A  %3CRoute path=%22/%22 component=%7BIndex%7D%3E%0A    %3CRoute path=%22list%22 component=%7BList%7D /%3E%0A  %3C/Route%3E%0A%3C/Router%3E, %3CIndex%3E%0A  %3CList items=%7B%5B%22foo%22, %22bar%22, %22baz%22%5D%7D /%3E%0A%3C/Index%3E)%0A%0A
 // Nested ro

add props test