canvas-backend/src/components/Panel/TopBar.jsx

import { useContext, useRef, useState } from "react";
import TextCustomization from "../EachComponent/Customization/TextCustomization";
import LockObject from "../EachComponent/Customization/LockObject";
import OpacityCustomization from "../EachComponent/Customization/OpacityCustomization";
import CanvasContext from "../Context/canvasContext/CanvasContext";
import { ObjectShortcut } from "../ObjectShortcut";
import ActiveObjectContext from "../Context/activeObject/ObjectContext";
import { Button } from "../ui/button";
import { ImagePlus, ChevronLeft, ChevronRight } from "lucide-react";
import { RxBorderWidth } from "react-icons/rx";
import { LuFlipVertical } from "react-icons/lu";
import { SlTarget } from "react-icons/sl";
import { RiShadowLine } from "react-icons/ri";
import { FaRegObjectGroup } from "react-icons/fa";
import { Tooltip } from "react-tooltip";

export function TopBar() {
  const { activeObject } = useContext(ActiveObjectContext);
  const { selectedPanel, setSelectedPanel, textColor } =
    useContext(CanvasContext);
  const activeObjectType = activeObject?.type;
  const hasClipPath = !!activeObject?.clipPath;
  const customClipPath = activeObject?.isClipPath;
  const scrollContainerRef = useRef(null);
  const [showScrollButtons, setShowScrollButtons] = useState(false);

  const scroll = (direction) => {
    const container = scrollContainerRef.current;
    if (container) {
      const scrollAmount = 200; // Adjust this value to change scroll distance
      container.scrollBy({
        left: direction * scrollAmount,
        behavior: "smooth",
      });
    }
  };

  return (
    <div
      className={`!absolute top-2 -translate-x-1/2 z-40 ${selectedPanel !== ""
        ? "md:w-[465px] left-[41%] lg:w-[700px] lg:left-[43%] mdxl:left-[45%] xl:w-[900px] xl:left-[46%] 2xl:left-[50%]"
        : "w-[500px] lg:w-[600px] xl:w-[900px] lg:left-[41%] xl:left-[50%]"
        }`}
      onMouseEnter={() => setShowScrollButtons(true)}
      onMouseLeave={() => setShowScrollButtons(false)}
    >
      <div className="relative h-full hidden xl:block">
        {showScrollButtons && (
          <>
            <Button
              className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-accent"
              onClick={() => scroll(-1)}
              variant="ghost"
              size="icon"
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <Button
              className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-accent"
              onClick={() => scroll(1)}
              variant="ghost"
              size="icon"
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </>
        )}
        <div
          ref={scrollContainerRef}
          className="w-full h-full overflow-x-auto scrollbar-hide"
        >
          <div className="bg-white shadow-sm mx-auto px-4 xl:px-10 py-2 flex justify-start items-center gap-2 min-w-max h-full">
            <div>
              <TextCustomization />
            </div>
            <div className="flex items-center gap-4 px-2">
              <Button
                variant="outline"
                className="flex items-center gap-2 border-dashed border-2 rounded-md hover:bg-gray-50"
                onClick={() => setSelectedPanel("image-insert")}
              >
                <ImagePlus className="w-5 h-5" />
                <span>Add image</span>
              </Button>

              {/* canvas settings */}
              <div>
                <a data-tooltip-id="canvas">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="w-10 h-10"
                    onClick={() => setSelectedPanel("canvas")}
                  >
                    <svg
                      width="100"
                      height="100"
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <rect
                        x="3"
                        y="5"
                        width="18"
                        height="12"
                        stroke="black"
                        strokeWidth="2"
                        fill="none"
                      />
                      <path d="M14 14 L19 19" stroke="black" strokeWidth="2" />
                      <path
                        d="M15 15 Q16 12, 19 11"
                        stroke="black"
                        strokeWidth="2"
                        fill="none"
                      />
                      <line
                        x1="3"
                        y1="17"
                        x2="7"
                        y2="21"
                        stroke="black"
                        strokeWidth="2"
                      />
                      <line
                        x1="21"
                        y1="17"
                        x2="17"
                        y2="21"
                        stroke="black"
                        strokeWidth="2"
                      />
                    </svg>
                  </Button>
                </a>
                <Tooltip id="canvas" content="Canvas Settings" place="bottom" />
              </div>

              <div className="flex items-center gap-2">
                {activeObjectType !== "image" &&
                  activeObject?.type !== "i-text" &&
                  !hasClipPath &&
                  !customClipPath && (
                    <a data-tooltip-id="color-gr">
                      <Button
                        variant="ghost"
                        size="icon"
                        className="rounded-full"
                        onClick={() => setSelectedPanel("color")}
                        style={{ backgroundColor: textColor?.fill || "black" }}
                      ></Button>
                    </a>
                  )}
                <Tooltip id="color-gr" content="Color" place="bottom" />

                {!customClipPath && (
                  <a data-tooltip-id="stroke">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="w-10 h-10"
                      onClick={() => setSelectedPanel("stroke")}
                    >
                      <RxBorderWidth className="text-lg" />
                    </Button>
                  </a>
                )}
                <Tooltip id="stroke" content="Stroke" place="bottom" />
                {(activeObject || activeObject.type === "group") && (
                  <a data-tooltip-id="group-obj">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="w-10 h-10"
                      onClick={() => setSelectedPanel("group-obj")}
                    >
                      <FaRegObjectGroup />
                    </Button>
                  </a>
                )}
                <Tooltip id="group-obj" content="Group Object" place="bottom" />
              </div>

              <div className="h-6 w-px bg-gray-200" />

              <div className="flex items-center gap-2">
                <a data-tooltip-id="flip">
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setSelectedPanel("flip")}
                  >
                    <LuFlipVertical />
                  </Button>
                </a>

                <Tooltip id="flip" content="Object flip" place="bottom" />
                {activeObject?.type !== "group" && (
                  <a data-tooltip-id="position">
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => setSelectedPanel("position")}
                    >
                      <SlTarget />
                    </Button>
                  </a>
                )}

                <Tooltip
                  id="position"
                  content="Object position"
                  place="bottom"
                />
                <a data-tooltip-id="shadow">
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setSelectedPanel("shadow")}
                  >
                    <RiShadowLine />
                  </Button>
                </a>
                <Tooltip id="shadow" content="Shadow color" place="bottom" />
              </div>
            </div>
            <OpacityCustomization />
            <div className="h-4 w-px bg-border mx-2" />

            <div>
              <ObjectShortcut value="default" />
            </div>
            <div className="ml-4">
              <LockObject />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}