'use client';

import { ConditionalNull } from "@/components/utility/Conditional";
import { useState } from "react";
import styles from "./MainLayout.module.css";
import { useRouter } from "next/navigation";

export function Desktop<PropFormat>({
  title, 
  subtitle, 
  currentPage,
  backButton = false, 
  children,
  props,
  sidebar
}:{
  title: string, 
  subtitle?: string, 
  currentPage: string,
  backButton?: boolean, 
  children: React.ReactNode,
  props?:PropFormat,
  sidebar: (x:{currentPage:string, props?:PropFormat}) => React.ReactNode
}) {
  const [menuOpen, setMenuOpen] = useState<boolean>(false);
  const router = useRouter();
  
  return (
    <div className={`${styles.MainLayout}`}>
      <aside className={`${styles.MainLayout_Aside} ${menuOpen ? styles.Modifier_Open : ""}`}>
        {sidebar({ currentPage, props })}
      </aside>
      <div className={styles.MainLayout_Inner}>
        <div className={`${
          styles.MainLayout_Inner_Header
        } ${
          backButton ? styles.Modifier_Back : ""
        }`}>
          <ConditionalNull condition={!backButton}>
            <div className={`${styles.MainLayout_Inner_Header_Back} ${styles.MainLayout_Inner_Header_Menu}`}>
              <button className={styles.MainLayout_Inner_Header_Back_Button} onClick={() => setMenuOpen(!menuOpen)}>
                menu
              </button>
            </div>
          </ConditionalNull>
          <ConditionalNull condition={backButton}>
            <div className={styles.MainLayout_Inner_Header_Back}>
              <button className={styles.MainLayout_Inner_Header_Back_Button} onClick={() => router.back()}>
                arrow_back
              </button>
            </div>
          </ConditionalNull>
          <div className={styles.MainLayout_Inner_Header_Title}>
            <h1>{title}</h1>
            <span>{subtitle}</span>
          </div>
        </div>
        <main className={styles.MainLayout_Inner_Main}>
          <div className={`${styles.MainLayout_Inner_Main_Content} MainContent`}>
            {children}
          </div>
        </main>
      </div>
    </div>
  )
}