import React, { Suspense } from 'react';
import { Switch } from "react-router-dom";
import routes from '../../routes'
import {Helmet, HelmetProvider} from 'react-helmet-async'
import { useLocation } from 'react-router-dom'
import FallbackLoading from '../FallbackLoading';
import logoIconWhite from '../../assets/logo-icon-white.svg';
import FancyRoute from './FancyRoute';

const GetTitle = () => {
    const location = useLocation().pathname;
    let name = "404 Not Found";
    if (routes.find(o => o.path === location)){
        name = routes.find(o => o.path === location).name;
    } else if (location.split("/")[1] === "game"){
        name = routes.find(o => o.path === location) ? routes.find(o => o.path === location).name : "404 Not Found";
    } else if (location.split("/")[1] === "kanji"){
        name = "Kanji - "+location.split("/")[2];
    }
    
    return name;
}

const Content = () => {
    return(
        <>
            <HelmetProvider>
                <Helmet>
                    <title>{GetTitle() + " - Zeroneko"}</title>
                    <link rel="icon" href={logoIconWhite} />
                </Helmet>
            </HelmetProvider>
            <main className="relative m-0 bg-gray-50 dark:bg-gray-800 dark:text-gray-100 pt-8 pb-16">
                <Suspense fallback={<FallbackLoading height="96" marginY="48"/>}>
                    <Switch>
                        {routes.map((route, idx) => {
                        return route.component && (
                            <FancyRoute
                            key={idx}
                            path={route.path}
                            exact={route.exact}
                            name={route.name}
                            render={props => (<route.component {...props} symbol={route.symbol} title={route.name} />)} 
                            />
                        )
                        })}
                    </Switch>
                </Suspense>
            </main>
        </>
    )
}

export default Content;