fabric.Object.prototype.objectCaching = false;
var design = new fabric.Canvas("design", { containerClass: "design" });
design.setHeight(792);
design.setWidth(612);
var templateUsing = false;
design.backgroundColor = "#fff";
design.renderAll()
// design.on("mouse:down", function (opt) {
//     var evt = opt.e;
//     opt.target.lockMovementX = true;
//     opt.target.lockMovementY = true;
//     opt.target.lockScalingX = true;
//     opt.target.lockScalingY = true;
//     opt.target.lockUniScaling = true;
//     opt.target.lockRotation = true;
//     opt.target.selection = false;
//     this.selection = false;
//     if (evt.altKey === true) {
//         this.isDragging = true;
//         this.selection = false;
//         this.lastPosX = evt.clientX;
//         this.lastPosY = evt.clientY;
//     }
// });
// design.on("mouse:move", function (opt) {
//     if (this.isDragging) {
//         var e = opt.e;
//         var vpt = this.viewportTransform;
//         vpt[4] += e.clientX - this.lastPosX;
//         vpt[5] += e.clientY - this.lastPosY;
//         this.requestRenderAll();
//         this.lastPosX = e.clientX;
//         this.lastPosY = e.clientY;
//     }
// });

// design.on("mouse:up", function (opt) {
//     this.isDragging = false;
//     this.selection = true;
// });

// $("#e-card-background").change(function () {
//     design.backgroundColor = $(this).val();
//     design.renderAll()
// })
// $("#e-card-balls").change(function () {
//     design.getObjects().forEach(item => {
//         if (item.type == "image") {
//             design.remove(item)
//             design.renderAll()
//         }
//     })
//     fabric.Image.fromURL($(this).val(), function (oImg) {
//         oImg.top = 60
//         oImg.left = design.getWidth() / 2 - 175
//         design.add(oImg);
//     });
// })

