import { SetStateAction } from "react";
// @ts-ignore
import FolderPlusIcon from "@assets/fontawesome/svg/folder-plus.svg?react";
// @ts-ignore
import TagsIcon from "@assets/fontawesome/svg/tags.svg?react";
// @ts-ignore
import FileCirclePlusIcon from "@assets/fontawesome/svg/file-circle-plus.svg?react";
import { useUIStore } from "@/stores/uiStore";
import { useCreateNote } from "@/hooks/useFolders";
import { NoteCreate } from "@/api/notes";

export const SidebarHeader = ({
  setNewFolder,
}: {
  setNewFolder: React.Dispatch<SetStateAction<boolean>>;
}) => {
  const { selectedFolder } = useUIStore();
  const createNote = useCreateNote();
  const handleCreate = async () => {
    createNote.mutate({
      title: "Untitled",
      content: "",
      folder_id: selectedFolder,
    } as NoteCreate);
  };
  return (
    <div className="w-full p-2 border-b border-ctp-surface2 bg-ctp-mantle">
      <div className="flex items-center justify-around bg-ctp-surface0 rounded-lg p-1 gap-1">
        <button
          onClick={() => setNewFolder(true)}
          className="hover:bg-ctp-mauve active:scale-95 group transition-all duration-200 rounded-md p-2 hover:shadow-md"
          title="New folder"
        >
          <FolderPlusIcon className="w-5 h-5 group-hover:fill-ctp-base transition-all duration-200 fill-ctp-mauve" />
        </button>
        <button
          onClick={handleCreate}
          className="hover:bg-ctp-mauve active:scale-95 group transition-all duration-200 rounded-md p-2 hover:shadow-md"
          title="New note"
        >
          <FileCirclePlusIcon className="w-5 h-5 group-hover:fill-ctp-base transition-all duration-200 fill-ctp-mauve" />
        </button>
      </div>
    </div>
  );
};