/***********************************************************************************

									  Vars

***********************************************************************************/
var pp_file = null;
var pp_id = null;
var customDesignUploadId = null;

/***********************************************************************************

									 Canvas

***********************************************************************************/
var canvas = new fabric.Canvas("canvas");
var canvasWidth = $(".slider-right").width();

// assuming printfile has a width of 2000

if (custom_design.base_on_printfile) {
    var image_width = 2000;
    var image_height = 3000;
} else {
    var image_width = 2000;
    var image_height = 3000;
}

var mockupsAdded = false;
var objectsAdded = false;

if (canvasWidth > 400) {
    var left = (canvasWidth - 400) / 2;

    canvasWidth = 400;
    canvas.setWidth(canvasWidth);
    canvas.setHeight((canvasWidth / 2) * 3);
    //$(".canvas-container").css("margin-left", left);
} else {
    canvas.setWidth(canvasWidth);
    canvas.setHeight((canvasWidth / 2) * 3);
}

var scale = canvasWidth / image_width;
settings.scale = scale;

var allDone = false;

var objectList = createObjects();
var mockupList = createMockups();

addMockups(mockupList);

if (hasBackground()) addObjects(objectList, custom_design.objects, true);
else addObjects(objectList, custom_design.objects, false);

setFonts();
bringMockupToFront();

function hasBackground() {
    var hasbackground = false;

    $(custom_design.objects).each(function (i, l) {
        if (l.type === "background") {
            hasbackground = true;
        }
    });

    if (hasbackground) {
        $(".btn-bg").css("background-color", "grey");
        $(".btn-bg").css("pointer-events", "none");
    }

    return hasbackground;
}

function getBackgroundColor() {
    var background_color = false;

    $(custom_design.objects).each(function (i, l) {
        if (l.type === "background") {
            background_color = true;
        }
    });

    return background_color;
}

/***********************************************************************************

								Mockup & Prinfile

***********************************************************************************/
function centerMockup(mockup) {
    if (objectsAdded && mockupsAdded) {
        var currentWidth = mockup.width * mockup.scaleX;
        var mleft = (canvasWidth - currentWidth) / 2;

        mleft = mleft - 1;
        currentWidth = currentWidth - 1;

        $(".canvas-container").css("height", canvas.height - 1);
        $(".canvas-container").css("width", currentWidth - mleft / 2);
        $(".canvas-container").css("overflow", "hidden");

        if (vars.case_type !== "crossbody") {
            $("#canvas").css("margin-left", mleft * -1.1);
            $(".upper-canvas").css("margin-left", mleft * -1.1);
        }

        mockup.set({ left: mleft });
        canvas.renderAll();

        //bringMockupToFront();
        if (vars.case_type === "transparentwithrope") {
            setPad(mockup);
        }
        return mockup;
    } else {
        setTimeout(function () {
            centerMockup(centerMockup);
        }, 500);
    }
}

function getPad() {
    let objects = canvas.getObjects();
    var found = null;

    $(objects).each(function (i, l) {
        if (l.id === "pad") {
            found = l;
        }
    });

    return found;
}

function setPad(mockup) {
    var pad = getPad();

    // set width & center
    pad.scaleToWidth(vars.width * mockup.scaleX * 0.9);
    canvas.centerObject(pad);

    // calc top
    var m_height = mockup.height * mockup.scaleX;
    var m_offset = vars.offset_y * mockup.scaleX;
    var m_top = mockup.top * -1;
    var p_height = pad.height * pad.scaleX;
    var top = m_height - m_offset - m_top - p_height;
    pad.top = top;
}

function bringMockupToFront() {
    mockup = getColorBackground();

    if (!mockup) {
        setTimeout(function () {
            bringMockupToFront();
        }, 500);
    } else {
        if (vars.offset_y > 500) {
            var up = 0.1;
            var offsetScale = 1;
        } else if (vars.offset_y > 250) {
            var up = 0.2;
            var offsetScale = 1.2;
        } else if (vars.offset_y > 150) {
            var up = 0.8;
            var offsetScale = 0.35;
        } else if (vars.offset_y < 60) {
            var up = 0;
            var offsetScale = 2;
        } else {
            var up = 0.5;
            var offsetScale = 1;
        }

        var border_size = 0;
        var newScale =
            canvas.height / (vars.height + vars.offset_y * offsetScale);

        var left = vars.offset_x * up * newScale * -1;
        var top = vars.offset_y * up * newScale * -1;

        mockup.set({ scaleX: newScale });
        mockup.set({ scaleY: newScale });
        mockup.set({ left: left });
        mockup.set({ top: top });

        canvas.bringToFront(mockup);
        centerMockup(mockup);

        if (vars.transparent) {
            var foreground = getColorForeground();

            if (!foreground) {
                setTimeout(function () {
                    bringMockupToFront();
                }, 500);
            } else {
                foreground.set({ scaleX: newScale });
                foreground.set({ scaleY: newScale });
                foreground.set({ left: left });
                foreground.set({ top: top });
                centerMockup(foreground);
            }
        }

        setFonts();
    }
}

