"use client";
import { useState } from "react";
import { useMount } from "react-use";

import { EditorHeader } from "./header";
import { EditorSidebar } from "./sidebar";
import { usePathname } from "next/navigation";

export const Editor = ({ children }: any) => {
  const [open, setOpen] = useState<boolean>(false);
  const [collections, setCollections] = useState<string[]>([]);
  const pathname = usePathname();

  useMount(() => {
    if (!pathname || pathname === "/") setCollections(["search"]);
    const firstPath = pathname.split("/")[1];
    if (firstPath) setCollections([firstPath]);
  });

  return (
    <div className="bg-slate-950 w-full overflow-hidden shadow-xl h-[100vh]">
      <EditorHeader onToggleMenu={() => setOpen(!open)} />
      <main className="flex h-full">
        <EditorSidebar
          open={open}
          collections={collections}
          onCollections={setCollections}
        />
        {children}
      </main>
    </div>
  );
};