import { mapMenuItems } from "./helpers"
import { request } from "@/lib/graphql/request"
import { GetNavigationMyPages } from "@/lib/graphql/Query/NavigationMyPages.graphql"

import { Fragment } from "react"
import { LogOut } from "react-feather"
import Link from "@/components/TempDesignSystem/Link"

import styles from "./sidebar.module.css"

import type { GetNavigationMyPagesData } from "@/types/requests/myPages/navigation"
import type { SidebarProps } from "@/types/requests/myPages/navigation"

export default async function Sidebar({ lang }: SidebarProps) {
  const response = await request<GetNavigationMyPagesData>(
    GetNavigationMyPages,
    {
      locale: lang,
    }
  )
  // navigation_my_pages is of type Single, hence the hard [0]
  const navigation = response.data.all_navigation_my_pages.items[0]
  const menuItems = mapMenuItems(navigation.items)
  return (
    <aside className={styles.sidebar}>
      <nav className={styles.nav}>
        {menuItems.map((item) => (
          <Fragment key={item.uid}>
            <Link href={item.url} variant="sidebar">
              {item.linkText}
            </Link>
            {item.subItems
              ? item.subItems.map((subItem) => {
                  return (
                    <Link
                      key={subItem.uid}
                      href={subItem.url}
                      variant="sidebar"
                    >
                      {subItem.linkText}
                    </Link>
                  )
                })
              : null}
          </Fragment>
        ))}

        <Link href="/api/auth/signout" variant="sidebar">
          Log out <LogOut height={16} width={16} />
        </Link>
      </nav>
    </aside>
  )
}