(function () {
    "use strict";

    // ==== Preloader
    window.onload = function () {
        window.setTimeout(fadeout, 50);
    };

    function fadeout() {
        document.querySelector(".preloader").style.opacity = "0";
        document.querySelector(".preloader").style.display = "none";
    }

    // ======= Sticky
    window.onscroll = function () {
        const header_navbar = document.querySelector(".navbar-area");
        const sticky = header_navbar.offsetTop;
        const logo = document.querySelector(".navbar-brand img");

        /* if (window.pageYOffset > sticky) {
            header_navbar.classList.add("sticky");
            logo.src = "assets/logo_bg.png";
        } else {
            header_navbar.classList.remove("sticky");
            logo.src = "assets/logo_bg.png";
        } */

        // show or hide the back-top-top button
        const backToTop = document.querySelector(".back-to-top");
        if (
            document.body.scrollTop > 50 ||
            document.documentElement.scrollTop > 50
        ) {
            backToTop.style.display = "flex";
        } else {
            backToTop.style.display = "none";
        }
    };

    // ==== for menu scroll
    const pageLink = document.querySelectorAll(".page-scroll");

    pageLink.forEach((elem) => {
        elem.addEventListener("click", (e) => {
            e.preventDefault();
            document.querySelector(elem.getAttribute("href")).scrollIntoView({
                behavior: "smooth",
                offsetTop: 1 - 60,
            });
        });
    });

    // section menu active
    function onScroll(event) {
        const sections = document.querySelectorAll(".page-scroll");
        const scrollPos =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;

        for (let i = 0; i < sections.length; i++) {
            const currLink = sections[i];
            const val = currLink.getAttribute("href");
            const refElement = document.querySelector(val);
            const scrollTopMinus = scrollPos + 73;
            if (
                refElement.offsetTop <= scrollTopMinus &&
                refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
            ) {
                document.querySelector(".page-scroll").classList.remove("active");
                currLink.classList.add("active");
            } else {
                currLink.classList.remove("active");
            }
        }
    }

    window.document.addEventListener("scroll", onScroll);

    //===== close navbar-collapse when a  clicked
    let navbarToggler = document.querySelector(".navbar-toggler");
    const navbarCollapse = document.querySelector(".navbar-collapse");

    document.querySelectorAll(".page-scroll").forEach((e) =>
        e.addEventListener("click", () => {
            navbarToggler.classList.remove("active");
            navbarCollapse.classList.remove("show");
        })
    );
    /*  navbarToggler.addEventListener("click", function () {
         navbarToggler.classList.toggle("active");
     });; */

    //====== counter up
    const cu = new counterUp({
        start: 0,
        duration: 2000,
        intvalues: true,
        interval: 100,
        append: "k",
    });
    cu.start();

    //=====  WOW active
    new WOW().init();

    //=====  particles
    if (document.getElementById("particles-1"))
        particlesJS("particles-1", {
            particles: {
                number: {
                    value: 40,
                    density: {
                        enable: !0,
                        value_area: 4000,
                    },
                },
                color: {
                    value: ["#FFFFFF", "#FFFFFF", "#FFFFFF"],
                },
                shape: {
                    type: "circle",
                    stroke: {
                        width: 0,
                        color: "#fff",
                    },
                    polygon: {
                        nb_sides: 5,
                    },
                    image: {
                        src: "img/github.svg",
                        width: 33,
                        height: 33,
                    },
                },
                opacity: {
                    value: 0.15,
                    random: !0,
                    anim: {
                        enable: !0,
                        speed: 0.2,
                        opacity_min: 0.15,
                        sync: !1,
                    },
                },
                size: {
                    value: 50,
                    random: !0,
                    anim: {
                        enable: !0,
                        speed: 2,
                        size_min: 5,
                        sync: !1,
                    },
                },
                line_linked: {
                    enable: !1,
                    distance: 150,
                    color: "#ffffff",
                    opacity: 0.4,
                    width: 1,
                },
                move: {
                    enable: !0,
                    speed: 1,
                    direction: "top",
                    random: !0,
                    straight: !1,
                    out_mode: "out",
                    bounce: !1,
                    attract: {
                        enable: !1,
                        rotateX: 600,
                        rotateY: 600,
                    },
                },
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: {
                        enable: !1,
                        mode: "bubble",
                    },
                    onclick: {
                        enable: !1,
                        mode: "repulse",
                    },
                    resize: !0,
                },
                modes: {
                    grab: {
                        distance: 400,
                        line_linked: {
                            opacity: 1,
                        },
                    },
                    bubble: {
                        distance: 250,
                        size: 0,
                        duration: 2,
                        opacity: 0,
                        speed: 3,
                    },
                    repulse: {
                        distance: 400,
                        duration: 0.4,
                    },
                    push: {
                        particles_nb: 4,
                    },
                    remove: {
                        particles_nb: 2,
                    },
                },
            },
            retina_detect: !0,
        });

    if (document.getElementById("particles-2"))
        particlesJS("particles-2", {
            particles: {
                number: {
                    value: 40,
                    density: {
                        enable: !0,
                        value_area: 4000,
                    },
                },
                color: {
                    value: ["#FFFFFF", "#FFFFFF", "#FFFFFF"],
                },
                shape: {
                    type: "circle",
                    stroke: {
                        width: 0,
                        color: "#fff",
                    },
                    polygon: {
                        nb_sides: 5,
                    },
                    image: {
                        src: "img/github.svg",
                        width: 33,
                        height: 33,
                    },
                },
                opacity: {
                    value: 0.15,
                    random: !0,
                    anim: {
                        enable: !0,
                        speed: 0.2,
                        opacity_min: 0.15,
                        sync: !1,
                    },
                },
                size: {
                    value: 50,
                    random: !0,
                    anim: {
                        enable: !0,
                        speed: 2,
                        size_min: 5,
                        sync: !1,
                    },
                },
                line_linked: {
                    enable: !1,
                    distance: 150,
                    color: "#ffffff",
                    opacity: 0.4,
                    width: 1,
                },
                move: {
                    enable: !0,
                    speed: 1,
                    direction: "top",
                    random: !0,
                    straight: !1,
                    out_mode: "out",
                    bounce: !1,
                    attract: {
                        enable: !1,
                        rotateX: 600,
                        rotateY: 600,
                    },
                },
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: {
                        enable: !1,
                        mode: "bubble",
                    },
                    onclick: {
                        enable: !1,
                        mode: "repulse",
                    },
                    resize: !0,
                },
                modes: {
                    grab: {
                        distance: 400,
                        line_linked: {
                            opacity: 1,
                        },
                    },
                    bubble: {
                        distance: 250,
                        size: 0,
                        duration: 2,
                        opacity: 0,
                        speed: 3,
                    },
                    repulse: {
                        distance: 400,
                        duration: 0.4,
                    },
                    push: {
                        particles_nb: 4,
                    },
                    remove: {
                        particles_nb: 2,
                    },
                },
            },
            retina_detect: !0,
        });
})();

