import $ from 'jquery'

/* jQuery scripts */
$(document).ready(function() {
    /* Mobile dropdown menu */
    $('.dropdown').on('click tap', function() {
        if ($(this).next().hasClass('opened')) {
            $(this).next().removeClass('opened')
        } else {
            $(this).next().addClass('opened')
        }
    })

    /* Mobile animate menu */
    $('.header__main-mobile-btn').on('click tap', function() {
        if ($('.header__mobile').hasClass('opened')) {
            $('.header__mobile').removeClass('opened')
        } else {
            $('.header__mobile').addClass('opened')
        }
    })

    function toggleSearchBar() {
        if ($('.header__search-bar').hasClass('opened')) {
            $('.header__search-bar').removeClass('opened')
        } else {
            $('.header__search-bar').addClass('opened')
        }
    }

    /* Search button */
    $('.header__main-search-toggle').on('click touched', function(e) {
        e.preventDefault()
        toggleSearchBar()
    })

    $('.header__cancel-search').on('click touched', function(e) {
        e.preventDefault()
        toggleSearchBar()
    })

    /* Mega menu , menu 1   $('.header__main-menu-item a').hover(function () {
        $(this).parent().find('.header__main-submenu').show()
    },
    function() {
        $(this).parent().find('.header__main-submenu').hide()
    })


    /* Mega menu, menu 2
    $('.header__main-submenu-item a').hover(function () {
        $(this).parent().find('.header__main-submenu-in').show()
        },
        function() {
        $(this).parent().find('.header__main-submenu-in').hide()
    })
*/

/*
    $('.menu-collection').hover(function () {
        $(this).parent().find('#collection.header__main-submenu-in').show()
        $(this).parent().find('#age.header__main-submenu-in').hide()
        $(this).parent().find('#brand.header__main-submenu-in').hide()
        $(this).parent().find('#holiday.header__main-submenu-in').hide()
    },
    function() {
        $(this).parent().find('.header__main-submenu').hide()
    })

    $('.menu-age').hover(function () {
        $(this).parent().find('#age.header__main-submenu-in').show()
        $(this).parent().find('#collection.header__main-submenu-in').hide()
        $(this).parent().find('#brand.header__main-submenu-in').hide()
        $(this).parent().find('#holiday.header__main-submenu-in').hide()
    },
    function() {
        $(this).parent().find('.header__main-submenu').hide()
    })

    $('.menu-brand').hover(function () {
        $(this).parent().find('#brand.header__main-submenu-in').show()
        $(this).parent().find('#collection.header__main-submenu-in').hide()
        $(this).parent().find('#age.header__main-submenu-in').hide()
        $(this).parent().find('#holiday.header__main-submenu-in').hide()
    },
    function() {
        $(this).parent().find('.header__main-submenu').hide()
    })

    $('.menu-holiday').hover(function () {
        $(this).parent().find('#holiday.header__main-submenu-in').show()
        $(this).parent().find('#collection.header__main-submenu-in').hide()
        $(this).parent().find('#brand.header__main-submenu-in').hide()
        $(this).parent().find('#age.header__main-submenu-in').hide()
    },
    function() {
        $(this).parent().find('.header__main-submenu').hide()
    })


*/




    $('.header__main-submenu').hover(function () {
        $('.header__main-submenu').show()
    },
    function() {
        $(this).hide()
    })

    $('.header__main-submenu-in-item').hover(function () {
        $('.header__main-submenu-products--'+$(this).find('a').attr("data-collection-handle")).css("display", "inline-block")
    },
    function () {
        $('.header__main-submenu-products--'+$(this).find('a').attr("data-collection-handle")).hide()
    })

    $('.header__main-submenu-products').hover(function () {
        $(this).css("display", "inline-block")
    },
    function () {
        $(this).hide()
    })

    /* Modal's script */
    var modal = $('.header__modal')[0]

    $('.headaer__modal-trigger').on('click touched', function(e) {
        e.preventDefault()

        $('.header__modal').css('display', 'block')
        $('.header__mobile').removeClass('opened')
    })

    $('.header__modal-close').on('click touched', function(e) {
        e.preventDefault()

        $('.header__modal').css('display', 'none')
    })

    $('.header__modal-exit').on('click touched', function(e) {
        e.preventDefault()

        $('.header__modal').css('display', 'none')
    })

    window.onclick = function(event) {
        if (event.target === modal) {
            $('.header__modal').css('display', 'none')
        }
    }
})