/* eslint-disable no-undef */
import React from "react";
import { Trans, Link, useTranslation } from "gatsby-plugin-react-i18next";
import { createPortal } from "react-dom";

import * as styles from "./navigation.module.scss";
import { X } from "lucide-react";
import useSiteMetadata from "../helpers/useSiteMetadata";

type OffScreenNavProps = {
    active: boolean;
    close: () => void;
};

const OffScreenNav = ({ active, close }: OffScreenNavProps) => {
    const { t } = useTranslation();
    const { modules } = useSiteMetadata();

    if (typeof document === "undefined") return <></>;

    return createPortal(
        <div
            className={
                styles.offscreenNav + (active ? " " + styles.active : "")
            }
        >
            <div className={styles.inner}>
                <button
                    className={styles.close}
                    onClick={close}
                    aria-label={t("closeMenu")}
                >
                    <X />
                </button>
                <span>
                    <Trans>menu</Trans>
                </span>
                <Link to="/" activeClassName={styles.active}>
                    <Trans>home.title</Trans>
                </Link>
                <Link to="/about/" activeClassName={styles.active}>
                    <Trans>about.title</Trans>
                </Link>
                {modules.projects && (
                    <Link to="/projects/" activeClassName={styles.active}>
                        <Trans>project.plural</Trans>
                    </Link>
                )}
                <Link to="/social/" activeClassName={styles.active}>
                    <Trans>social.title</Trans>
                </Link>
                {modules.blog && (
                    <Link to="/blog/" activeClassName={styles.active}>
                        <Trans>blog.title</Trans>
                    </Link>
                )}
            </div>
        </div>,
        document.getElementById("osnav")
    );
};

export default OffScreenNav;