// $("#E-Card-Heading").keyup(function () {
//     let cardHeadExists = false
//     design.getObjects().forEach(item => {
//         if (item.usedFor == "Heading") {
//             cardHeadExists = true
//             item.text = $(this).val()
//             design.renderAll()
//         }
//     })
//     if (!cardHeadExists) {
//         var myText = new fabric.Textbox($(this).val(), {
//             fill: $("#E-Card-text-color").val(),
//             left: 0,
//             top: 10,
//             fontFamily: `'Poppins', sans-serif`,
//             width: design.getWidth(),
//             textAlign: "center",
//             fontSize: "50",
//         });
//         myText.usedFor = "Heading"
//         design.add(myText)
//     }
// })
// $("#E-Card-Message").keyup(function () {
//     let cardMessageExists = false
//     design.getObjects().forEach(item => {
//         if (item.usedFor == "Message") {
//             cardMessageExists = true
//             item.text = $(this).val()
//             design.renderAll()
//         }
//     })
//     if (!cardMessageExists) {
//         var myText = new fabric.Textbox($(this).val(), {
//             fill: $("#E-Card-text-color").val(),
//             left: 0,
//             top: design.getHeight() - 80,
//             fontFamily: `'Poppins', sans-serif`,
//             width: design.getWidth(),
//             textAlign: "center",
//             fontSize: "22",
//         });
//         myText.usedFor = "Message"
//         design.add(myText)
//     }
// })
// $("#E-Card-text-color").change(function () {
//     design.getObjects().forEach(item => {
//         if (item.type == "textbox") {
//             item.fill = $(this).val()
//             design.renderAll()
//         }
//     })
// })
// $("#adjust-card-size").change(function () {
//     const width = $(this).val().split(",")[0]
//     const height = $(this).val().split(",")[1]
//     design.setHeight(height);
//     design.setWidth(width);
//     design.renderAll()
// })
$("#e-card-form .theme-btn").click(function (e) {
    e.preventDefault()
    let error = false
    const form = $(this).parents("form")
    $(form).find("*[required]").each(function (ind, elem) {
        if (!$(elem).val()) {
            error = true
            let fieldName = $(elem).siblings("label").html()
            createToast(`${fieldName} is required`, "error")
        }
    })
    if (!error) {
        $(".loader").css('display', "flex")
        fabric.Image.fromURL($("#e-card-balls").val(), function (oImg) {
            oImg.top = 250
            oImg.left = design.getWidth() / 2 - 175
            design.add(oImg);
        });
        setTimeout(() => {
            // var myText = new fabric.Textbox($("#E-Card-Heading").val(), {
            var myText = new fabric.Textbox("You’ve got a pair of balls!!", {
                fill: $("#E-Card-text-color").val(),
                left: 0,
                top: 60,
                fontFamily: `'Poppins', sans-serif`,
                fontWeight: 900,
                width: design.getWidth(),
                textAlign: "center",
                fontSize: "22",
                breakWords: true
            });
            myText.usedFor = "Heading"
            design.add(myText)
            design.backgroundColor = $("#e-card-background").val();

        }, 1000);
        setTimeout(() => {
            const infoText = `${$("#sender-name-ecard").val()}, has determined that you need a\npair of balls and sent you a pair of\n${$("#e-card-balls").val().split("/")[$("#e-card-balls").val().split("/").length - 1].replaceAll(".jpg", "").replaceAll("_", " ")}.`
            // const adjustedText = infoText.
            var myText = new fabric.Textbox(infoText, {
                fill: $("#E-Card-text-color").val(),
                left: 30,
                overflow: 'hidden',
                top: 130,
                fontFamily: `'Poppins', sans-serif`,
                width: design.getWidth() - 100,
                textAlign: "center",
                fontSize: 18, // Don't use quotes for numeric values
            });
            myText.usedFor = "message"
            design.add(myText)
        }, 1500);
        setTimeout(() => {
            var myText = new fabric.Textbox($("#E-Card-Message").val(), {
                fill: $("#E-Card-text-color").val(),
                left: 30,
                top: 470,
                fontFamily: `'Poppins', sans-serif`,
                width: design.getWidth() - 120,
                textAlign: "center",
                breakWords: true,
                fontSize: $("#E-Card-Message").val().length < 80 ? "18" : "16",
            });
            myText.usedFor = "message"
            design.add(myText)
        }, 1500);
        setTimeout(() => {
            var myText = new fabric.Textbox(`Sent ${$("#E-Card-DeliveryDate").val().replaceAll("-", "/")} from needapair.com.`, {
                fill: $("#E-Card-text-color").val(),
                left: 30,
                top: design.getHeight() - 60,
                fontFamily: `'Poppins', sans-serif`,
                width: design.getWidth() - 60,
                textAlign: "left",
                breakWords: true,
                fontSize: "14",
            });
            myText.usedFor = "date"
            design.add(myText)
        }, 2500);
        setTimeout(() => {
            let formData = {}
            if ($("#form-method").val() == "PUT") {
                formData.id = $("*[name='id']").val()
            }
            formData.cardJson = JSON.stringify(design.toJSON())
            formData.ballzType = $("*[name='ballzType']").val()
            formData.recipentName = $("*[name='recipentName']").val()
            formData.recipentemail = $("*[name='recipentemail']").val()
            formData.deliveryDate = $("*[name='deliveryDate']").val()
            formData.senderName = $("*[name='senderName']").val()
            formData.message = $("*[name='message']").val()
            fetch('/api/e-card', {
                method: $("#form-method").val(),
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(formData)
            }).then(res => {
                res.json().then(data => {
                    if (res.status == 200) {
                        $(".loader").hide()
                        $("#form-method").val("PUT")
                        $("#id-for-mail").val(data.card._id)
                        $("#card-id").val(data.card._id)
                        const offcanvas = new bootstrap.Offcanvas(document.querySelector('.ecard-offcanvas'));
                        offcanvas.show()
                    } else {
                        $(".loader").hide()
                        createToast(data.message, 'error')
                    }
                })
            })
        }, 2500);
    }
})
$(document).ready(function () {
    let date = new Date
    let m = ((date.getMonth() + 1).toString().length == 1) ? `0${date.getMonth() + 1}` : date.getMonth() + 1
    let d = (date.getDate().toString().length == 1) ? `0${date.getDate()}` : date.getDate()
    let y = date.getFullYear()
    $("#E-Card-DeliveryDate").attr("min", `${y}-${m}-${d}`)
})
$(".close-btn-ecard").click(function () {
    design.getObjects().forEach(item => {
        design.remove(item)
    })
    design.renderAll()
})
// $(`input[name="ecardbase64"]`).val(design.toDataUrl())