/***********************************************************************************

							Add mockup and background

***********************************************************************************/
function createMockups() {
    let mockupList = [];

    if (vars.transparent) {
        fabric.Image.fromURL(vars.background, function (mockup_background) {
            mockup_background = mockup_background.set({
                left: 0,
                top: 0,
                selectable: false,
                id: "mockup_background",
                objectCaching: false,
                dragable: false,
                type: "image",
            });

            mockup_background.scaleToHeight(canvas.height);
            //mockup_background = centerMockup(mockup_background);
            mockupList.push(mockup_background);
        });
    }

    if (vars.case_type === "transparentwithrope") {
        fabric.Image.fromURL(vars.pad, function (pad) {
            pad = pad.set({
                left: 0,
                top: 0,
                selectable: false,
                id: "pad",
                objectCaching: false,
                dragable: false,
                type: "image",
            });

            //pad.scaleToHeight(canvas.height);
            //pad = centerMockup(pad);
            mockupList.push(pad);
        });
    }

    if (vars.transparent && custom_design.transparent_background_image) {
        var image = custom_design.transparent_background_image;
    } else {
        var image = custom_design.background_image;
    }

    fabric.Image.fromURL(vars.image_path + image, function (background) {
        background = background.set({
            selectable: false,
            id: "background",
            objectCaching: false,
            dragable: false,
            type: "image",
        });
        background.scaleToWidth(canvasWidth);
        mockupList.push(background);
    });

    fabric.Image.fromURL(vars.mockup, function (mockup) {
        mockup = mockup.set({
            left: 0,
            top: 0,
            selectable: false,
            id: "mockup",
            objectCaching: false,
            dragable: false,
            type: "image",
        });
        mockup.scaleToHeight(canvas.height);
        //mockup.scaleToHeight(canvas.height + vars.offset_y * mockup.scaleX);
        //mockup = centerMockup(mockup);
        mockupList.push(mockup);
    });

    return mockupList;
}

/***********************************************************************************

									Add Objects

***********************************************************************************/
function createObjects() {
    let objectList = [];

    custom_design.objects.forEach(function (object, i) {
        if (object.type === "text") {
            var pos_x = getPositionX(object);
            var pos_y = getPositionY(object);
            var pos_left = image_width * scale * (object.percentage_x / 100);
            var pos_top = image_height * scale * (object.percentage_y / 100);

            var textObject = new fabric.Text(getText(object), {
                angle: object.rotation,
                originX: pos_x,
                originY: pos_y,
                left: pos_left,
                top: pos_top,
                fontSize:
                    calcFontsize(object.fontsize) *
                    object.placeholder_font_scale,
                selectable: false,
                objectCaching: false,
                dragable: false,
                fill: object.standard_color,
                id: "text_object_" + object.id,
                setFont: object.font,
                order: object.order,
                type: "text",
                object_id: object.id,
            });

            if (object.stroke != 0) {

                if(window.innerWidth < 900) {
                    var strokeWidth = (object.stroke - 1) / 2;
                } else {
                    var strokeWidth = object.stroke - 1;
                }
                
                textObject.set({
                    stroke: getStrokeColor(object),
                    strokeWidth: strokeWidth,
                    paintFirst: "stroke",
                });
            }

            textObject = checkTextWidth(textObject, object, null);
            objectList.push(textObject);
        } else if (object.type === "image") {
            // image
            if (object.image_options) {
                var option = null;

                object.image_options.forEach(function (opt, i) {
                    if (opt.default == 1) option = opt;
                });

                if (option) {
                    let file = vars.image_option_path + option.file;

                    fabric.util.loadImage(file, function (img) {
                        var image_option = new fabric.Image(img);

                        image_option.set({
                            selectable: false,
                            //dirty: true,
                            objectCaching: true,
                            dragable: false,
                            id: "image_object_" + object.id,
                            originX: getPositionX(object),
                            originY: getPositionY(object),
                            angle: object.rotation,
                            left:
                                image_width *
                                scale *
                                (object.percentage_x / 100),
                            top:
                                image_height *
                                scale *
                                (object.percentage_y / 100),
                            order: object.order,
                            type: "image",
                            object_id: object.id,
                            imageSmoothing: true,
                            listen_to: object.listen_to,
                        });

                        image_option.scaleToWidth(
                            image_width *
                                scale *
                                (object.percentage_width / 100)
                        );
                        objectList.push(image_option);
                    });
                } else {
                    let file = vars.empty;

                    fabric.util.loadImage(file, function (img) {
                        var image_option = new fabric.Image(img);

                        image_option.set({
                            selectable: false,
                            //dirty: true,
                            objectCaching: false,
                            dragable: false,
                            id: "image_object_" + object.id,
                            originX: getPositionX(object),
                            originY: getPositionY(object),
                            angle: object.rotation,
                            left:
                                image_width *
                                scale *
                                (object.percentage_x / 100),
                            top:
                                image_height *
                                scale *
                                (object.percentage_y / 100),
                            order: object.order,
                            type: "image",
                            object_id: object.id,
                        });

                        image_option.scaleToWidth(
                            image_width *
                                scale *
                                (object.percentage_width / 100)
                        );
                        objectList.push(image_option);
                    });
                }
            }
        } else if (object.type === "background") {
            let bg_color = getDefaultBackground(object);

            if (bg_color) {
                var rect = new fabric.Rect({
                    left: 0,
                    top: 0,
                    width: 2000,
                    height: 3000,
                    fill: bg_color,
                    angle: 0,
                    padding: 0,
                    type: "background",
                    id: "background",
                    order: 0,
                });

                objectList.push(rect);
            }
        }
    });

    return objectList;
}

function getDefaultBackground(object) {
    if (object.colors) {
        var color = false;

        $(object.colors).each(function (i, l) {
            if (l.default == 1) {
                color = l.color_code;
            }
        });

        if (!color) {
            if (vars.transparent) {
                return "transparent";
            } else {
                if (object.colors.length > 0) {
                    return object.colors[0].color_code;
                } else {
                    return "transparent";
                }
            }
        } else {
            return color;
        }
    } else {
        return "white";
    }
}

function getStrokeColor(object) {
    if (object.stroke_color) {
        return "#" + object.stroke_color;
    } else {
        return object.standard_color;
    }

    // if(object.stroke_color) {
    // 	return object.stroke_color;
    // } else {
    // 	return object.standard_color;
    // }
}

