var Wick = Wick || {};
Wick.MainNav = (function () {
  return {
    createMainNav: function (defaultOptions) {
      const $mainNav = $('#main-nav');

      function createMainNavWrapper(data) {
        return `
          <div class="main-nav__section main-nav__section_main">
            <div class="main-nav__back-btn__wrap">
                <a href="#" class="main-nav__back-btn">
                  <span class="icon"><i class="fas fa-arrow-left fa-lg"></i></span>
                </a>
            </div>
            <div class="main-nav__top-level-wrap">
              <ul class="main-nav__top-level">
                  ${data.map(createMainNavTopLevel).join('')}
              </ul>
            </div>
          </div>
        `;
      }

      function createMainNavTopLevel(menuSection) {
        if (menuSection.name && menuSection.url) {
          if (menuSection.children && menuSection.children.length) {
            return `
               <li class="main-nav__top-level__item">
                  <a href="${checkUrl(menuSection)}" class="main-nav__top-level__label ${setClass(menuSection, 1)}" tabindex="0" ${setColor(menuSection)}>
                    ${menuSection.name}
                  </a>
                  <div class="main-nav__menu-wrapper">
                      ${createMainNavBannerItem(menuSection.banner)}
                      <ul class="main-nav__menu">
                          ${menuSection.children.map(createMainNavItems).join('')}
                      </ul>
                    </div>
                </li>
              `
          } else {
            return ` 
                <li class="main-nav__top-level__item main-nav__top-level__item-last">
                  <a href="${checkUrl(menuSection)}" class="main-nav__top-level__label" tabindex="0" ${setColor(menuSection)}>
                    ${menuSection.name}
                  </a>
                </li>
              `
          }
        } else {
          return ''
        }
      }

      function createMainNavBannerItem(banner) {
        if (banner && Wick.Responsive.getCurrentBreakpoint() !== 'up-lg') {
          return `
            <div class="main-nav__menu-banner">
              ${banner}
            </div>
          `;
        } else {
          return ''
        }
      }

      function createMainNavItems(menuSection) {
        if (menuSection) {
          if (menuSection.children && menuSection.children.length) {
            return `
              <li class="main-nav__menu__item nav-col">
                <a href="${checkUrl(menuSection)}" class="main-nav__menu__label ${setClass(menuSection, 2)}" tabindex="0" ${setColor(menuSection)}>
                  ${menuSection.name}
                </a>
                <div class="main-nav__sub-menu__wrapper" tabindex="0">
                  <div class="main-nav__sub-menu">
                    <ul>
                        ${menuSection.children.map(createSubNavItems).join('')}
                        ${
                          menuSection.originalChildrenCount &&
                          menuSection.originalChildrenCount != menuSection.children.length
                            ? createSubNavItems({name: 'View More', class: 'main-nav__sub-menu__view-more', url: menuSection.url}) 
                            : ''
                        }
                    </ul>
                    <div class="main-nav__view-all">
                      <a href="${checkUrl(menuSection)}" class="main-nav__view-all__link" tabindex="0">
                        View all ${menuSection.name}
                      </a>
                    </div>
                      ${createOffersWrapper(menuSection)}
                  </div>
                </div>
              </li>
            `
          } else {
            return `
              <li class="main-nav__menu__item nav-col">
                <a href="${checkUrl(menuSection)}" class="main-nav__menu__label ${setClass(menuSection, 2)}" tabindex="0" ${setColor(menuSection)}>
                  ${menuSection.name}
                </a>
                <div class="main-nav__sub-menu__wrapper" tabindex="0">
                  <div class="main-nav__sub-menu">
                    <div class="main-nav__view-all">
                      <a href="${checkUrl(menuSection)}" class="main-nav__view-all__link" tabindex="0">
                        View all ${menuSection.name}
                      </a>
                       
                    </div>
                    ${createOffersWrapper(menuSection)}
                  </div>
                </div>
              </li>
            `
          }
        }
      }

      function createSubNavItems(subItem) {
        if (subItem.name && subItem.url) {
          return `
           <li class="main-nav__sub-menu__item nav-col ${subItem.class || ''}">
              <a href="${checkUrl(subItem)}" class="main-nav__sub-menu__link main-nav__sub-sub-menu__link-last ${setClass(subItem, 3)}" tabindex="0" ${setColor(subItem)}>
                  ${subItem.name}
              </a>
            </li>
          `
        }
      }

      function createTopOffersWrapper(offer) {
        return `
        <div class="main-nav__top-offers">
          <a href="${offer.url}">
            <img class="main-nav__top-offers__img" src="${offer.image}" alt="${offer.name}">
          </a>
        </div>`
      }

      function createOffersWrapper(menuOffers) {
        if (menuOffers.offers) {
          let offersObj = menuOffers.offers;
          return `
            <div class="main-nav__offers__wrapper">
              <a href="#" class="main-nav__offers__label" tabindex="0">
                  ${offersObj.name}
              </a>
              <div class="main-nav__offers">
                <div class="main-nav__offers__title">
                  ${offersObj.name}
                </div>
                ${offersObj.offers.map(createOfferItem).join('')}
              </div>
            </div>
          `
        } else {
          return ''
        }
      }

      function createOfferItem(offer) {
        if (offer.image) {
          return `
            <div class="main-nav__offers__img">
              <a href="${offer.url}">
                <img src="${offer.image}" alt="${offer.name}">
              </a>
            </div>
          `
        } else if (offer.name) {
          return `
            <div class="main-nav__offers__item">
              <a href="${offer.url}" class="main-nav__offers__item-link" tabindex="0">
                ${offer.name}
              </a>
            </div>
          `
        }
      }

      function setClass(section, category) {
        let colorClass = '';

        if (section.color) {
          switch(section.color.toUpperCase()) {
            case 'GREEN': 
              colorClass = 'green'
              break;
            case 'RED':
              colorClass = 'red'
              break;
          }

          switch(category) {
            case 1: 
              colorClass += ' main-nav__top-level__label--invert'
              break;
            case 2:
              colorClass += ' main-nav__menu__label--invert'
              break;
            case 3:
              colorClass += ' main-nav__sub-menu__link--invert'
              break;
          }
        }

        return colorClass
      }

      function setColor(section) {
        let style = 'style="';

        if(section.color) {
          switch(section.color.toUpperCase()) {
            case 'GREEN': 
              style += `background-color: #9acd32; color: #fff;`
              break;
            case 'RED':
              style += `background-color: #cf000f; color: #fff;`
              break;
          }
        } 

        if (section.bold) {
          style += 'font-weight: 700;';
        }
        
        return style+'"'
      }

      function checkUrl(menuItem) {
       return menuItem.url || ''
      }

      function appendMainNav(data) {
        $mainNav.prepend(createMainNavWrapper(data));
      }

      const createMenu = (data) => {
        appendMainNav(data[0].children);
        Wick.Nav();
        Wick.Responsive.callBr();
      };

      const checkIfRealEnvironment = () => {
        if (defaultOptions.local) {
          createMenu(defaultOptions.mockData)
        } else {
          APICall(defaultOptions, createMenu)
        }
      };

      function APICall(options, onSuccess) {
        $.ajax({
          type: options.type,
          dataType: "json",
          url: `${options.link}/menu/main`,
          cache: options.cache,
          success: onSuccess,
        });
      }

      checkIfRealEnvironment();
    }
  }
})();

$(document).ready(function () {
  function init() {
    const defaultOptions = {
      type: 'GET',
      cache: true,
      link: window.location.origin,
      local: false
    };

    if (!$('#main-nav').length) {
      return;
    }
    Wick.MainNav.createMainNav(defaultOptions);
  }

  init();
});
