import {athenaConfigDemo} from '../global/athena-config.js';
import {handleHtml} from '../global/helpers/athena-global-helper.js';

export function homePage(){

    // Home Page Stories
    let athenaStoriesHome = document.querySelector('.athena-stories-home');
    if(athenaStoriesHome){
        let homepageStoryArray = athenaConfigDemo?.homePageStory;
        if(homepageStoryArray){
            homepageStoryArray.forEach(function(item) {

                athenaStoriesHome.append(
                    handleHtml(`
                    <div class="athena-story-item" data-recommender-id="${item.recommenderId}" data-recommender-sku="${item.recommenderSku}">
                        <div class="athena-story-item-img">
                            <img class="story-image" src="${item.image}" alt="Athena story">
                        </div>
                        <p class="athena-story-title">${item.title}</p>
                    </div>
                `, '.athena-story-item')
                );


            });

        }
    }

    // Home Page Banner
    let homeBannerContainer = document.querySelector('.home-banner-container');
    if(homeBannerContainer){
        let homeBanner = athenaConfigDemo?.homePageBanner;
        if(homeBanner){
            homeBannerContainer.append(
                handleHtml(`
                    <div class="home-banner" style="background: url(${athenaConfigDemo?.homePageBanner?.image}) no-repeat center center; background-size: cover;">
                        <p class="banner-text-big">${athenaConfigDemo?.homePageBanner?.bannerTextBig}</p>
                        <p class="banner-text-small">${athenaConfigDemo?.homePageBanner?.bannerTextSmall}</p>
                        <a href="${athenaConfigDemo?.homePageBanner?.bannerBtnLink}">${athenaConfigDemo?.homePageBanner?.bannerBtnText}</a>
                    </div>
                `, '.home-banner')
            );
        }
    }

    // Home Page Tabs
    let recommendersTabsHomePage = document.querySelector('.recommenders-tabs-home-page');
    if(recommendersTabsHomePage){
        let tabs = athenaConfigDemo?.homePageTabs;
        if(tabs){

            tabs.forEach(function(item) {
                recommendersTabsHomePage.append(
                    handleHtml(`
                    <button class="home-page-tabs-btn ${item.isActive ? 'active' : ''}" data-recommender-home-id="${item.recommenderHomeId}" data-recommender-home-sku="${item.recommenderHomeSku}">
                        ${item.buttonText}
                    </button>
                `, '.home-page-tabs-btn')
                );

            });

        }
    }

    // Header Chyron
    let chyron = document.querySelector('.chyron');
    if(chyron && athenaConfigDemo?.headerTopText){
        chyron.innerHTML = athenaConfigDemo.headerTopText;
    }

}