function addMockups(mockupList) {
    objects = canvas.getObjects();

    if (vars.transparent) var count = 3;
    else var count = 2;

    if (vars.case_type === "transparentwithrope") var count = 4;
    else if (vars.transparent) var count = 3;
    else var count = 2;

    if (mockupList.length != count) {
        setTimeout(function () {
            addMockups(mockupList);
        }, 500);
    } else {
        mockupList = orderMockups(mockupList);

        $(mockupList).each(function (i, l) {
            canvas.add(l);
        });

        mockupsAdded = true;
        //canvas.renderAll();
    }
}

function addObjects(objectList, db_items, hasBackground) {
    objects = canvas.getObjects();
    var objectLength = objectList.length;

    //if(hasBackground)	objectLength = objectLength + 1;

    if (objectList.length != db_items.length || !mockupsAdded) {
        setTimeout(function () {
            addObjects(objectList, db_items, hasBackground);
        }, 500);
    } else {
        objectList = orderObjects(objectList);
        $(objectList).each(function (i, l) {
            canvas.add(l);
        });

        objectsAdded = true;
        allDone = true;

        setFonts();
        //canvas.renderAll();
    }
}

function orderObjects(list) {
    list.sort((a, b) => (a.order > b.order ? 1 : -1));
    return list;
}

function orderMockups(list) {
    var items = [];

    if (vars.transparent) {
        $(list).each(function (i, l) {
            if (l.id === "mockup_background") {
                items.push(l);
            }
        });
    }

    $(list).each(function (i, l) {
        if (l.id === "pad") {
            items.push(l);
        }
    });

    $(list).each(function (i, l) {
        if (l.id === "background") {
            items.push(l);
        }
    });

    $(list).each(function (i, l) {
        if (l.id === "mockup") {
            items.push(l);
        }
    });

    return items;
}

/***********************************************************************************

							Object calculations & functions

***********************************************************************************/
function setFonts() {
    // get text objects
    var objects = canvas.getObjects();

    if (objects.length == 0) {
        setTimeout(function () {
            setFonts();
        }, 500);
    } else {
        $(objects).each(function (i, l) {
            if (l.type === "text") {
                var db_object = getMatchingObject(l.object_id);
                var text = l.text;
                var tempText = " " + l.text + " ";
                l.fontFamily = l.setFont;

                text = text.replace("[(", "");
                text = text.replace("(]", "");
                text = text.replace("[+", "");
                text = text.replace("+]", "");
                text = text.replace("(", "");
                text = text.replace(")", "");
                text = text.replace(" likes", "");

                updateCanvasObject(db_object, "text", tempText, "text");
                updateCanvasObject(db_object, "text", text, "text");
            }
        });

        canvas.renderAll();
    }
}

function getMatchingObject(object_id) {
    var db_obj = null;

    $(custom_design.objects).each(function (i, l) {
        if (l.type === "text" && l.id == object_id) {
            db_object = l;
        }
    });

    return db_object;
}

function getText(object) {
    if (!object.placeholder_text) return "";
    var text = "";

    if (object.prefix) text += object.prefix;
    if (object.uppercase) text += object.placeholder_text.toUpperCase();
    else text += object.placeholder_text;
    if (object.suffix) text += object.suffix;

    return text;
}

function getPositionX(object) {
    if (object.position_x_lcr == 1) return "left";
    else if (object.position_x_lcr == 2) return "center";
    else return "right";
}

function getPositionY(object) {
    if (object.position_y_tcb == 1) return "top";
    else if (object.position_y_tcb == 2) return "center";
    else return "bottom";
}

function getPositionXbyID(id) {
    if (id == 1) return "left";
    else if (id == 2) return "center";
    else return "right";
}

function getPositionYbyID(id) {
    if (id == 1) return "top";
    else if (id == 2) return "center";
    else return "bottom";
}

function calcFontsize(fontsize) {
    return fontsize * scale;
}

function getStandardColor(object) {
    var c = "#FFFFFF";
    /*
	colors.forEach(function(color, i)
	{
		if(object.standard_color_id == color.id)
		{
			c = color.color_code;
		}
	});
*/
    return c;
}

function getFont(object) {
    return "arial";
}

function checkWidth(object, db_settings) {
    return true;
}

/***********************************************************************************

									CANVAS CHANGES

***********************************************************************************/
function updateCanvasObject(db_object, type, value, canvas_setting) {
    showCanvas();

    var canvasObject = getCanvasObject(db_object, type);

    if (type === "text") {
        if (canvas_setting === "fill") {
            canvasObject.set({ fill: value });

            if (!db_object.stroke_color && db_object.stroke) {
                canvasObject.set({ stroke: value });
            }

            canvas.renderAll();
        } else {
            if (db_object.uppercase) value = value.toUpperCase();
            var prefix = db_object.prefix ? db_object.prefix : "";
            var suffix = db_object.suffix ? db_object.suffix : "";

            if (value && value !== " ") {
                value = prefix + value + suffix;
            }

            canvasObject.set({ text: value });
            checkTextWidth(canvasObject, db_object);
            canvas.renderAll();
        }
    } else if (type === "image") {
        var canvasObject = getCanvasObject(db_object, type);

        canvasObject.setSrc(value, function () {
            canvas.renderAll();
        });
    }
}

function checkTextWidth(canvasObject, db_object) {
    var fontsize = db_object.fontsize * scale;
    let max_width = image_width * scale * (db_object.max_width / 100);

    var fontsize_ok = false;

    do {
        canvasObject.set({ fontSize: fontsize });

        if (canvasObject.width <= max_width) {
            fontsize_ok = true;
        } else {
            fontsize--;
        }
    } while (!fontsize_ok);

    storeSettings("text", db_object, "fontsize", canvasObject.fontSize);
    return canvasObject;
}

