import { StickyNote as StickyIcon } from "lucide-react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { useRef, useState } from "react";
import useSWR from "swr";
// buzzwareTech hooks
import { useOutsideClickDetector } from "@buzzwaretech/hooks";
// buzzwareTech ui
import {
    CloseIcon,
    PlusIcon,
    RecentStickyIcon,
    StickyNoteIcon,
} from "@buzzwaretech/propel/icons";
import { Tooltip } from "@buzzwaretech/propel/tooltip";
// buzzwareTech utils
import { cn } from "@buzzwaretech/utils";
// hooks
import { useCommandPalette } from "@/hooks/store/use-command-palette";
import { useSticky } from "@/hooks/use-stickies";
// components
import { STICKY_COLORS_LIST } from "../editor/sticky-editor/color-palette";
import { AllStickiesModal } from "./modal";
import { StickyNote } from "./sticky";

export const StickyActionBar = observer(function StickyActionBar() {
  // states
  const [isExpanded, setIsExpanded] = useState(false);
  const [newSticky, setNewSticky] = useState(false);
  const [showRecentSticky, setShowRecentSticky] = useState(false);
  // navigation
  const { workspaceSlug } = useParams();
  // refs
  const ref = useRef(null);
  // store hooks
  const {
    stickies,
    activeStickyId,
    recentStickyId,
    updateActiveStickyId,
    fetchRecentSticky,
    toggleShowNewSticky,
  } = useSticky();
  const { toggleAllStickiesModal, allStickiesModal } = useCommandPalette();
  // derived values
  const recentStickyBackgroundColor = recentStickyId
    ? STICKY_COLORS_LIST.find(
        (c) => c.key === stickies[recentStickyId].background_color,
      )?.backgroundColor
    : STICKY_COLORS_LIST[0].backgroundColor;

  useSWR(
    workspaceSlug ? `WORKSPACE_STICKIES_RECENT_${workspaceSlug}` : null,
    workspaceSlug ? () => fetchRecentSticky(workspaceSlug.toString()) : null,
  );

  useOutsideClickDetector(ref, () => {
    setNewSticky(false);
    setShowRecentSticky(false);
    setIsExpanded(false);
  });

  return (
    <div
      ref={ref}
      className="sticky-action-bar__item flex flex-col overflow-hidden rounded-full border-2 border-accent-strong/10 bg-surface-2 p-[2px]"
    >
      <div
        className={`flex origin-bottom flex-col gap-2 transition-all duration-300 ease-in-out ${isExpanded ? "mb-2 scale-y-100 opacity-100 " : "h-0 scale-y-0 opacity-0"}`}
      >
        <Tooltip tooltipContent="All stickies" isMobile={false} position="left">
          <button
            className="btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1"
            onClick={() => toggleAllStickiesModal(true)}
          >
            <RecentStickyIcon className="size-5 rotate-90 text-tertiary" />
          </button>
        </Tooltip>
        {recentStickyId && (
          <Tooltip
            className="-mr-30 translate-x-10 scale-75"
            tooltipContent={
              <div className="-m-2 max-h-[150px]">
                <StickyNote
                  className={"w-[290px]"}
                  workspaceSlug={workspaceSlug.toString()}
                  stickyId={newSticky ? activeStickyId : recentStickyId || ""}
                />
                <div
                  className="absolute top-0 right-0 h-full w-full"
                  style={{
                    background: `linear-gradient(to top, ${recentStickyBackgroundColor}, transparent)`,
                  }}
                />
              </div>
            }
            isMobile={false}
            position="left"
            disabled={showRecentSticky}
          >
            <button
              className="btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1"
              onClick={() => setShowRecentSticky(true)}
              style={{ color: recentStickyBackgroundColor }}
            >
              <StickyNoteIcon
                className={cn("size-5 rotate-90")}
                color={recentStickyBackgroundColor}
              />
            </button>
          </Tooltip>
        )}
        <Tooltip tooltipContent="Add sticky" isMobile={false} position="left">
          <button
            className="btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1"
            onClick={() => {
              updateActiveStickyId("");
              toggleShowNewSticky(true);
              setNewSticky(true);
            }}
          >
            <PlusIcon className="size-5 rotate-90 text-tertiary" />
          </button>
        </Tooltip>
      </div>

      <button
        className={`btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1 transition-transform duration-300 ${isExpanded ? "rotate-180" : ""}`}
        onClick={() => setIsExpanded(!isExpanded)}
      >
        {isExpanded ? (
          <CloseIcon className="size-5 text-tertiary" />
        ) : (
          <StickyIcon className="size-5 rotate-90 text-tertiary" />
        )}
      </button>

      <div
        className={cn(
          "absolute right-0 bottom-16 z-[20]",
          "transform transition-all duration-300 ease-in-out",
          newSticky || showRecentSticky
            ? "min-h-[300px] translate-y-[0%]"
            : "h-0 translate-y-[100%]",
        )}
      >
        {(newSticky || (showRecentSticky && recentStickyId)) && (
          <StickyNote
            className={"w-[290px]"}
            onClose={() =>
              newSticky ? setNewSticky(false) : setShowRecentSticky(false)
            }
            workspaceSlug={workspaceSlug.toString()}
            stickyId={newSticky ? activeStickyId : recentStickyId || ""}
          />
        )}
      </div>

      <AllStickiesModal
        isOpen={allStickiesModal}
        handleClose={() => toggleAllStickiesModal(false)}
      />
    </div>
  );
});