$(() => {
  shopby.header = {
    initiate() {
      this.Topbanner.initiate();
      this.top.initiate();
      this.logo.initiate();
      this.categories.initiate();
      this.search.initiate();
    },
    Topbanner: {
      data: {
        bannerTop: { landingUrl: '/', imageUrl: '/' },
        bannerInfo: null,
        bannerName: 'top',
        code: 'BANNER02',
      },
      initiate() {
        const isSkin = this.findBannerInfo();
        if (!isSkin) {
          return this.render();
        }
        this.setBanner();
        this.render();
        this.setBannerSize();
        this.setBannerTitle();
      },
      findBannerInfo() {
        const skin = shopby.cache.getSkin();
        if (!Array.isArray(skin)) {
          return false;
        }

        const foundSkin = skin.find(({ bannerGroupCode }) => bannerGroupCode === this.data.code);
        const banners = foundSkin ? foundSkin.banners : null;
        if (!banners) return;
        this.bannerInfo = this.findLatestBanner(banners);
        return !!this.bannerInfo;
      },
      setBanner() {
        const bannerImage = this.bannerInfo && this.bannerInfo.bannerImages ? this.bannerInfo.bannerImages[0] : null;
        if (!bannerImage) return;
        this.data.bannerTop = bannerImage;
      },
      render() {
        $('#kd_bn_top').render(this.data.bannerTop);
      },
      findLatestBanner(banners = []) {
        if (banners.length === 0) return;
        if (banners.length === 1) return banners[0];
        return banners.reduce((prev, curr) => {
          return new Date(prev.updateDateTime).getTime() <= new Date(curr.updateDateTime).getTime() ? curr : prev;
        });
      },
      setBannerSize() {
        const { sizeUnitType, height, width } = this.bannerInfo;
        if (!width && !height) return;
        const $img = $(`#banner-${this.data.bannerName}`).find('img');

        if (sizeUnitType === 'PIXEL') {
          $img.css({ width: `${width}px`, height: `${height}px` });
        } else {
          $img.css({ width: `${width}%` });
        }
      },
      setBannerTitle() {
        const bannerTitle = $(`#banner-${this.data.bannerName}`).find('img').attr('title');
        $(`#banner-${this.data.bannerName}`).append(`<span class="kd-bn-title">` + bannerTitle + `</span>`);
      },
    },
    top: {
      container: $('.kd-lnb'),
      dropdown: $('.js_hover_drop_down_content'),
      data: {
        logined: shopby.logined(),
        cartCount: 0,
        openIdProvider: shopby.localStorage.getItem(shopby.cache.key.member.oauthProvider),
      },
      initiate() {
        this.setData();
        this.render();
        this.bindEvents();
      },
      async setData() {
        const count = await shopby.helper.cart.getCartCount();
        this.container.find('.js_cart_length').text(count);

        // shopby.helper.cart.getCartProductLength().then(productLength => {
        //   this.data.cartCount = productLength || 0;
        //
        //   this.container.find('.js_cart_length').html(this.data.cartCount);
        // });
      },
      render() {
        this.container.render(this.data);
      },
      bindEvents() {
        this.container.find('#logout').on('click', this.logout);
      },
      logout(event) {
        event.preventDefault();

        shopby.cache.removeAccessToken();
        shopby.goHome();
      },
    },

    logo: {
      data: {
        logo: { landingUrl: '/', imageUrl: '/' },
        bannerInfo: null,
        bannerName: 'logo',
        code: shopby.config.skin.getBannerGroupCode('LOGO'),
      },
      initiate() {
        const isSkin = this.findBannerInfo();
        if (!isSkin) {
          return this.render();
        }
        this.setLogo();
        this.render();
        this.setLogoSize();
      },
      findBannerInfo() {
        const skin = shopby.cache.getSkin();
        if (!Array.isArray(skin)) {
          return false;
        }

        const foundSkin = skin.find(({ bannerGroupCode }) => bannerGroupCode === this.data.code);
        const banners = foundSkin ? foundSkin.banners : null;
        if (!banners) return;
        this.bannerInfo = this.findLatestBanner(banners);
        return !!this.bannerInfo;
      },
      setLogo() {
        const bannerImage = this.bannerInfo && this.bannerInfo.bannerImages ? this.bannerInfo.bannerImages[0] : null;
        if (!bannerImage) return;
        this.data.logo = bannerImage;
      },
      render() {
        $('#logo').render(this.data.logo);
      },
      findLatestBanner(banners = []) {
        if (banners.length === 0) return;
        if (banners.length === 1) return banners[0];
        return banners.reduce((prev, curr) => {
          return new Date(prev.updateDateTime).getTime() <= new Date(curr.updateDateTime).getTime() ? curr : prev;
        });
      },
      setLogoSize() {
        const { sizeUnitType, height, width } = this.bannerInfo;
        if (!width && !height) return;
        const $img = $(`#banner-${this.data.bannerName}`).find('img');
        if (sizeUnitType === 'PIXEL') {
          $img.css({ width: `${width}px`, height: `${height}px` });
        } else {
          $img.css({ width: `${width}%` });
        }
      },
    },
    categories: {
      data: {
        categories: shopby.cache.getCategories(),
      },
      initiate() {
        this.render();
      },
      render() {
        $('#category-navigation').render(this.data.categories);
      },
    },
    search: {
      container: $('#header'),
      searchBox: $('.kd-hd-search'),
      $keywordSearch: $('#keywordSearch'),
      data: {
        keyword: shopby.utils.getUrlParam('keyword') || '',
      },
      initiate() {
        this.render();
        this.bindEvents();
      },
      render() {
        this.searchBox = $('.kd-hd-search');
        this.$keywordSearch.find('input[name=keyword]').val(this.data.keyword);
      },
      bindEvents() {
        this.container
        .find('#kd_search_open')
        .on('click', this.onClickOpenSearch.bind(this));
        this.container
          .find('#kd_search_close')
          .on('click', this.onClickCloseSearch.bind(this));
        $('#btnSearchTop').on('click', this.onClickSearchBtn.bind(this)).enterKeyup('#search_form');
      },
      onClickSearchBtn() {
        const keywordInput = this.$keywordSearch.find('input[name=keyword]');
        const keyword = keywordInput.val();
        if (keyword === '') {
          shopby.alert({ message: '검색어를 입력해주세요' }, () => {
            keywordInput.focus();
          });
          return false;
        }
        const categoryNo = shopby.utils.getUrlParam('categoryNo');
        let params = `keyword=${keyword}`;
        if (categoryNo) {
          params += `&categoryNo=${categoryNo}`;
        }
        window.location.href = `/pages/product/list.html?${params}`;
      },
      onClickOpenSearch() {
        if (this.searchBox.css('display') === 'none') {
          this.searchBox.slideDown();
        }
      },
      onClickCloseSearch() {
        this.searchBox.slideUp();
      },
    },
  };

  shopby.header.initiate();
});