function getCanvasObject(db_object, type) {
    let objects = canvas.getObjects();

    if (type === "text") object_id = "text_object_" + db_object.id;
    else object_id = "image_object_" + db_object.id;

    var found = null;

    $(objects).each(function (i, l) {
        if (l.id === object_id) {
            found = l;
        }
    });

    return found;
}

function getImageObject(object_id) {
    let objects = canvas.getObjects();
    object_id = "image_object_" + object_id;

    var found = null;

    $(objects).each(function (i, l) {
        if (l.id === object_id) {
            found = l;
        }
    });

    return found;
}

function getListeningObjects(object_id) {
    let objects = canvas.getObjects();
    let listeningObjects = [];

    $(objects).each(function (i, l) {
        if (l.listen_to == object_id) {
            listeningObjects.push(l);
        }
    });

    return listeningObjects;
}

function getBackgroundObject() {
    let objects = canvas.getObjects();

    var found = null;

    $(objects).each(function (i, l) {
        if (l.type === "background") {
            found = l;
        }
    });

    return found;
}

function testObject() {
    let objects = canvas.getObjects();

    var found = null;

    $(objects).each(function (i, l) {
        if (l.id === "text_object_52") {
            found = l;

            //var newWidth = l.width * 2;
            //var newLeft = 0;

            //l.set({width : newWidth});
            //canvas.renderAll();

            //l.initDimensions();
            canvas.renderAll();
        }
    });

    return found;
}

function testTextWidths() {
    let objects = canvas.getObjects();

    $(objects).each(function (i, l) {
        if (l.type === "text") {
            var testObject = new fabric.IText(l.text, {
                angle: l.rotation,
                fontFamily: l.fontFamily,
                objectCaching: false,
                dragable: false,
            });

            canvas.add(testObject);

            testObject.set({
                fontSize: l.fontSize,
                originX: l.originX,
                originY: l.originY,
                left: l.left,
                top: l.top,
            });

            var test = l.left + canvas.width + l.width;
            var shouldleft = (canvas.width - l.width) / 2 / scale;

            canvas.renderAll();
        }
    });
}

function getColorBackground() {
    let objects = canvas.getObjects();

    var found = null;

    $(objects).each(function (i, l) {
        if (l.id === "mockup") {
            found = l;
        }
    });

    return found;
}

function getColorForeground() {
    let objects = canvas.getObjects();

    var found = null;

    $(objects).each(function (i, l) {
        if (l.id === "mockup_background") {
            found = l;
        }
    });

    return found;
}

function getColorForeground() {
    let objects = canvas.getObjects();

    var found = null;

    $(objects).each(function (i, l) {
        if (l.id === "mockup_background") {
            found = l;
        }
    });

    return found;
}

/***********************************************************************************

									Functions

***********************************************************************************/

$(".image_option").on("click", function () {
    let object = JSON.parse($(this).attr("object"));
    let image_object = JSON.parse($(this).attr("image-object"));

    // switch state
    if ($(this).hasClass("selected-option")) {
        if (!object.required) {
            $(".image_options_" + object.id + " .image_option").removeClass(
                "selected-option"
            );

            storeSettings("image", object, "selected_option", null);
            updateCanvasObject(object, "image", vars.empty, "src");
        }
    } else {
        $(".image_options_" + object.id + " .image_option").removeClass(
            "selected-option"
        );
        $(this).addClass("selected-option");

        storeSettings("image", object, "selected_option", image_object.id);
        updateCanvasObject(
            object,
            "image",
            vars.image_option_path + image_object.file,
            "src"
        );
    }

    storeCustomDesign();
});

$(".cc-fr-dropdown").on("change", function (e) {
    let object = JSON.parse($(this).attr("object"));
    //let image_object = JSON.parse($(this).attr('image-object'));

    //var image_object = JSON.parse($('.image_dropdown_' + object.id).find(":selected").attr('image-object'));
    var image_object = $(".image_dropdown_" + object.id).val();

    var object_id = $(this).val();
    var image_object = null;

    // get image object
    $(object.image_options).each(function (i, l) {
        if (l.id == object_id) {
            image_object = l;
        }
    });

    storeSettings("image", object, "selected_option", image_object.id);
    updateCanvasObject(
        object,
        "image",
        vars.image_option_path + image_object.file,
        "src"
    );
});