var GENERATE_URL = 'https://qr-code-cf.beniaminpantiru.workers.dev/generate';
// var GENERATE_URL = 'https://3000-beniaminp-qrcodegenerat-u49evpxpktg.ws-eu77.gitpod.io/qr-controller/generate';
var GENERATE_PDF_URL = 'https://qr-code-robot.robomiri.com/qr-controller/generate-pdf';
// var GENERATE_PDF_URL = 'https://3000-beniaminp-qrcodegenerat-u49evpxpktg.ws-eu77.gitpod.io/qr-controller/generate-pdf';
var generatedQRCode;

window.addEventListener("load", () => {
    generateQRCodeWithMessage('https://robomiri.com');
});


function generateTextQR() {
    fetch(GENERATE_URL, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ url: document.getElementById('text').value.trim(), type: 'TEXT' })
    }).then(
        function (response) {
            return response.json();
        }
    )
        .then(res => {
            const url = res.rows[0].url;
            generateQRCodeWithMessage(url);
        });
}

function generateWIFIQRCode() {
    // <WEP|WPA|blank>
    // H:<true|false|blank>
    var wifiQR = `WIFI:S:${document.getElementById('networkName').value};T:${document.querySelector('input[name="gridRadios"]:checked').value.toUpperCase()};P:${document.getElementById('password').value};H:false;;`;

    fetch(GENERATE_URL, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ url: wifiQR, type: 'WIFI' })
    }).then(
        function (response) {
            // The response is a Response instance.
            // You parse the data into a useable format using `.json()`
            return response.json();
        }
    )
        .then(res => {
            const url = res.rows[0].url;
            generateQRCodeWithMessage(wifiQR);
        });

    // generateQRCodeWithMessage(wifiQR);
}

