import { lazy, createSignal, Show } from "solid-js";
import { Routes, Route, Link, useLocation } from "solid-app-router";

import BacgroundMap from "../components/bacgroundMap"
import TitleStyle from "../components/titleStyle"

import baseText from "../base/baseText"

const First = lazy(() => import("../pages/First"))
const Second = lazy(() => import("../pages/Second"))
const Third = lazy(() => import("../pages/Third"))
const Fourth = lazy(() => import("../pages/Fourth"))
const Fifth = lazy(() => import("../pages/Fifth"))
const BigScreen = lazy(() => import("../pages/BigScreen/Home"))


const [BottomLi, setBottomLi] = createSignal(baseText.bottoms);

const changeBottomTab = function (e) {
    const path = e.target.getAttribute("path");
    setBottomLi(BottomLi().map((bot, i) => (bot.path !== path ? { ...bot, select: false } : { ...bot, select: true })));
}

export default function localRouter() {
    // 根据路由选择tab
    setBottomLi(BottomLi().map((bot, i) => (bot.path === location.pathname ? { ...bot, select: true } : { ...bot, select: false })));
    return <>
        <Show when={location.pathname !== '/'}>
            <TitleStyle />
        </Show>
        <Routes>
            <Route path="/" element={<BigScreen />} />
            <Route path="/First" element={<First />} />
            <Route path="/Second" element={<Second />} />
            <Route path="/Third" element={<Third />} />
            <Route path="/Fourth" element={<Fourth />} />
            <Route path="/Fifth" element={<Fifth />} />
        </Routes>
        <Show when={location.pathname !== '/'}>
            <div class='bottom'>
                <For each={BottomLi()}>{(bottom, i) =>
                    <Link onClick={changeBottomTab} class="nav" href={bottom.path} path={bottom.path} classList={{ 'item': true, 'act': bottom.select }}>
                        {bottom.name}
                    </Link>
                }</For>
            </div>
            <BacgroundMap typa />
        </Show>
    </>
}