$(".textobject_changed").on("keyup", function () {
    let object = JSON.parse($(this).attr("object"));
    let value = $(this).val();

    if(object.design_id == 87)
    {
        // deze tekens worden niet ondersteund door het font
        // Tsjechische tekens: čďěňřťůČĎŇŘŤŮ
        // Poolse tekens: ąćęłńśźżĄĆĘŁŃŚŹ
        // Sloveense/Kroatische tekens: Čćđ
        // Letse tekens: āēģīķļņūĀĒĢĪĶĻŅŪ
        // Hongaarse tekens: őűŐŰ
        // Ijsland: ÐðþÞ
        value = value.replace(/[^a-zA-ZÀ-ÿŒ-œŠ-šŽ-ž0-9 .&\-?!_',\/]|[Ð÷ðþÞčďěňřťůČĎŇŘŤŮąćęłńśźżąĆĄĘŁŃŚŹČćđāēģīķļņūĀĒĢĪĶĻŅŪőűŐŰ]/gm, "");
    }
    else
    {
        value = value.replace(/[^a-zA-ZÀ-ÿĀ-žŒ-œŠ-šŽ-ž0-9 .&\-?!_',\/]/gm, "");
    }
    
    $(this).val(value);

    updateCanvasObject(object, "text", value, "text");
    storeSettings("text", object, "text", value);

    checkLinkedItems(object, value);
});

function storeCustomDesign() {
    var url = "/cdstore";

    $.ajax({
        type: "POST",
        url: url,
        data: {
            design_id: custom_design.id,
            settings: JSON.stringify(settings),
        },
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        date: { _token: "{{ csrf_token() }}" },
    });
}

$(".textobject_changed").on("focusout", function () {
    let object = JSON.parse($(this).attr("object"));
    let value = $(this).val();

    value = value.replace(/[^a-zA-ZÀ-ÿĀ-žŒ-œŠ-šŽ-ž0-9 .&\-?!_',\/]/gm, "");
    $(this).val(value);

    var url = "/cddesigntext";

    $.ajax({
        type: "POST",
        url: url,
        data: {
            design_id: custom_design.id,
            object_id: object.id,
            text: JSON.stringify(value),
            custom_design: JSON.stringify(custom_design),
            settings: JSON.stringify(settings),
        },
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        date: { _token: "{{ csrf_token() }}" },
    });
});

function checkLinkedItems(object, value) {
    $(custom_design.objects).each(function (i, l) {
        if (l.type === "text" && l.listen_to == object.id) {
            updateCanvasObject(l, "text", value, "text");
        }
    });
}

$(".select_color").on("click", function () {
    let object = JSON.parse($(this).attr("object"));
    let value = $(this).attr("color_code");

    $(".color_selector_" + object.id + " .select_color").removeClass(
        "color-selected"
    );
    $(this).addClass("color-selected");
    updateCanvasObject(object, "text", value, "fill");
    storeSettings("text", object, "color", value);

    storeCustomDesign();
});

$(".phone-color-button").on("click", function (e) {
    let background = $(this).attr("background");
    let foreground = $(this).attr("foreground");

    // canvas object
    let color_background = getColorBackground();

    color_background.setSrc(foreground, function () {
        //color_foreground.set('dirty', false);
        canvas.renderAll();
    });

    let color_foreground = getColorForeground();

    color_foreground.setSrc(background, function () {
        //color_foreground.set('dirty', false);
        canvas.renderAll();
    });

    storeCustomDesign();
});

/***********************************************************************************

									Store settings

***********************************************************************************/
function storeSettings(type, object, key, value) {
    if (type === "text") {
        settings.objects["text_" + object.id][key] = value;
    } else {
        settings.objects["image_" + object.id][key] = value;
    }
}

function showCanvas() {
    $("#canvas").show();
    $(".canvas-container").show();
    $(".main-image").hide();
}
/*
$('.image_option').on('click', function()
{

	let object = JSON.parse($(this).attr('object'));
	let image_object = JSON.parse($(this).attr('image-object'));

	// switch state
	if($(this).hasClass('selected-option'))
	{
		if(!object.required)
		{
			$('.image_options_' + object.id + ' .image_option').removeClass('selected-option');

			storeSettings('image', object, 'selected_option', null);
			updateCanvasObject(object, 'image', vars.empty, 'src');
		}
	}
	else
	{
		$('.image_options_' + object.id + ' .image_option').removeClass('selected-option');
		$(this).addClass('selected-option');

		storeSettings('image', object, 'selected_option', image_object.id);
		updateCanvasObject(object, 'image', vars.image_option_path + image_object.file, 'src');
	}
});
*/
$(".select-background").on("click", function () {
    $(".select-background").removeClass("background-default");
    $(this).addClass("background-default");

    if ($(this).hasClass("img-background")) {
        // set background color to null
        settings.background_color = null;
        var object = getBackgroundObject();
        object.set({ fill: "transparent" });

        // set image object
        let img_object = JSON.parse($(this).attr("object"));
        let image_object = JSON.parse($(this).attr("image-object"));

        storeSettings("image", img_object, "selected_option", image_object.id);
        updateCanvasObject(
            img_object,
            "image",
            vars.image_option_path + image_object.file,
            "src"
        );
    } else {
        let color = $(this).attr("color");
        var object = getBackgroundObject();

        if (color === "transparent") {
            object.set({ fill: "transparent" });
            settings.background_color = null;
        } else {
            object.set({ fill: color });
            settings.background_color = color;
        }

        // show Canvas
        showCanvas();

        // unset image objects that are used as background
        $(custom_design.objects).each(function (i, l) {
            if (l.type === "image") {
                if (l.is_background == 1) {
                    var object = l;
                    storeSettings("image", object, "selected_option", null);
                    updateCanvasObject(object, "image", vars.empty, "src");
                }
            }
        });
    }

    storeCustomDesign();
    canvas.renderAll();
});

var uploadCrop = null;

// file upload
$(document).on("change", ".upload-file", function (e) {
    e.preventDefault();

    let id = $(this).attr("object_id");
    $(".loading-panel").show();

    showCanvas();
    let cutout = false;
    let removeBackground = false;
    let object = getImageObject(id);

    var formData = new FormData();
    formData.append("file", $(this)[0].files[0]);
    formData.append("object_id", id);

    if ($(this).hasClass("cutout-image")) {
        cutout = true;
        formData.append("cutout", cutout);
        formData.append("width", object.width);
        formData.append("height", object.height);
        cutout_images_count++;
    } else if ($(this).hasClass("remove-background-image")) {
        removeBackground = true;
        formData.append("removebackground", removeBackground);
        formData.append("width", object.width);
        formData.append("height", object.height);
        remove_background_images_count++;

    } else {
        cutout = false;
        formData.append("cutout", cutout);
        formData.append("width", object.width);
        formData.append("height", object.height);
    }

    let url = "/api/upload";

    $.ajax({
        url: url,
        type: "POST",
        data: formData,
        processData: false, // tell jQuery not to process the data
        contentType: false, // tell jQuery not to set contentType
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        date: { _token: "{{ csrf_token() }}" },
    }).done(function (resp) {
        if (resp.success) {
            if (cutout) {
                pp_file = resp.file;
                pp_id = id;
                loadCutoutApiImage(id, pp_file);
                customDesignUploadId = null;
            } else if(removeBackground) {
                pp_file = resp.file;
                pp_id = id;
                //loadCutoutApiImage(id, pp_file);
                customDesignUploadId = null;
                openPP();
            } else {
                pp_file = resp.file;
                pp_id = id;
                customDesignUploadId = resp.id;
                openPP();
            }

            $(".error-" + id).hide();
        } else {
            $(".error-" + id).show();
        }

        $(".loading-panel").hide();
    });
});

function loadCutoutApiImage(object_id, file) {
    let object = getImageObject(object_id);
    let listeningObjects = getListeningObjects(object_id);

    let width = object.width;
    let height = object.height;

    object.setSrc(file, function () {
        object.set({ width: width });
        object.set({ height: height });
        canvas.renderAll();
    });

    settings.objects["image_" + object_id].upload = file;

    $(listeningObjects).each(function (i, l) {
        l.setSrc(file, function () {
            l.set({ width: width });
            l.set({ height: height });

            settings.objects["image_" + l.object_id].upload = file;
            canvas.renderAll();
        });
    });

    canvas.renderAll();

    $(".example_" + pp_id + " img").attr("src", pp_file);
    $(".example_" + pp_id).show();
    $(".open_example_" + object_id).attr("uploaded", 1);
}

function openPP() {
    disableScroll();
    $("#crop-img").croppie("destroy");
    let object = getImageObject(pp_id);

    $("#crop-img").attr("src", pp_file);
    $("#crop-img").show();

    if ($(window).width() >= 600 && $(window).height() > 400) {
        if (object.width > object.height) {
            let ratio = object.width / object.height;

            var viewport_width = 350;
            var viewport_height = Math.ceil(350 / ratio);
        } else {
            let ratio = object.height / object.width;
            var viewport_width = Math.ceil(350 / ratio);
            var viewport_height = 350;
        }

        var extrawidth = 100;
    } else {
        if (object.width > object.height) {
            let ratio = object.width / object.height;
            var viewport_width = $(window).width() - 50;
            var viewport_height = Math.ceil(($(window).width() - 50) / ratio);
        } else {
            let ratio = object.height / object.width;

            var viewport_width = Math.ceil(($(window).width() - 50) / ratio);
            var viewport_height = $(window).width() - 50;
        }

        if ($(window).width() > $(window).height()) {
            viewport_width = viewport_width / 4;
            viewport_height = viewport_height / 4;
            var extrawidth = 20;
        } else {
            var extrawidth = 50;
        }
    }

    uploadCrop = $("#crop-img").croppie({
        viewport: { width: viewport_width, height: viewport_height },
        boundary: {
            width: viewport_width + extrawidth,
            height: viewport_height + extrawidth,
        },
        enableOrientation: true,
        showZoomer: false,
        mouseWheelZoom: "ctrl",
    });

    $(".crpp").show();
    $(".finish-img").attr("object_id", pp_id);

    $(".example_" + pp_id + " img").attr("src", pp_file);
    $(".example_" + pp_id).show();
}

$(".open_example").on("click", function (e) {
    e.preventDefault();

    let id = $(this).attr("object_id");

    var src = $('.open_example_' + id + ' img').attr("src");
    src = src.split("/");
    let filename = src[src.length - 1];

    let url = "/api/getcustomdesignimage/" + filename;

    $.ajax({
        type: "GET",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        date: {
            _token: "{{ csrf_token() }}",
        },
        url: url,
    }).done(function (response) {
        
        if(response) {
            var src = response;
        } else {
            var src = $(".open_example_" + id + " img").attr("src");
        }

        pp_file = src;
        pp_id = id;

        $("#crop-img").attr("src", src);
        $("#crop-img").show();

        openPP();
    });
});

$(".finish-img").on("click", function (e) {
    e.preventDefault();

    let object_id = $(".finish-img").attr("object_id");
    let object = getImageObject(object_id);

    let full_width = 1;

    uploadCrop
        .croppie("result", {
            type: "base64",
            size: "original",
        })
        .then(function (result) {
            let url = "/api/uploadcrop";

            var formData = new FormData();
            formData.append("file", result);
            formData.append("object_id", object_id);
            formData.append("width", object.width);
            formData.append("upload_id", customDesignUploadId);

            // todo add the ID of the image (cc_custom_design_uploads)

            if (result.length < 4050) {
                $([document.documentElement, document.body]).animate(
                    {
                        scrollTop: $("body").offset().top,
                    },
                    200
                );
                $(".pp-overlay").show();
                $(".popup-empty-image").show();
            } else {
                $(".loading-panel").show();

                $.ajax({
                    url: url,
                    type: "POST",
                    data: formData,
                    processData: false, // tell jQuery not to process the data
                    contentType: false, // tell jQuery not to set contentType
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                            "content"
                        ),
                    },
                    date: { _token: "{{ csrf_token() }}" },
                }).done(function (resp) {
                    let object = getImageObject(object_id);
                    let listeningObjects = getListeningObjects(object_id);

                    let width = object.width;
                    let height = object.height;

                    object.setSrc(resp.file, function () {
                        //object.scaleToWidth(width);
                        object.set({ width: width });
                        object.set({ height: height });
                        object.set({ selectable: true });
                        object.set({ draggable: true });
                        object.set({ dragable: true });

                        canvas.renderAll();
                    });

                    settings.objects["image_" + object_id].upload = resp.file;

                    $(listeningObjects).each(function (i, l) {
                        l.setSrc(resp.file, function () {
                            //object.scaleToWidth(width);
                            l.set({ width: width });
                            l.set({ height: height });
                            l.set({ selectable: true });
                            l.set({ draggable: true });
                            l.set({ dragable: true });

                            settings.objects["image_" + l.object_id].upload =
                                resp.file;

                            canvas.renderAll();
                        });
                    });

                    $(".crpp").hide();
                    $("#crop-img").croppie("destroy");
                    enableScroll();

                    $(".loading-panel").hide();
                    $(".open_example_" + object_id).attr("uploaded", 1);

                    custom_design_upload_count++;
                });
            }
        });
});

$(".crop-overlay").on("click", function () {
    //$('.crpp').hide();
    //enableScroll();
    //$('#crop-img').croppie('destroy');
});

$(".close-pp").on("click", function (e) {
    e.preventDefault();
    $(".crpp").hide();
    enableScroll();
    $("#crop-img").croppie("destroy");
});

$(".croppie-zoom").on("click", function (e) {
    e.preventDefault();
    if ($(this).hasClass("croppie-plus")) {
        uploadCrop.croppie(
            "setZoom",
            uploadCrop.croppie("get", "zoom")["zoom"] + 0.015
        );
    } else {
        uploadCrop.croppie(
            "setZoom",
            uploadCrop.croppie("get", "zoom")["zoom"] - 0.015
        );
    }
});

$(".croppie-rotation").on("click", function (e) {
    e.preventDefault();

    if ($(this).hasClass("croppie-left")) {
        uploadCrop.croppie("rotate", 90);
    } else {
        uploadCrop.croppie("rotate", -90);
    }
});

$("body").on("click", ".upload-new", function (e) {
    e.preventDefault();

    let objectId = $(this).attr("object_id");
    let cl = "upload-file-" + objectId;

    if ($(this).hasClass("cutout-image")) {
        if (!cutout_images_count) {
            triggerUpload(cl);
        } else {
            $(".loading-panel").show();
            let url = "/api/getcutoutimages";

            $.ajax({
                type: "GET",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                        "content"
                    ),
                },
                date: {
                    _token: "{{ csrf_token() }}",
                },
                url: url,
            }).done(function (response) {
                $(".upload-new-cutout").attr("object_id", objectId);
                showCutoutPopup();
                $(".loading-panel").hide();
            });
        }
    } else if ($(this).hasClass("remove-background-image")) {
        if (!remove_background_images_count) {
            triggerUpload(cl);
        } else {
            $(".loading-panel").show();
            let url = "/api/getremovebackgroundimages";

            $.ajax({
                type: "GET",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                        "content"
                    ),
                },
                date: {
                    _token: "{{ csrf_token() }}",
                },
                url: url,
            }).done(function (response) {
                $(".upload-new-cutout").attr("object_id", objectId);
                showRemoveBackgroundPopup();
                $(".loading-panel").hide();
            });
        }
    } else {
        if (!custom_design_upload_count) {
            triggerUpload(cl);
        } else {
            $(".loading-panel").show();
            let url = "/api/getcustomdesignuploads";

            $.ajax({
                type: "GET",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                        "content"
                    ),
                },
                date: {
                    _token: "{{ csrf_token() }}",
                },
                url: url,
            }).done(function (response) {
                $(".upload-new-cutout").attr("object_id", objectId);
                showCustomDesignUploadPopup();
                $(".loading-panel").hide();
            });
        }
    }
});

