import { useMode } from "../../stores/useMode";
import { twMerge } from "tailwind-merge";
import { forwardRef } from "react";
import { MODES } from "../../config";
import { PendingPointsFilters } from "./PendingPointsFilters/PendingPointsFilters";
import { OnApprovalPointsFilters } from "./OnApprovalPointsFilters/OnApprovalPointsFilters";
import { WorkingPointsFilters } from "./WorkingPointsFilters/WorkingPointsFilters";
import { ImportModeSidebarButtons } from "../ImportMode/SidebarButtons.jsx";

export const Sidebar = forwardRef(({ isCollapsed }, ref) => {
  const { mode } = useMode();

  const getFilters = () => {
    if (mode === MODES.PENDING) {
      return <PendingPointsFilters />;
    }

    if (mode === MODES.ON_APPROVAL) {
      return <OnApprovalPointsFilters />;
    }

    return <WorkingPointsFilters />;
  };

  return (
    <div
      className={twMerge(
        "h-screen p-3 overflow-y-auto shrink-0 border-solid border-border border-0 border-r-[1px] flex flex-col transition-all pt-20",
        isCollapsed ? "basis-0 px-0 -translate-x-[320px]" : "basis-[320px]"
      )}
      ref={ref}
    >
      <ImportModeSidebarButtons />
      <div className="flex flex-col flex-1">{getFilters()}</div>
    </div>
  );
});