import React, { useReducer, useRef } from 'react';
import { BrowserRouter as Router, Link, useHistory, NavLink } from 'react-router-dom';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { Modal } from '../Modal/Modal';
import { Route, RoutersManager, useIsModalRoute } from './RoutersManager';

const css = styled.div;

const Style = css`
   text-align: center;

   li {
      padding: 20px;
      display: inline-block;
   }
`;

storiesOf('Components/RoutersManager', module)
   .add('router example', () => {
      return (
         <Style>
            <Router>
               <ul>
                  <li>
                     <Link to="/">Home</Link>
                  </li>
                  <li>
                     <Link to="/about">About</Link>
                  </li>
                  <li>
                     <Link to="/dashboard">Dashboard</Link>
                  </li>
                  <li>
                     <Link to="/modal/2">Modal</Link>
                  </li>
               </ul>

               <hr />
               <RoutersManager>
                  <Route exact path="/" component={Home} />
                  <Route path="/about" component={About} />
                  <Route path="/dashboard" component={Dashboard} />
                  <Route path="/modal/:id" component={PageModal} modal />
                  <Route path="/modal2" component={PageModal2} modal />
               </RoutersManager>
            </Router>
         </Style>
      );
   })
   .add('init modal', () => {
      return (
         <Style>
            <Router>
               <ul>
                  <li>
                     <Link to="/">Home</Link>
                  </li>
                  <li>
                     <Link to="/about">About</Link>
                  </li>
                  <li>
                     <Link to="/dashboard">Dashboard</Link>
                  </li>
                  <li>
                     <Link to="/iframe.html">Modal</Link>
                  </li>
               </ul>

               <hr />
               <RoutersManager>
                  <Route exact path="/" component={Home} />
                  <Route path="/about" component={About} />
                  <Route path="/dashboard" component={Dashboard} />
                  <Route path="/iframe.html" component={PageModal} modal />
               </RoutersManager>
            </Router>
         </Style>
      );
   });

function Home(): any {
   return (
      <div>
         <h2>Page Home</h2>
      </div>
   );
}

function About(): any {
   return (
      <div>
         <h2>Page About</h2>
      </div>
   );
}

function Dashboard(): any {
   return (
      <div>
         <h2>Page Dashboard</h2>
      </div>
   );
}

function PageModal(): any {
   const { showModal, animation } = useIsModalRoute();
   const history = useHistory();

   if (showModal) {
      return (
         <Modal show onRequestClose={() => history.goBack()} disableAnimation={!animation}>
            <Modal.Body className="p-4">
               <h2>Page Modal</h2>
               <NavLink to="/about">
                  Go to <b>about</b>
               </NavLink>
               <NavLink to="/modal2">
                  Go to <b>Other Modal 2</b>
               </NavLink>
            </Modal.Body>
         </Modal>
      );
   }

   return (
      <div>
         <h2>Page Modal</h2>
      </div>
   );
}

function PageModal2(): any {
   const { showModal, animation } = useIsModalRoute();
   const history = useHistory();

   if (showModal) {
      return (
         <Modal show onRequestClose={() => history.goBack()} disableAnimation={!animation}>
            <Modal.Body className="p-4">
               <h2>Page Modal2</h2>
               <NavLink to="/about">
                  Go to <b>about</b>
               </NavLink>
               <NavLink to="/modal">
                  Go to <b>Other Modal 1</b>
               </NavLink>
            </Modal.Body>
         </Modal>
      );
   }

   return (
      <div>
         <h2>Page Modal2</h2>
      </div>
   );
}