$(document).on("click", ".upload-new-cutout", function (e) {
    e.preventDefault();
    let cl = "upload-file-" + $(this).attr("object_id");
    triggerUpload(cl);
    $(".cutout-popup").hide();
    $(".overlay").hide();
});

function triggerUpload(id) {
    let submitBtn = document.getElementById(id);
    submitBtn.click();
}

$(window).resize(function (e) {
    delay(function () {
        if ($(".crpp").is(":visible")) {
            openPP();
        }
    }, 500);
});

var delay = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

function preventDefault(e) {
    e.preventDefault();
}

function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}

// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
    window.addEventListener(
        "test",
        null,
        Object.defineProperty({}, "passive", {
            get: function () {
                supportsPassive = true;
            },
        })
    );
} catch (e) {}

var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent =
    "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";

// call this to Disable
function disableScroll() {
    window.addEventListener("DOMMouseScroll", preventDefault, false); // older FF
    window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
    window.addEventListener("touchmove", preventDefault, wheelOpt); // mobile
    window.addEventListener("keydown", preventDefaultForScrollKeys, false);
}

// call this to Enable
function enableScroll() {
    window.removeEventListener("DOMMouseScroll", preventDefault, false);
    window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
    window.removeEventListener("touchmove", preventDefault, wheelOpt);
    window.removeEventListener("keydown", preventDefaultForScrollKeys, false);
}

