import React, {useEffect} from "react";
import {useTranslation} from "react-i18next";
import {Outlet} from "react-router-dom";
import {useNavigation} from "../../hooks/navigationHook";
import {
    faChartLine,
    faCogs,
    faCubes,
    faGlobe,
    faInfoCircle,
    faLocationArrow,
    faNetworkWired,
    faSearch,
    faServer,
    faUserGroup,
    faUsers
} from "@fortawesome/free-solid-svg-icons";
import {useAuth} from "../../hooks/authenticationHook";
import Sidebar from "../../components/navigation/Sidebar";
import Header from "../../components/navigation/Header";
import ColorSelectorModal from "../../components/modal/ColorSelectorModal";
import {useMetadata} from "../../hooks/metadataHook";
import {faCalendarCheck} from "@fortawesome/free-regular-svg-icons";
import {SwitchTransition} from "react-transition-group";
import MainPageRedirect from "../../components/navigation/MainPageRedirect";
import {ServerExtensionContextProvider, useServerExtensionContext} from "../../hooks/serverExtensionDataContext";
import {iconTypeToFontAwesomeClass} from "../../util/icons";
import {staticSite} from "../../service/backendConfiguration";

const NetworkSidebar = () => {
    const {t, i18n} = useTranslation();
    const {sidebarItems, setSidebarItems} = useNavigation();
    const {networkMetadata} = useMetadata();
    const {extensionData} = useServerExtensionContext();

    useEffect(() => {
        const servers = networkMetadata?.servers || [];
        const items = [
            {name: 'html.label.networkOverview', icon: faInfoCircle, href: "overview"},
            {},
            {name: 'html.label.information'},
            {
                name: 'html.label.servers',
                icon: faServer,
                contents: [
                    {
                        nameShort: 'html.label.overview',
                        name: 'html.label.servers',
                        icon: faNetworkWired,
                        href: "serversOverview"
                    },
                    {name: 'html.label.sessions', icon: faCalendarCheck, href: "sessions"},
                    staticSite ? undefined : {name: 'html.label.performance', icon: faCogs, href: "performance"},
                    {},
                    ...servers
                        .filter(server => !server.proxy)
                        .map(server => {
                            return {
                                name: server.serverName,
                                icon: faServer,
                                href: "/server/" + server.serverUUID,
                                color: 'light-green'
                            }
                        })
                ]
            },
            {
                name: 'html.label.playerbase',
                icon: faUsers,
                contents: [
                    {
                        nameShort: 'html.label.overview',
                        name: 'html.label.playerbaseOverview',
                        icon: faChartLine,
                        href: "playerbase"
                    },
                    {name: 'html.label.joinAddresses', icon: faLocationArrow, href: "join-addresses"},
                    // {name: 'html.label.playerRetention', icon: faUsersViewfinder, href: "retention"},
                    {name: 'html.label.playerList', icon: faUserGroup, href: "players"},
                    {name: 'html.label.geolocations', icon: faGlobe, href: "geolocations"},
                ]
            },
            {},
            {name: 'html.label.plugins'},
            {name: 'html.label.pluginsOverview', icon: faCubes, href: "plugins-overview"}
        ]

        if (extensionData) {
            extensionData.extensions.filter(extension => extension.wide)
                .map(extension => extension.extensionInformation)
                .map(info => {
                    return {
                        name: info.pluginName,
                        icon: [iconTypeToFontAwesomeClass(info.icon.family), info.icon.iconName],
                        href: `plugins/${encodeURIComponent(info.pluginName)}`
                    }
                }).forEach(item => items.push(item))
        }

        if (!staticSite) {
            items.push(
                {},
                {name: 'html.label.links'},
                {name: 'html.label.query', icon: faSearch, href: "/query"}
            );
        }

        setSidebarItems(items);
        window.document.title = `Plan | Network`;
    }, [t, i18n, extensionData, setSidebarItems, networkMetadata])

    return (
        <Sidebar items={sidebarItems}/>
    )
}

const ServerPage = () => {
    const {networkName, serverUUID} = useMetadata();

    const {currentTab} = useNavigation();

    const {authRequired, loggedIn} = useAuth();
    if (authRequired && !loggedIn) return <MainPageRedirect/>

    if (!serverUUID) return <></>

    return (
        <>
            <ServerExtensionContextProvider identifier={serverUUID}>
                <NetworkSidebar/>
                <div className="d-flex flex-column" id="content-wrapper">
                    <Header page={networkName} tab={currentTab}/>
                    <div id="content" style={{display: 'flex'}}>
                        <main className="container-fluid mt-4">
                            <SwitchTransition>
                                <Outlet/>
                            </SwitchTransition>
                        </main>
                        <aside>
                            <ColorSelectorModal/>
                        </aside>
                    </div>
                </div>
            </ServerExtensionContextProvider>
        </>
    )
}

export default ServerPage;