import React from 'react'
import { DocsThemeConfig, useConfig } from 'nextra-theme-docs'
import Image from 'next/image'
import { useRouter } from 'next/router'

const config: DocsThemeConfig = {
    head() {
        // eslint-disable-next-line react-hooks/rules-of-hooks
        const { asPath, defaultLocale, locale } = useRouter()
        // eslint-disable-next-line react-hooks/rules-of-hooks
        const { frontMatter, ...rest } = useConfig()
        const url =
            'http://localhost:3000' +
            (defaultLocale === locale ? asPath : `/${locale}${asPath}`)

        return (
            <>
                <meta property="og:url" content={url} />
                <meta
                    property="og:title"
                    content={
                        (frontMatter.title ?? rest.title) +
                            ' | Badge API Documentation' ||
                        'Badge API Documentation'
                    }
                />
                <title>
                    {(frontMatter.title ?? rest.title) +
                        ' | Badge API Documentation' ||
                        'Badge API Documentation'}
                </title>
            </>
        )
    },
    banner: {
        key: 'development',
        content: '🚧 This Documentation is under active development.',
        dismissible: false,
    },
    logo: (
        <span className="flex items-center space-x-2">
            <Image
                src="/badge-api-icon.png"
                alt="Badge API Icon"
                width={220}
                height={80}
                className="h-12 w-auto"
            />
            <span>
                <span className="font-space-grotesk text-xl font-bold text-black">
                    Badge API Documentation
                </span>
            </span>
        </span>
    ),
    sidebar: {
        defaultMenuCollapseLevel: 2,
    },
    project: {
        link: 'https://gitlab.opencode.de/open-code/badgebackend/badge-api',
        icon: (
            <Image
                src="/opencode-icon.svg"
                alt="Open CoDE Icon"
                width={32}
                height={32}
            />
        ),
    },
    docsRepositoryBase:
        'https://gitlab.opencode.de/open-code/badgebackend/badge-api-documentation',
    backgroundColor: {
        dark: '12,17,23',
        light: '255,255,255',
    },
    color: {
        hue: {
            dark: 173,
            light: 228,
        },
        saturation: {
            dark: 100,
            light: 100,
        },
        lightness: {
            dark: 45,
            light: 46,
        },
    },
    darkMode: false,
    nextThemes: {
        defaultTheme: 'light',
        forcedTheme: 'light',
    },
    footer: {
        content: (
            <div className="flex w-full flex-col items-center text-sm sm:items-start">
                <div className="grid grid-cols-2 gap-4">
                    <a
                        className="text-blue-500 hover:text-blue-300"
                        title="Impressum"
                        href="https://opencode.de/de/impressum"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        <span>Impressum</span>
                    </a>
                    <a
                        className="text-blue-500 hover:text-blue-300"
                        title="Datenschutz"
                        href="https://opencode.de/de/datenschutz"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        <span>Datenschutz</span>
                    </a>
                </div>
                <p className="mt-4">
                    © {new Date().getFullYear()} Zentrum für Digitale
                    Souveränität der Öffentlichen Verwaltung (ZenDiS) GmbH
                </p>
            </div>
        ),
    },
}

export default config