(async () => {
  const $brandLogoList = $('brand-logo-list'); // 브랜드 로고
  const $wordSearchList = $('word-search-list'); // 자음별 검색
  const $brandNameList = $('brand-name-list'); // 자음별 검색

  // [Aaron] 브랜드 로고 추출 후 렌더
  const brandBannerId = 'brand_banner';
  let brandBannerList;
  const { result: brandBanner } = await callShopApi(
    `/display/banners/id/${brandBannerId}`,
    'GET',
  );

  if (brandBanner.length > 0) {
    brandBannerList = brandBanner[0].accounts[0].banners.slice(0, 12);
  }

  const brandListHtml = renderHtml($brandLogoList, brandBannerList);
  $brandLogoList.append(brandListHtml);
  // END

  // 초성 추출함수용
  const wordKo = [
    'ㄱ',
    'ㄲ',
    'ㄴ',
    'ㄷ',
    'ㄸ',
    'ㄹ',
    'ㅁ',
    'ㅂ',
    'ㅃ',
    'ㅅ',
    'ㅆ',
    'ㅇ',
    'ㅈ',
    'ㅉ',
    'ㅊ',
    'ㅋ',
    'ㅌ',
    'ㅍ',
    'ㅎ',
  ];
  // 페이지 UI용
  const wordKo2 = [
    'ㄱ',
    'ㄴ',
    'ㄷ',
    'ㄹ',
    'ㅁ',
    'ㅂ',
    'ㅅ',
    'ㅇ',
    'ㅈ',
    'ㅊ',
    'ㅋ',
    'ㅌ',
    'ㅍ',
    'ㅎ',
  ];
  const wordEn = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z',
    '123',
  ];
  const wordList = {
    wordKo2,
    wordEn,
  };

  const wordSearchListHtml = renderHtml($wordSearchList, wordList);
  $wordSearchList.append(wordSearchListHtml);

  // [Aaron] 브랜드 리스트 조회 및 렌더
  const brandParams = {
    queryString: {
      pageNumber: 1,
      pageSize: 200,
      'filter.soldOutIncluded': false,
      hasTotalCount: true,
    },
  };
  const { result: brandList } = await callShopApi(
    '/display/brands?',
    'GET',
    brandParams,
  );

  // [Aaron] 브랜드별 초성 프로퍼티 추가
  const brandNameData = brandList.items.map((item, index) => {
    item.letter = getKoWordCho(item.mainBrandName);
    return item;
  });

  // [Aaron] 같은 초성의 경우 하나로 묶기
  const brandNameDataRework = brandNameData.reduce((acc, current) => {
    // 숫자일 경우는 '123'이라는 하나의 키값으로 통일
    if (!isNaN(current.letter)) {
      current.letter = '123';
    }
    acc[current.letter] = acc[current.letter] || [];
    acc[current.letter].push(current);
    return acc;
  }, {});

  // 위에서 만든 객체를 key로 돌려서 새로운 객체 return
  const reducedBrandNameData = Object.keys(brandNameDataRework).map((key) => {
    return {
      letter: key,
      products: brandNameDataRework[key],
    };
  });
  // END

  // [Aaron] 한글, 영문, 숫자 순으로 재정렬
  const patternNumber = /[0-9]/;
  const patternAlphabet = /[a-zA-Z]/;
  const patternHangul = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
  const orderLevelDesc = [patternNumber, patternAlphabet, patternHangul];

  function getLevel(char) {
    return orderLevelDesc.findIndex((pattern) => pattern.test(char));
  }

  const resortBrandData = reducedBrandNameData.sort((a, b) => {
    const aLevel = getLevel(a.letter.charAt(0));
    const bLevel = getLevel(b.letter.charAt(0));
    if (aLevel === bLevel) {
      return a.letter.charCodeAt(0) - b.letter.charCodeAt(0);
    }
    return bLevel - aLevel; // 오름 차순 정렬
  });
  // END

  // [Aaron] 전체 브랜드 렌더
  const allBrandNameListHtml = renderHtml($brandNameList, resortBrandData);
  $brandNameList.append(allBrandNameListHtml);

  // [Aaron] 브랜드 초성 클릭 이벤트 (선택된 문자 해당 브랜드 필터 및 렌더)
  $('word-search-list').on('click', 'li', ({ target, currentTarget }) => {
    const letter = $(currentTarget).data('letter');
    let brandData;
    if (!isNaN(letter)) {
      brandData = brandNameData.filter((data) => data.letter === '123');
    } else {
      brandData = brandNameData.filter((data) => data.letter === letter);
    }
    const bindingData = {
      products: brandData,
      letter,
    };
    const bindingArrData = [];
    bindingArrData.push(bindingData);

    $('.brand-list__sort li').removeClass('active');
    target.classList.add('active');

    const brandNameListHtml = renderHtml($brandNameList, bindingArrData);
    $('#brandNameSortList').remove();

    $brandNameList.append(brandNameListHtml);
  });
  // END

  // [Aaron] 한글 단어 첫글자 초성 추출
  function getKoWordCho(letter) {
    const CHO_PERIOD = Math.floor('까'.charCodeAt(0) - '가'.charCodeAt(0)); // 588 ( 28 * 21 )
    const JUNG_PERIOD = Math.floor('개'.charCodeAt(0) - '가'.charCodeAt(0)); // 28
    const HANGUL_START_CHARCODE = '가'.charCodeAt(0);
    const HANGUL_END_CHARCODE = '힣'.charCodeAt(0);
    const letterCode = letter.charCodeAt(0);

    // 조합 된 글자인지 체크 (가 ~ 힣 사이)
    if (
      !(
        HANGUL_START_CHARCODE <= letterCode && letterCode <= HANGUL_END_CHARCODE
      )
    ) {
      return letter[0];
    }

    const charCode = letterCode - HANGUL_START_CHARCODE;

    const choIndex = Math.floor(charCode / CHO_PERIOD); // 초성
    const jungIndex = Math.floor((charCode % CHO_PERIOD) / JUNG_PERIOD); // 중성
    const jongIndex = charCode % JUNG_PERIOD; // 종성

    return wordKo[choIndex];
  }
})();