const DISABLED = "disabledButton";

const app = new Vue({
    el: "#app",
    data: {
        cart: 0,
        description: "Chaussettes montantes",
        details: [
          "80% cotton",
          "20% polyester",
          "Gender-neutral",
        ],
        image: "./assets/img/vmSocks-green-onWhite.jpg",
        inventory: 15,
        link: "https://www.google.com/search?q=vuejs+socks",
        onSale: false,
        product: "Socks",
        sizes: [32, 34, 36, 38, 40, 42, 44, 46, 48],
        variants: [
            { variantId: 2234, variantColor: "green", variantImage: "./assets/img/vmSocks-green-onWhite.jpg", },
            { variantId: 2235, variantColor: "blue",  variantImage: "./assets/img/vmSocks-blue-onWhite.png", },
        ]
    },
    methods: {
        addToCart(mouseEvent) {
            const target = mouseEvent.target;
            if (this.inventory <= 0) {
                if (this.inventory < 0) {
                    this.inventory = 0;
                }
                return;
            }
            this.inventory--;
            this.cart++;
            if (this.inventory <= 0) {
                this.inventory = 0;
            }
        },
        removeFromCart(mouseEvent) {
            const target = mouseEvent.target;
            if (this.cart <= 0) {
                if (this.cart < 0) {
                    this.cart = 0;
                }
            }
            this.inventory++;
            this.cart--;
            if (this.cart <= 0) {
                this.cart = 0;
            }
        },
        updateImage(imageSrc) {
            this.image = imageSrc;
        }
    },
});