import CircleIcon from "@/assets/icons/circle.svg";
import SquareIcon from "@/assets/icons/square.svg";
import StarIcon from "@/assets/icons/Star.svg";
import TriangleIcon from "@/assets/icons/triangle.svg";
import { Switch } from "@/components/ui/switch";
import { clx } from "@/helpers/utils";
import { useEditorStore } from "@/pages/editor/store/editorStore";
import { useShapeStore, type ShapeType } from "@/pages/editor/store/shapeStore";
import { ArrowLeft, Brush, Minus, PenTool } from "iconsax-react";
import { type FC } from "react";
import CustomShapeInstruction from "./CustomShapeInstruction";
import PencilInstruction from "./PencilInstruction";

const shapeOptions: Array<{ id: ShapeType; label: string; icon: string; alt: string }> = [
  { id: "square", label: "مربع", icon: SquareIcon, alt: "square" },
  { id: "circle", label: "دایره", icon: CircleIcon, alt: "circle" },
  { id: "triangle", label: "مثلث", icon: TriangleIcon, alt: "triangle" },
  { id: "abstract", label: "انتزاعی", icon: StarIcon, alt: "abstract" },
];

const drawOptions = [
  { tool: "pencil" as const, label: "قلم", Icon: Brush },
  { tool: "line" as const, label: "خط", Icon: Minus },
  { tool: "arrow" as const, label: "پیکان", Icon: ArrowLeft },
  { tool: "custom-shape" as const, label: "سفارشی", Icon: PenTool },
];

const RectangleInstruction: FC = () => {
  const tool = useEditorStore((state) => state.tool);
  const setTool = useEditorStore((state) => state.setTool);
  const { activeShape, setActiveShape, useAsMask, setUseAsMask } = useShapeStore();

  const handleShapeClick = (shapeId: ShapeType) => {
    setActiveShape(shapeId);
    setTool("rectangle");
  };

  return (
    <div>
      <h2 className="font-bold">اشکال</h2>

      <div className="mt-7 flex flex-wrap gap-3 text-[#B2B2B2]">
        {shapeOptions.map((shape) => {
          const isActive = tool === "rectangle" && activeShape === shape.id;
          return (
            <button
              type="button"
              key={shape.id}
              onClick={() => handleShapeClick(shape.id)}
              className={clx("size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors", isActive ? "" : "border-transparent")}
              aria-pressed={isActive}
            >
              <img src={shape.icon} alt={shape.alt} className={clx("w-6", isActive && "filterBlack")} />
              <div className={clx(isActive ? "text-black" : "text-[#7A7A7A]")}>{shape.label}</div>
            </button>
          );
        })}
        {drawOptions.map(({ tool: drawTool, label, Icon }) => {
          const isActive = tool === drawTool;
          return (
            <button
              type="button"
              key={drawTool}
              onClick={() => setTool(drawTool)}
              className={clx("size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors", isActive ? "" : "border-transparent")}
              aria-pressed={isActive}
            >
              <Icon size={24} color={isActive ? "black" : "#7A7A7A"} variant={isActive ? "Bold" : "Outline"} />
              <div className={clx(isActive ? "text-black" : "text-[#7A7A7A]")}>{label}</div>
            </button>
          );
        })}
      </div>

      {tool === "rectangle" && (
        <div className="mt-9 flex items-center justify-between">
          <div className="text-[13px]">استفاده برای ماسک</div>
          <Switch checked={useAsMask} onCheckedChange={setUseAsMask} />
        </div>
      )}

      {(tool === "line" || tool === "arrow") && (
        <p className="mt-9 text-sm text-gray-600">{tool === "line" ? "برای رسم خط، روی کانوس کلیک کرده و بکشید" : "برای رسم پیکان، روی کانوس کلیک کرده و بکشید"}</p>
      )}

      {tool === "pencil" && <PencilInstruction />}

      {tool === "custom-shape" && (
        <div className="mt-9">
          <CustomShapeInstruction />
        </div>
      )}
    </div>
  );
};

export default RectangleInstruction;
