import { ReactNode, useState, useEffect } from "react";
import { RouteHandler } from "../../router/routes";
import { useNavigate } from "react-router-dom";

import Aside from "./Aside";

export default function DashboardLayout({ children }: { children: ReactNode }) {
  const navigate = useNavigate();

  const [showAside, setShowAside] = useState<boolean>(false);
  const asideDisplay = (): void => {
    setShowAside((prev) => !prev);
  };

  useEffect(() => {
    const handleResize = () => {
      return setShowAside(false);
    };
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  // Assume this interface for ChildProps
  // interface ChildProps {
  //   customProp?: string;
  // }

  // const enhanceChildren = React.Children.map(children, (child) => {
  //   if (React.isValidElement<ChildProps>(child)) {
  //     return React.cloneElement(child, { customProp: "Hello, World!" });
  //   }
  //   return child;
  // });

  const logoutUser = () => {
    navigate(RouteHandler.letsGetStarted, {replace:true})
  }

  return (
    <div className="w-full max-w-[2000px] mx-auto h-screen flex bg-[#020202] text-black">
      <aside className="max-w-[18.75rem] w-full bg-white hidden md:block border-r-2 border-[#E6E6E6]">
        <Aside logoutUser={logoutUser} />
      </aside>
      <aside
        className={`max-w-[18.75rem] w-full md:hidden bg-white border-r-2 border-[#E6E6E6] fixed top-0 bottom-0 z-50 transition-all duration-500 ${
          showAside ? "left-0" : "-left-[200%]"
        }`}
      >
        <Aside logoutUser={logoutUser} asideDisplay={asideDisplay} />
      </aside>
      <main className="dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden">

        <header className={`p-5 md:hidden sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6]`}>
          <div className='h-14 w-full flex justify-end items-center gap-5'>
              {/* MENU HAND BURGER */}
              {/* <div className='w-full'>Welcome Austin Catherine</div> */}
              <div
              className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
              onClick={asideDisplay}
              >
              <div
                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
                  showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
                  }`}
              ></div>
              <div
                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
                  showAside
                      ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
                      : "top-1/2 -translate-y-1/2"
                  }`}
              ></div>
              <div
                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
                  showAside
                      ? "top-1/2 -translate-y-1/2 -rotate-45"
                      : "bottom-0"
                  }`}
              ></div>
              </div>
          </div>
        </header>
        <div className="flex p-5 relative">
          <div className="w-full p-5">{children}</div>
        </div>
      </main>
    </div>
  );
}

// {/* <header className={`p-5 sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6]`}>
// <div className='h-14 w-full flex justify-end items-center gap-5'>

//     {/* MENU HAND BURGER */}
//     <div className='w-full'>Welcome Austin Catherine</div>
//     <div
//     className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
//     onClick={asideDisplay}
//     >
//     <div
//         className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
//         showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
//         }`}
//     ></div>
//     <div
//         className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
//         showAside
//             ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
//             : "top-1/2 -translate-y-1/2"
//         }`}
//     ></div>
//     <div
//         className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
//         showAside
//             ? "top-1/2 -translate-y-1/2 -rotate-45"
//             : "bottom-0"
//         }`}
//     ></div>
//     </div>
// </div>
// </header> */}