import { PanelRightCloseIcon, PanelRightOpenIcon } from "lucide-react";
import { useEffect } from "react";

import { Button } from "@/components/ui/button";
import { useSidebar } from "@/components/ui/sidebar";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import useDeviceType from "@/hooks/use-device-type";
import trans from "@/hooks/use-translations";

export default function CustomSidebarTrigger() {
  const { toggleSidebar, state } = useSidebar();
  const { isMobile } = useDeviceType();

  useEffect(() => {
    if (state === "collapsed") {
      localStorage.setItem("vite-ui-collapsed", "true");
    } else {
      localStorage.removeItem("vite-ui-collapsed");
    }
  }, [state]);

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button
          onClick={toggleSidebar}
          variant="ghost"
          className="rotate-180"
          size="icon"
        >
          {isMobile || state === "collapsed" ? (
            <PanelRightOpenIcon />
          ) : (
            <PanelRightCloseIcon />
          )}
        </Button>
      </TooltipTrigger>
      <TooltipContent side="right">
        <p>{trans("uwil-backend::back.sidebar_trigger_tooltip")}</p>
      </TooltipContent>
    </Tooltip>
  );
}