import { Button } from "../ui/Button";
import { X } from "lucide-react";
import { ScrollArea } from "../ui/scroll-area";
import { useContext, useEffect, useState } from "react";
import CanvasContext from "../Context/canvasContext/CanvasContext";
import ActiveObjectContext from "../Context/activeObject/ObjectContext";
import { fabric } from "fabric";
import CommonPanel from "./CommonPanel";

export default function TextPanel() {
  const { canvas, setSelectedPanel } = useContext(CanvasContext);
  const { activeObject, setActiveObject } = useContext(ActiveObjectContext);

  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (activeObject) {
      setOpen(true);
    } else {
      setOpen(false);
    }
  }, [activeObject]);

  const addText = () => {
    if (canvas) {
      const text = new fabric.IText("Editable Text", {
        left: 100,
        top: 100,
        fontFamily: "Poppins",
        fontSize: 16,
        stroke: "", // empty string for no stroke color
        strokeWidth: 0, // set stroke width to 0
      });
      // Add the text to the canvas and re-render
      canvas.add(text);
      // canvas.clipPath = text;
      canvas.setActiveObject(text);
      setActiveObject(text);
      canvas.renderAll();
    }
  };

  return (
    <div>
      <div className="flex justify-between items-center p-4 border-b">
        <h2 className="text-lg font-semibold">Text</h2>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setSelectedPanel("")}
        >
          <X className="h-4 w-4" />
        </Button>
      </div>

      <ScrollArea className="md:h-[calc(90vh-195px)] px-4 py-4">
        <Button
          className="w-full bg-[#FF2B85] hover:bg-[#FF2B85] text-white rounded-[10px] mb-6 h-12 font-medium text-xl"
          onClick={() => {
            addText();
          }}
        >
          Add Text
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
          >
            <path
              d="M7.5 18.3333H12.5C16.6667 18.3333 18.3333 16.6666 18.3333 12.5V7.49996C18.3333 3.33329 16.6667 1.66663 12.5 1.66663H7.5C3.33333 1.66663 1.66667 3.33329 1.66667 7.49996V12.5C1.66667 16.6666 3.33333 18.3333 7.5 18.3333Z"
              stroke="white"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M5.83333 7.40837C8.45833 6.10004 11.5417 6.10004 14.1667 7.40837"
              stroke="white"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M10 13.5833V6.60828"
              stroke="white"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </Button>
        {!open ? (
          <p className="text-sm font-semibold text-center">
            No active object found
          </p>
        ) : (
          <div className="space-y-4">
            <CommonPanel />
          </div>
        )}
      </ScrollArea>
    </div>
  );
}