function showCutoutPopup() {
    let url = "/api/getcutoutimages";

    $.ajax({
        type: "GET",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        date: {
            _token: "{{ csrf_token() }}",
        },

        url: url,
    }).done(function (response) {
        let html = "";

        $(response).each(function (i, l) {
            html = createHtmlLineForCutout(html, l);
        });

        $(".image-list").html(html);
        $(".cutout-popup").show();
        $(".overlay").show();
    });
}

function showRemoveBackgroundPopup() {
    let url = "/api/getremovebackgroundimages";

    $.ajax({
        type: "GET",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        date: {
            _token: "{{ csrf_token() }}",
        },

        url: url,
    }).done(function (response) {
        let html = "";

        $(response).each(function (i, l) {
            html = createHtmlLineForRemoveBackground(html, l);
        });

        $(".image-list").html(html);
        $(".cutout-popup").show();
        $(".overlay").show();
    });
}

function showCustomDesignUploadPopup() {
    let url = "/api/getcustomdesignuploads";

    $.ajax({
        type: "GET",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        date: {
            _token: "{{ csrf_token() }}",
        },

        url: url,
    }).done(function (response) {
        let html = "";

        $(response).each(function (i, l) {
            html = createHtmlLineForCustomDesignUpload(html, l);
        });

        $(".image-list").html(html);
        $(".custom-design-uploads-popup").show();
        $(".overlay").show();
    });
}

