import { Edit, Trash2 } from "lucide-react";
import { toast } from "sonner";

type ProductImageActionsProps = {
    productId: string | number;
    uploadedImage: any;
    isUploading: boolean;

    getImageQuantity: (imageId: number | string) => number;
    increaseQuantity: (imageId: number) => void;
    decreaseQuantity: (imageId: number) => void;

    handleDeleteImage: (imageId: number) => void;
    openCropModal: (img: any) => void;
};

export default function ProductImageActions({
                                                productId,
                                                uploadedImage,
                                                isUploading,
                                                getImageQuantity,
                                                increaseQuantity,
                                                decreaseQuantity,
                                                handleDeleteImage,
                                                openCropModal,
                                            }: ProductImageActionsProps) {
    return (
        <div className="flex flex-col items-center gap-3 mt-4" style={{ width: "100%" }}>
            <div className="flex items-center justify-center gap-4 px-3 py-2 w-full">
                {Number(productId) !== 1 && (
                    <>
                        <button
                            onClick={() => decreaseQuantity(uploadedImage.id)}
                            className="cursor-pointer w-6 h-6 bg-[#FFE7F0] text-[#FF2B77] rounded-full flex items-center justify-center hover:bg-pink-100 transition-colors text-lg leading-none"
                        >
                            -
                        </button>

                        <div className="flex flex-col items-center mx-2">
              <span className="text-lg font-semibold text-gray-800">
                {getImageQuantity(uploadedImage.id)}
              </span>
                        </div>

                        <button
                            onClick={() => increaseQuantity(uploadedImage.id)}
                            className="cursor-pointer w-6 h-6 bg-[#FF2B77] text-white rounded-full flex items-center justify-center hover:bg-pink-600 transition-colors leading-none"
                        >
                            +
                        </button>
                    </>
                )}

                <Trash2
                    size={20}
                    onClick={() => {
                        if (uploadedImage.uploadStatus === "uploading") {
                            toast.info("يرجى الانتظار حتى اكتمال الرفع");
                            return;
                        }

                        handleDeleteImage(uploadedImage.id);
                    }}
                    className="cursor-pointer text-primary transition-colors"
                />

                {Number(productId) !== 1 && (
                    <Edit
                        size={20}
                        onClick={() => {
                            if (isUploading) {
                                toast.info("يرجى الانتظار حتى اكتمال رفع الصورة");
                                return;
                            }

                            openCropModal(uploadedImage);
                        }}
                        className="cursor-pointer text-primary transition-colors"
                    />
                )}
            </div>
        </div>
    );
}