import { type FC } from "react";
import SquareIcon from "@/assets/icons/square.svg";
import CircleIcon from "@/assets/icons/circle.svg";
import TriangleIcon from "@/assets/icons/triangle.svg";
import StarIcon from "@/assets/icons/Star.svg";
import { Switch } from "@/components/ui/switch";
import { clx } from "@/helpers/utils";
import { useShapeStore, type ShapeType } from "@/pages/editor/store/shapeStore";

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 RectangleInstruction: FC = () => {
    const { activeShape, setActiveShape, useAsMask, setUseAsMask } = useShapeStore();

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

            <div className="mt-7 flex flex-wrap gap-3 text-[#B2B2B2]">
                {shapeOptions.map((shape) => {
                    const isActive = activeShape === shape.id;
                    return (
                        <button
                            type="button"
                            key={shape.id}
                            onClick={() => setActiveShape(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>
                    );
                })}
            </div>

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

export default RectangleInstruction;