require("./bootstrap");
import AOS from "aos";

const icons = document.querySelectorAll(".icon");
icons.forEach((icon) => {
    icon.addEventListener("click", (event) => {
        // icon.classList.toggle("open");
    });
});
//Scroll page
$(window).scroll(() => {
    let height = $(window).scrollTop();
    if (height >= 673) {
        //$(".btn-scroll").fadeIn();
        $(".btn-scroll").css({
            right: "30px",
            transition: "all 0.8s",
            display: "block",
            opacity: "1",
        });
    } else {
        //$(".btn-scroll").fadeOut();
        $(".btn-scroll").css({
            right: "-50px",
            transition: "all 0.8s",
            display: "block",
            opacity: "0",
        });
    }
});
//Button Scroll
$(document).ready(function () {
    $(".owl-carousel").owlCarousel({
        loop: true,
        autoplay: true,
        margin: 10,
        autoplayTimeout: 2000,
        smartSpeed: 2000,
        fluidSpeed: 2000,
        center: true,
        autoplayHoverPause: true,
        responsive: {
            0: {
                items: 1,
            },
            576: {
                items: 2,
            },
            768: {
                items: 3,
            },
            992: {
                items: 4,
            },
            1200: {
                items: 5,
            },
        },
    });

    $("#btnScroll").click(function () {
        $("html, body").animate(
            {
                scrollTop: $("body").offset().top,
            },
            500
        );
    });
});

//Theme Function Went switch
// check for saved 'darkMode' in localStorage
let darkMode = localStorage.getItem("darkMode");
const darkModeToggle = document.querySelectorAll(".btnTheme");

const enableDarkMode = () => {
    document.body.classList.add("darkmode");
    localStorage.setItem("darkMode", "enabled");
};
const disableDarkMode = () => {
    document.body.classList.remove("darkmode");
    localStorage.setItem("darkMode", "disable");
};
// If the user already visited and enabled darkMode
if (darkMode === "enabled") {
    enableDarkMode();
}
// When someone clicks the button
darkModeToggle.forEach((btn) => {
    btn.addEventListener("click", () => {
        darkMode = localStorage.getItem("darkMode");
        if (darkMode !== "enabled") {
            enableDarkMode();
            btn.innerHTML = '<i class="bx bx-sun fs-4"></i>';
        } else {
            disableDarkMode();
            btn.innerHTML = '<i class="bx bx-moon fs-4"></i>';
        }
    });
    if ($("body").hasClass("darkmode")) {
        btn.innerHTML = '<i class="bx bx-sun fs-4"></i>';
    } else {
        btn.innerHTML = '<i class="bx bx-moon fs-4"></i>';
    }
});

// AOS animate
AOS.init({
    // Global settings:
    disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
    startEvent: "DOMContentLoaded", // name of the event dispatched on the document, that AOS should initialize on
    initClassName: "aos-init", // class applied after initialization
    animatedClassName: "aos-animate", // class applied on animation
    useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
    disableMutationObserver: false, // disables automatic mutations' detections (advanced)
    debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
    throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)

    // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
    offset: 120, // offset (in px) from the original trigger point
    delay: 0, // values from 0 to 3000, with step 50ms
    duration: 500, // values from 0 to 3000, with step 50ms
    easing: "ease", // default easing for AOS animations
    once: true, // whether animation should happen only once - while scrolling down
    mirror: false, // whether elements should animate out while scrolling past them
    anchorPlacement: "top-bottom", // defines which position of the element regarding to window should trigger the animation
});

const tilt = $(".js-tilt").tilt({
    maxTilt: 5,
    perspective: 500,
    // speed: 100,
});
// tilt.tilt.getValues.call(tilt);
tilt.on("change", function (e, transforms) {});