function createHtmlLineForCutout(html, l) {
    let imageUrl = "/uploads/cutout/original/";
    let className = "cutout-image-item cutout-image-item-";
    let classNameRemove = "remove-cutout-image";

    html +=
        '<a class="' +
        className +
        l.id +
        '" filename="' +
        l.filename +
        '"><span class="' +
        classNameRemove +
        '" cutout-id="' +
        l.id +
        '">✕</span><img src="' +
        imageUrl +
        l.filename +
        '"></a>';

    return html;
}

function createHtmlLineForRemoveBackground(html, l) {
    let imageUrl = "/uploads/removebackground/original/";
    let className = "removebackground-image-item remove-background-image-item-";
    let classNameRemove = "remove-removebackground-image";

    html +=
        '<a class="' +
        className +
        l.id +
        '" filename="' +
        l.filename +
        '"><span class="' +
        classNameRemove +
        '" cutout-id="' +
        l.id +
        '">✕</span><img src="' +
        imageUrl +
        l.filename +
        '"></a>';

    return html;
}

function createHtmlLineForCustomDesignUpload(html, l) {
    let className = "custom-design-image-item custom-design-image-item-";
    let classNameRemove = "remove-custom-design-image";

    html +=
        '<a class="' +
        className +
        l.id +
        '" filename="' +
        l.filename +
        '" image-id="'+ l.id +'"><span class="' +
        classNameRemove +
        '" image-id="' +
        l.id +
        '">✕</span><img src="' +
        l.imgUrl +
        '"></a>';

    return html;
}

$(document).on("click", ".remove-cutout-image", function (e) {
    e.preventDefault();

    let imageId = $(this).attr("cutout-id");
    let url = "/api/deletecutoutimage/" + imageId;

    $(".cutout-image-item-" + imageId).fadeOut();
    cutout_images_count--;

    $.ajax({
        type: "GET",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        date: {
            _token: "{{ csrf_token() }}",
        },
        url: url,
    });
});

$(document).on("click", ".remove-removebackground-image", function (e) {
    e.preventDefault();

    let imageId = $(this).attr("cutout-id");
    let url = "/api/deleteremovebackgroundimage/" + imageId;

    $(".removebackground-image-item-" + imageId).fadeOut();
    cutout_images_count--;

    $.ajax({
        type: "GET",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        date: {
            _token: "{{ csrf_token() }}",
        },
        url: url,
    });
});

$(document).on("click", ".remove-custom-design-image", function (e) {
    e.preventDefault();

    let imageId = $(this).attr("image-id");
    let url = "/api/deletecustomdesignimage/" + imageId;

    $(".custom-design-image-item-" + imageId).fadeOut();
    custom_design_upload_count--;

    $.ajax({
        type: "GET",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        date: {
            _token: "{{ csrf_token() }}",
        },
        url: url,
    });
});

$(document).on("click", ".cutout-image-item", function (e) {
    e.preventDefault();

    if (e.target.classList[0] !== "remove-cutout-image") {
        let fileUrl = "/uploads/cutout/original/";
        let filename = fileUrl + $(this).attr("filename");
        let objectId = $(".upload-new-cutout").attr("object_id");
        pp_file = filename;
        pp_id = objectId;

        loadCutoutApiImage(objectId, filename);
        $(".cutout-popup").hide();
        $(".overlay").hide();
    }
});

$(document).on("click", ".removebackground-image-item", function (e) {
    e.preventDefault();

    if (e.target.classList[0] !== "remove-background-image") {
        let fileUrl = "/uploads/removebackground/original/";
        let filename = fileUrl + $(this).attr("filename");
        let objectId = $(".upload-new-cutout").attr("object_id");
        pp_file = filename;
        pp_id = objectId;

        loadCutoutApiImage(objectId, filename);

        openPP();
        
        $(".cutout-popup").hide();
        $(".overlay").hide();
    }
});

$(document).on("click", ".custom-design-image-item", function (e) {
    e.preventDefault();

    if (e.target.classList[0] !== "remove-custom-design-image") {
        let url = "/api/getcustomdesignimage/" + $(this).attr("filename");
        customDesignUploadId = $(this).attr('image-id');

        $.ajax({
            type: "GET",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            date: {
                _token: "{{ csrf_token() }}",
            },
            url: url,
        }).done(function (response) {
            let filename = response;
            let objectId = $(".upload-new-cutout").attr("object_id");
            pp_file = filename;
            pp_id = objectId;
            
            $("#crop-img").attr("src", filename);
            $("#crop-img").show();

            openPP();

            $(".cutout-popup").hide();
            $(".overlay").hide();
        });
    }
});

$(document).on("click", ".close-cutout-popup", function (e) {
    e.preventDefault();
    $(".cutout-popup").hide();
    $(".overlay").hide();
});

$(document).on("click", ".overlay", function () {
    $(".cutout-popup").hide();
});