function generateEmailQRCode() {

    var emailQR = `mailto:${document.getElementById('email').value.trim()}?subject=${encodeURIComponent(document.getElementById('subject').value.trim())}&body=${encodeURIComponent(document.getElementById('message').value.trim())}`.trim();

    fetch(GENERATE_URL, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ url: emailQR, type: 'EMAIL' })
    }).then(
        function (response) {
            // The response is a Response instance.
            // You parse the data into a useable format using `.json()`
            return response.json();
        }
    )
        .then(res => {
            const url = res.rows[0].url;
            generateQRCodeWithMessage(url);
        });
}

function generateSMSQRCode() {

    var smsQR = `sms:${document.getElementById('tel').value.trim()}?&body=${encodeURIComponent(document.getElementById('message').value.trim())}`;

    fetch(GENERATE_URL, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ url: smsQR, type: 'SMS' })
    }).then(
        function (response) {
            // The response is a Response instance.
            // You parse the data into a useable format using `.json()`
            return response.json();
        }
    )
        .then(res => {
            const url = res.rows[0].url;
            generateQRCodeWithMessage(url);
        });
}

function generateVCARDQRCode() {
    const myVCard = new VCard();
    myVCard
        .addName(document.getElementById('lastName')?.value?.trim(), (document.getElementById('firstName')?.value?.trim()))
        .addPhoneNumber(document.getElementById('mobile')?.value?.trim())
        .addEmail(document.getElementById('email')?.value?.trim())
        .addCompany(document.getElementById('company')?.value?.trim())
        .addJobtitle(document.getElementById('job')?.value?.trim())
        .addAddress(null, null, document.getElementById('street')?.value?.trim(), document.getElementById('city')?.value?.trim(), null, document.getElementById('zipCode')?.value?.trim(), document.getElementById('country')?.value?.trim())
        .addURL(document.getElementById('website')?.value?.trim());

    fetch(GENERATE_URL, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ url: myVCard.toString(), type: 'VCARD' })
    }).then(
        function (response) {
            // The response is a Response instance.
            // You parse the data into a useable format using `.json()`
            return response.json();
        }
    )
        .then(res => {
            const url = res.rows[0].url;
            generateQRCodeWithMessage(url);
        });
}

function generatePDFQR() {
    var fileInput = document.getElementById('pdfFile');
    var singleFile = fileInput.files[0];

    var data = new FormData();
    data.append('file', singleFile);

    fetch(GENERATE_PDF_URL, {
        method: 'POST',
        headers: {},
        body: data
    }).then(
        function (response) {
            return response.json();
        }
    )
        .then(res => {
            const url = res.rows[0].url;
            generateQRCodeWithMessage(url);
        });
}

function generateQRCodeWithMessage(message, colorDark = '#000000') {
    document.getElementById("qrcode").innerHTML = "";

    document.getElementById("saveQrContainer").style.display = "block";

    generatedQRCode = new QRCode(document.getElementById("qrcode"), {
        text: message,
        width: 200,
        height: 200,
        colorDark: colorDark,
        colorLight: "#ffffff",
        // QRCode.CorrectLevel.L | QRCode.CorrectLevel.M | QRCode.CorrectLevel.H
        correctLevel: QRCode.CorrectLevel.H
    });
}

function saveQRCode() {
    var link = document.createElement('a');
    link.download = 'qr_code_robomiri.png';
    link.href = document.getElementById('qrcode').children[0].toDataURL()
    link.click();
}

