import { Button } from "@/components/ui/button";
import { faStickyNote } from "@fortawesome/free-solid-svg-icons";
import { Dispatch, SetStateAction, useState } from "react";
import { createPortal } from "react-dom";
import Notes from "./_notes";

type NotesButtonProps = {
  data: ProjectData & { notes: DomainNote[] };
  setData: Dispatch<SetStateAction<ProjectData & { notes: DomainNote[] }>>;
};
export function NotesButton({ data, setData }: NotesButtonProps) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <div
        className="relative cursor-pointer"
        onClick={() => setIsOpen(!isOpen)}
      >
        <Button
          variant="plain"
          color="warning"
          size="xs"
          isIcon
          rounded
          decorator={faStickyNote}
        />
        <span className="absolute right-0 top-0 z-10 flex h-5 w-5 origin-top-right scale-50 items-center justify-center rounded-full bg-red-500 text-white">
          {data.notes.length > 9 ? "+9" : data.notes.length}
        </span>
      </div>
      {isOpen &&
        createPortal(
          <Notes data={data} setData={setData} setIsOpen={setIsOpen} />,
          document.querySelector(".page-content"),
        )}
    </>
  );
}