import { observer } from "mobx-react";
import React, { useEffect } from "react";
// buzzwareTech imports
import { EXTENDED_SIDEBAR_WIDTH, SIDEBAR_WIDTH } from "@buzzwaretech/constants";
import { useLocalStorage } from "@buzzwaretech/hooks";
import { cn } from "@buzzwaretech/utils";
// hooks
import { useAppTheme } from "@/hooks/store/use-app-theme";
// hooks
import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";

type Props = {
  className?: string;
  children: React.ReactNode;
  extendedSidebarRef: React.RefObject<HTMLDivElement>;
  isExtendedSidebarOpened: boolean;
  handleClose: () => void;
  excludedElementId: string;
};

export const ExtendedSidebarWrapper = observer(function ExtendedSidebarWrapper(
  props: Props,
) {
  const {
    className,
    children,
    extendedSidebarRef,
    isExtendedSidebarOpened,
    handleClose,
    excludedElementId,
  } = props;
  // store hooks
  const { sidebarCollapsed } = useAppTheme();
  // local storage
  const { storedValue } = useLocalStorage("sidebarWidth", SIDEBAR_WIDTH);

  useExtendedSidebarOutsideClickDetector(
    extendedSidebarRef,
    handleClose,
    excludedElementId,
  );

  useEffect(() => {
    if (sidebarCollapsed) {
      handleClose();
    }
  }, [sidebarCollapsed, handleClose]);

  return (
    <div
      id={excludedElementId}
      ref={extendedSidebarRef}
      className={cn(
        "shadow-sm absolute z-[21] flex h-full transform flex-col border-r border-subtle bg-surface-1 p-4 py-2 transition-all duration-300 ease-in-out",
        {
          "opacity-100": isExtendedSidebarOpened,
          "hidden opacity-0": !isExtendedSidebarOpened,
        },
        className,
      )}
      style={{
        left: `${storedValue ?? SIDEBAR_WIDTH}px`,
        width: `${EXTENDED_SIDEBAR_WIDTH}px`,
      }}
    >
      {children}
    </div>
  );
});