import React, { Suspense, useState, useCallback, useMemo } from 'react';
import { Route, Link, Redirect, Switch } from 'react-router-dom';

import { TopPage } from './pages/TopPage';
import { LocationPage } from './pages/LocationPage';
import { DetailPage } from './pages/DetailPage';
import { ProfilePage } from './pages/ProfilePage';
import { ImportPage } from './pages/ImportPage';

import { Menu, Container, Sidebar, Segment, Icon } from 'semantic-ui-react';

export default function App() {
  const [sidebarOpened, setSidebarOpended] = useState(false);

  const handleSidebarHide = useCallback(() => {
    setSidebarOpended(false);
  });

  const handleToggle = useCallback(() => {
    setSidebarOpended(c => !c);
  });

  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const todayLocation = useMemo(() => {
    const loc = `/locations/${year}-${('0' + month).slice(-2)}-${(
      '0' + day
    ).slice(-2)}`;
    console.log('todayLocation', loc);
    return loc;
  }, [month, year, day]);

  return (
    <>
      <Sidebar.Pushable as={Segment} style={{ height: '100vh' }}>
        <Sidebar
          as={Menu}
          animation="push"
          inverted
          onHide={handleSidebarHide}
          vertical
          visible={sidebarOpened}
        >
          <Menu.Item as={Link} to="/" name="Top" onClick={handleSidebarHide} />
          <Menu.Item
            as={Link}
            to="/locations"
            name="Locations"
            onClick={handleSidebarHide}
          />
          <Menu.Item
            as={Link}
            to="/import"
            name="Import"
            onClick={handleSidebarHide}
          />
        </Sidebar>
        <Sidebar.Pusher dimmed={sidebarOpened}>
          <Segment
            inverted
            textAlign="center"
            style={{ minHeight: 30, padding: '0.5em 0em', marginBottom: 8 }}
            vertical
          >
            <Menu inverted pointing secondary size="large">
              <Container>
                <Menu.Item onClick={handleToggle}>
                  <Icon name="sidebar" />
                </Menu.Item>
              </Container>
            </Menu>
          </Segment>
          <Container>
            <Switch>
              <Redirect exact from="/locations" to={todayLocation} />
              <Route path="/" exact>
                <TopPage />
              </Route>
              <Route path="/locations/:year(\d+)-:month(\d+)-:day(\d+)">
                <Suspense fallback={<h1>loading</h1>}>
                  <LocationPage />
                </Suspense>
              </Route>
              <Route path="/detail/:__id" component={DetailPage} />
              <Route path="/about" exact>
                <h1>About Personium Trails</h1>
              </Route>
              <Route path="/profile" exact>
                <ProfilePage />
              </Route>
              <Route path="/import" exact>
                <ImportPage />
              </Route>
            </Switch>
          </Container>
        </Sidebar.Pusher>
      </Sidebar.Pushable>
    </>
  );
}