function initText() {
    document.getElementById('qr-topic').innerHTML = `
        <h2 class="pt-5 pb-2 fw-bold align-self-start">HTML / Free text</h2>
        </label>
        <textarea rows="4" name="message" id="text" placeholder="Enter your text to share"
            class="url-text-area w-100 border-2 p-3 rounded"></textarea>
        <div class="form-group row">
            <div class="col-sm-12">
            <button type="button" class="btn btn-primary w-100" style="color: #0d6efd;" onclick="generateTextQR()">Generate QR Code</button>
        </div>
    `;
}

function initEmail() {
    document.getElementById('qr-topic').innerHTML = `
        <h2 class="pt-5 pb-2 fw-bold align-self-start">Email QR Code</h2>
        </label>
        <div class="form-group row pb-2">
            <label for="email" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="email" placeholder="Your email">
            </div>  
        </div>
        <div class="form-group row pb-2">
            <label for="subject" class="col-sm-2 col-form-label">Subject</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="subject" placeholder="Enter email subject">
            </div>  
        </div>
        <div class="form-group row pb-2">
            <label for="message" class="col-sm-2 col-form-label">Message</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="message" rows="3" placeholder="Enter your email message"></textarea>
            </div>  
        </div>
        <div class="form-group row">
            <div class="col-sm-12">
            <button type="button" class="btn btn-primary w-100" style="color: #0d6efd;" onclick="generateEmailQRCode()">Generate QR Code</button>
            </div>
        </div>
    `;
}

function initSMS() {
    document.getElementById("qr-topic").innerHTML = `
        <h2 class="pt-5 pb-2 fw-bold align-self-start">SMS QR Code</h2>
        </label>
        <div class="form-group row pb-2">
            <label for="tel" class="col-sm-2 col-form-label">Phone number</label>
            <div class="col-sm-10">
                <input type="tel" class="form-control" id="tel" placeholder="+4">
            </div>  
        </div>
        <div class="form-group row pb-2">
            <label for="message" class="col-sm-2 col-form-label">Message</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="message" rows="3" placeholder="Enter your sms text"></textarea>
            </div>  
        </div>
        <div class="form-group row">
            <div class="col-sm-12">
            <button type="button" class="btn btn-primary w-100" style="color: #0d6efd;" onclick="generateSMSQRCode()">Generate QR Code</button>
            </div>
        </div>
    `;
}

function initWIFI() {
    document.getElementById('qr-topic').innerHTML = `
        <h2 class="pt-5 pb-2 fw-bold align-self-start">WiFi QR Code</h2>
        </label>
        <div class="form-group row pb-2">
            <label for="networkName" class="col-sm-2 col-form-label">Network name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="networkName" placeholder="WiFi network name">
            </div>  
        </div>
        <div class="form-group row pb-2">
            <label for="password" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="password" placeholder="WiFi password">
            </div>  
        </div>
        <div class="form-group row pb-2">
            <label for="message" class="col-sm-2 col-form-label">Encryption</label>
            <div class="col-sm-10">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="gridRadios" id="none" value="none" checked>
                <label class="form-check-label" for="none">
                  None
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="gridRadios" id="wpa" value="wpa">
                <label class="form-check-label" for="wpa">
                  WPA/WPA2
                </label>
              </div>
              <div class="form-check disabled">
                <input class="form-check-input" type="radio" name="gridRadios" id="wep" value="wep">
                <label class="form-check-label" for="wep">
                  WEP
                </label>
              </div>
            </div>  
        </div>
        <div class="form-group row">
            <div class="col-sm-12">
                <button type="button" class="btn btn-primary w-100" style="color: #0d6efd;" onclick="generateWIFIQRCode()">Generate QR Code</button>
            </div>
        </div>
    `;
}

