import { clx } from "@/helpers/utils";
import {
    Gallery,
    Grid8,
    MouseSquare,
    Shapes,
    Sticker,
    Text,
    VideoSquare,
    Music,
    Link2,
} from "iconsax-react";
import type { ToolType } from "../../store/editorStore";

const tools: Array<{ icon: (color: string, variant?: "Bold" | "Outline" | "Broken" | "Bulk" | "Linear" | "TwoTone") => React.ReactNode; tool: ToolType; label: string }> = [
    { icon: (color, variant) => <MouseSquare size={20} color={color} variant={variant} />, tool: "select", label: "انتخاب" },
    { icon: (color, variant) => <Shapes size={20} color={color} variant={variant} />, tool: "rectangle", label: "اشکال" },
    { icon: (color, variant) => <Text size={20} color={color} variant={variant} />, tool: "text", label: "متن" },
    { icon: (color, variant) => <Grid8 size={20} color={color} variant={variant} />, tool: "grid", label: "گرید" },
    { icon: (color, variant) => <Gallery size={20} color={color} variant={variant} />, tool: "image", label: "گالری" },
    { icon: (color, variant) => <Link2 size={20} color={color} variant={variant} />, tool: "link", label: "لینک" },
    { icon: (color, variant) => <VideoSquare size={20} color={color} variant={variant} />, tool: "video", label: "ویدیو" },
    { icon: (color, variant) => <Music size={20} color={color} variant={variant} />, tool: "audio", label: "صدا" },
    { icon: (color, variant) => <Sticker size={20} color={color} variant={variant} />, tool: "sticker", label: "استیکر" },
];

type ToolsBarProps = {
    tool: ToolType;
    onToolClick: (tool: ToolType) => void;
};

const ToolsBar = ({ tool, onToolClick }: ToolsBarProps) => {
    return (
        <div className="flex h-full max-w-[72px] flex-1 flex-col items-center gap-4 overflow-y-auto border-l border-border py-2">
            {tools.map((item, index) => {
                const isActive =
                    item.tool === "rectangle"
                        ? tool === "rectangle" || tool === "line" || tool === "arrow" || tool === "custom-shape" || tool === "pencil"
                        : tool === item.tool;
                const iconColor = "black";
                const iconVariant: "Bold" | "Outline" | "Broken" | "Bulk" | "Linear" | "TwoTone" | undefined = isActive ? "Bold" : "Outline";
                return (
                    <button
                        key={index}
                        onClick={() => onToolClick(item.tool)}
                        className={clx(
                            "min-h-10 w-10 flex items-center justify-center rounded-lg transition-colors text-black",
                            // isActive
                            //     ? "bg-black text-white"
                            //     : "hover:bg-gray-100 text-black",
                        )}
                        title={item.label}
                    >
                        {item.icon(iconColor, iconVariant)}
                    </button>
                );
            })}
        </div>
    );
};

export default ToolsBar;