//App.js
import {UseContent} from './useContent.js'
import React from "react";

function App() {
  return (
    <UseContent></UseContent>
  );
}

export default App;

//useContent.js
import React, { useReducer, createContext } from 'react'
import { ChildSecond } from './ContentHook/ChildSecond'
import { store, reducer} from './Store'
import Routing from './routing.js'

export const Context = createContext(null)

export function UseContent() {
    const [state, dispatch] = useReducer(reducer, store)

    return (
        <Context.Provider value={{state, dispatch}}>
            <ChildSecond/>
            <Routing/>
        </Context.Provider>
    )
} 

//routing.js
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

import { ChildFirst1 } from './ContentHook/ChildFirst1'
import { ChildFirst2 } from './ContentHook/ChildFirst2'
import { Cavvas } from './Canvas/LittleBalls.js'

const routes = [
  {
    path: "/sandwiches",
    component: Sandwiches
  },
  {
    path: "/tacos",
    component: Tacos,
    routes: [
      {
        path: "/tacos/bus",
        component: Bus
      },
      {
        path: "/tacos/cart",
        component: Cart
      }
    ]
  },
  {
    path: "/littleBalls",
    component: Cavvas
  }
];

export default function Routing() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/tacos">Tacos</Link>
          </li>
          <li>
            <Link to="/sandwiches">Sandwiches</Link>
          </li>
          <li>
            <Link to="/littleBalls">little balls</Link>
          </li>
        </ul>

        <Switch>
          {routes.map((route, i) => (
            <RouteWithSubRoutes key={i} {...route} />
          ))}
        </Switch>
      </div>
    </Router>
  );
}

function RouteWithSubRoutes(route) {
  return (
    <Route
      path={route.path}
      render={props => (
        // pass the sub-routes down to keep nesting
        <route.component {...props} routes={route.routes} />
      )}
    />
  );
}

function Sandwiches() {
  return <h2>Sandwiches</h2>;
}

function Tacos({ routes }) {
  return (
    <div>
      <h2>Tacos</h2>
      <ul>
        <li>
          <Link to="/tacos/bus">Bus</Link>
        </li>
        <li>
          <Link to="/tacos/cart">Cart</Link>
        </li>
      </ul>

      <Switch>
        {routes.map((route, i) => (
          <RouteWithSubRoutes key={i} {...route} />
        ))}
      </Switch>
    </div>
  );
}

function Bus() {
  return (
    <div>
      <h3>Bus</h3>
      <ChildFirst1/>      
    </div>
  )
}

function Cart() {
  return (
    <div>
      <h3>Cart</h3>
      <ChildFirst2/>
    </div>
  )
}

//ContentHook/ChildSecond.js
import React, {useContext} from 'react'
import {Context} from '../useContent.js'

export function ChildSecond() {
    const AppContext = useContext(Context)

    return (
        <div>
            {AppContext.state.value + 's'}
        </div>
    )
} 

//Store.js
import { produce } from 'immer'

const store = {
  value: 1
}
export { store }

export function reducer(state, action) {
  switch(action.type) {
      case 'ADD_NUM':
          // return { ...state, value: state.value + 1 };
          return produce(state, (draft)=>{
            draft.value++
          })
      case 'REDUCE_NUM':
          // return { ...state, value: state.value - 1 };
          return produce(state, (draft)=>{
            draft.value--
          })
      default: 
          throw new Error();
  }
}

//ContentHook/ChildFirst1
import React, {useContext} from 'react'
import {Context} from '../useContent'

export function ChildFirst1() {
    const AppContext = useContext(Context)

    return (
        <div>
            <button onClick={ () => {
                    AppContext.dispatch({
                        type: "ADD_NUM",
                        payload: {}
                    })
                }
            }>addNum</button>
        </div>
    )
} 

//ContentHook/ChildFirst2
import React, {useContext} from 'react'
import {Context} from '../useContent'

export function ChildFirst2() {
    const AppContext = useContext(Context)

    return (
        <div>
            <button onClick={() => {
                    AppContext.dispatch({
                        type: "REDUCE_NUM",
                        payload: {}
                    })  
                }
            }>reduceNum</button>
        </div>
    )
}