function initVCARD() {
    document.getElementById('qr-topic').innerHTML = `
        <h2 class="pt-5 pb-2 fw-bold align-self-start">vCard QR Code</h2>
        </label>
        <div class="form-group row pb-2">
            <label for="firstName" class="col-sm-2 col-form-label">First name</label>
            <div class="col-sm-4">
                <input type="firstName" class="form-control" id="firstName" placeholder="First name">
            </div>

            <label for="lastName" class="col-sm-2 col-form-label">Last name</label>
            <div class="col-sm-4">
                <input type="lastName" class="form-control" id="lastName" placeholder="Last name">
            </div>  
        </div>
        <div class="form-group row pb-2">
            <label for="mobile" class="col-sm-2 col-form-label">Mobile</label>
            <div class="col-sm-4">
                <input type="tel" class="form-control" id="mobile" placeholder="Mobile number">
            </div>
            
            <label for="phone" class="col-sm-2 col-form-label">Phone</label>
            <div class="col-sm-4">
                <input type="tel" class="form-control" id="phone" placeholder="Phone number">
            </div>    
        </div>
        <div class="form-group row pb-2">
            <label for="email" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="email" placeholder="your@email.com">
            </div>  
        </div>
        <div class="form-group row pb-2">
            <label for="company" class="col-sm-2 col-form-label">Company</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="company" placeholder="Company">
            </div>
            
            <label for="job" class="col-sm-2 col-form-label">Job</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="job" placeholder="Your job">
            </div>    
        </div>
        <div class="form-group row pb-2">
            <label for="street" class="col-sm-2 col-form-label">Street</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="street" placeholder="Street">
            </div>  
        </div>
        <div class="form-group row pb-2">
            <label for="city" class="col-sm-2 col-form-label">City</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="city" placeholder="City">
            </div>
            
            <label for="zipCode" class="col-sm-2 col-form-label">ZIP</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" id="zipCode" placeholder="Zip code">
            </div>    
        </div>
        <div class="form-group row pb-2">
            <label for="country" class="col-sm-2 col-form-label">Country</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="country" placeholder="Country">
            </div>  
        </div>
        <div class="form-group row pb-2">
            <label for="website" class="col-sm-2 col-form-label">Website</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="website" placeholder="https://your-website.com">
            </div>  
        </div>
        <div class="form-group row">
            <div class="col-sm-12">
            <button type="button" class="btn btn-primary w-100" style="color: #0d6efd;" onclick="generateVCARDQRCode()">Generate QR Code</button>
        </div>
        </div>
    `;
}

function initPDF() {
    document.getElementById('qr-topic').innerHTML = `
        <h2 class="pt-5 pb-2 fw-bold align-self-start">Convert PDF to QR Code Free</h2>
        <label id="pdfFileName"></label>
        <div class="upload-btn-wrapper">
            <button class="btn">Upload a PDF</button>
            <input type="file" name="pdfFile" id="pdfFile" onchange="pdfFileChanged()"/>
        </div>
        <div class="form-group row">
            <div class="col-sm-12">
            <button type="button" class="btn btn-primary w-100" style="color: #0d6efd;" onclick="generatePDFQR()">Generate QR Code</button>
        </div>
    `;
}

function topicChanged(topic) {
    switch (topic) {
        case 'URL': {
            initURL();
            break;
        }
        case 'TEXT': {
            initText();
            break;
        }
        case 'EMAIL': {
            initEmail();
            break;
        }
        case 'WIFI': {
            console.error('wifi');
            initWIFI();
            break;
        }
        case 'SMS': {
            initSMS();
            break;
        }
        case 'VCARD': {
            initVCARD();
            break;
        }
        case 'PDF': {
            initPDF();
            break;
        }
        default: {
            initURL();
            break;
        }
    }
}

var selectedQR = window.location.pathname.replace('/', '').replace('.html', '') ? window.location.pathname.replace('/', '').replace('.html', '').toUpperCase() : 'URL';
topicChanged(selectedQR);

function colorChange() {
    const currentText = generatedQRCode._htOption.text;
    generateQRCodeWithMessage(currentText, document.getElementById('qr-code-color').value);
}

function pdfFileChanged() {
    var fileInput = document.getElementById('pdfFile');
    var singleFile = fileInput.files[0];

    console.error(singleFile);

    if ('application/pdf' != singleFile.type) {
        Toastify({
            text: 'Uploaded file should be a PDF type.',
            duration: 5000,
            newWindow: true,
            close: true,
            gravity: "top", // `top` or `bottom`
            position: "right", // `left`, `center` or `right`
            stopOnFocus: true, // Prevents dismissing of toast on hover
            style: {
                background: "red",
            },
            onClick: function () { } // Callback after click
        }).showToast();
        return;
    }

    document.getElementById('pdfFileName').innerText = singleFile.name;
}