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

export function openLandingPageSidebar(data, attributes)
{

    const productInfoSidebarLandingElement = document.querySelector('#product-info-sidebar-landing');
    productInfoSidebarLandingElement.scrollTop = 0;
    productInfoSidebarLandingElement.classList.add('product-info-sidebar-active');
    document.body.classList.add('product-info-sidebar-active-body');
    document.body.scrollTop = 0;
    document.body.classList.add('athena-overflow-hidden');

    const productInfoCloseButtonElement = document.querySelector('.product-info-close-button');
    productInfoCloseButtonElement.addEventListener('click', () => {
        productInfoSidebarLandingElement.classList.remove('product-info-sidebar-active');
        document.body.classList.remove('product-info-sidebar-active-body');
        document.body.classList.remove('athena-overflow-hidden');
    });

    const productInfoSidebarElement = document.querySelector('.product-info-sidebar-content');
    if(productInfoSidebarElement && productInfoSidebarElement.hasChildNodes()) {
        while(productInfoSidebarElement.hasChildNodes()) {
            productInfoSidebarElement.removeChild(productInfoSidebarElement.firstChild);
        }
    }

    productInfoSidebarElement.append(handleHtml(`
                <div class="product-info-sidebar-container">
                    <div class="product-info-top-sidebar-container">
                        <div class="product-info-image-container">
                            <img src="${data.image}" alt="${data.meta_description}" class="product-info-sidebar-image">
                        </div>
                        <div class="product-info-pi-container">
                            ${typeof data.brand?.label !== 'undefined' && data.brand.label ? `
                                <div>
                                    <span class="product-info-value product-info-brand">${data.brand.label}</span>
                                </div>
                            ` : ``}
                            ${typeof data.name !== 'undefined' && data.name ? `
                                <p class="product-info-value product-info-name">${data.name}</p>
                            ` : ``}
                            ${typeof data.original_sku !== 'undefined' && data.original_sku ? `
                                <div>
                                    <span class="product-info-key">Sku:</span> 
                                    <span class="product-info-value product-info-sku">${data.original_sku}</span>
                                </div>
                            ` : ``}
                            ${typeof data.availability !== 'undefined' && data.availability ? `
                                <span class="product-info-value">${data.availability === 1 ? 'In Stock' : 'Out of Stock'}</span>
                            ` : ``}
                            ${typeof data.autocomplete_price !== 'undefined' && data.autocomplete_price ? `
                                <p ${typeof data.autocomplete_sale_price !== 'undefined' && data.autocomplete_sale_price ? `class="athena-price athena-price-when-sale"` : `class="athena-price athena-sale-price"`}>${data.autocomplete_price}</p>
                                ${typeof data.autocomplete_sale_price !== 'undefined' && data.autocomplete_sale_price ? `
                                    <p class="athena-price">${data.autocomplete_sale_price}</p>
                                ` : ``}
                            ` : ``}
                            ${typeof data.short_description !== 'undefined' && data.short_description ? `
                                <p class="product-info-value product-info-description">${data.short_description}</p>
                            ` : ``}
                        </div>
                        <div class="tabs-category-landing">
                            ${handleCategoriesString(data.category_names)}
                        </div>
                    </div>
                    <div class="product-info-bottom-sidebar-container">    
                        ${data.description?.length === 0 && data.meta_description?.length === 0 && attributes?.length === 0 ? `` : `
                            <div class="pdp-tabs-landing">
                                ${data.description?.length === 0 && data.meta_description?.length === 0 ? `` : `
                                    <div class="pdp-tab-name-landing active-tab-title-landing" data-tab-id="tab-description-landing">Description</div>
                                `}
                                ${attributes?.length === 0 ? `` : `
                                    <div class="pdp-tab-name-landing ${data.description?.length === 0 && data.meta_description?.length === 0 ? `active-tab-title-landing` : ``}" data-tab-id="tab-details-landing">Details</div>
                                `}
                                ${data.description?.length === 0 && data.meta_description?.length === 0 ? `` : `
                                    <div id="tab-description-landing" class="pdp-tab-content-landing active-tab-content-landing">
                                    ${typeof data.description !== 'undefined' && data.description ? `
                                        <p class="product-info-value">${data.description}</p>
                                        <button class="show-more-landing hide-show-more-btn">Show More</button>
                                    ` : `
                                          ${typeof data.meta_description !== 'undefined' && data.meta_description ? `
                                              <p class="product-info-value">${data.meta_description}</p>
                                              <button class="show-more-landing hide-show-more-btn">Show More</button>
                                          ` : ``} 
                                    `}
                                </div>
                                `}
                                ${attributes?.length === 0 ? `` : `
                                    <div id="tab-details-landing" class="pdp-tab-content-landing ${data.description?.length === 0 && data.meta_description?.length === 0 ? `active-tab-content-landing` : ``}">
                                        <div class="tabs-attributes-landing">
                                            ${handleAttributesString(attributes)}
                                        </div>
                                    </div>
                                `}
                            </div>
                        `}                 
                        <div class="recommenders-autocomplete"></div>
                    </div>
                    </div>
                </div>
            `, '.product-info-sidebar-container'));

    new AthenaXAIRecommender({
        websiteToken: athenaConfig.websiteToken,
        apiUrl: athenaConfigDemo.storyUrl,
        recommenderId: 5,
        productSkus: [data.original_sku],
        renderElementSelector: '.recommenders-autocomplete',
        checkDOMContentLoaded: false
    });

    let productDescription = document.querySelector('#tab-description-landing .product-info-value');
    let showMoreLanding = document.querySelector('#tab-description-landing .show-more-landing');
    if(productDescription && showMoreLanding){
        if(productDescription.scrollHeight > productDescription.offsetHeight){
            showMoreLanding.classList.remove('hide-show-more-btn')
        }
        showMoreLanding.addEventListener('click', function(){
            if(productDescription.classList.contains('show-all-text')){
                productDescription.classList.remove('show-all-text')
                showMoreLanding.textContent = "Show More";
            }else{
                productDescription.classList.add('show-all-text')
                showMoreLanding.textContent = "Show Less";
            }

        });
    }


}

function handleAttributesString(attributes)
{
    let handleAttributesString = '';
    attributes.forEach(attribute => {
        handleAttributesString += `<div><span class="product-info-key-attribute">[${attribute[0]}] </span><span class="product-info-value-attribute">${attribute[1]}</span></div>`
    });

    return handleAttributesString;
}

function handleCategoriesString(categories)
{
    let handleCategoriesString = '';
    categories.forEach(category => {
        handleCategoriesString += `<div><span class="product-info-pil">${category}</span></div>`
    });

    return handleCategoriesString;
}

/**
 * Tabs in Autocomplete PDP Modal
 */
document.addEventListener('click', function(event){
    let activeTab = event.target.getAttribute('data-tab-id');
    let tabDetails = document.querySelector('#tab-details');
    let tabDescription = document.querySelector('#tab-description');
    let tabTitles = document.querySelectorAll('.pdp-tab-name');
    if(activeTab){
        if(activeTab == 'tab-details'){
            if(tabTitles.length){
                Array.from(tabTitles).forEach(function(element){
                    element.classList.remove('active-tab-title')
                });
            }
            event.target.classList.add('active-tab-title');
            tabDescription?.classList.remove('active-tab-content');
            tabDetails?.classList.add('active-tab-content');
        }
        if(activeTab == 'tab-description'){
            if(tabTitles.length){
                Array.from(tabTitles).forEach(function(element){
                    element.classList.remove('active-tab-title')
                });
            }
            event.target.classList.add('active-tab-title');
            tabDetails?.classList.remove('active-tab-content');
            tabDescription?.classList.add('active-tab-content');
        }
    }
});

/**
 * Tabs on Search PDP Modal
 */
document.addEventListener('click', function(event){
    let activeTab = event.target.getAttribute('data-tab-id');
    let tabDetails = document.querySelector('#tab-details-landing');
    let tabDescription = document.querySelector('#tab-description-landing');
    let tabTitles = document.querySelectorAll('.pdp-tab-name-landing');
    if(activeTab){
        if(activeTab == 'tab-details-landing'){
            if(tabTitles.length){
                Array.from(tabTitles).forEach(function(element){
                    element.classList.remove('active-tab-title-landing')
                });
            }
            event.target.classList.add('active-tab-title-landing');
            tabDescription?.classList.remove('active-tab-content-landing');
            tabDetails?.classList.add('active-tab-content-landing');
        }
        if(activeTab == 'tab-description-landing'){
            if(tabTitles.length){
                Array.from(tabTitles).forEach(function(element){
                    element.classList.remove('active-tab-title-landing')
                });
            }
            event.target.classList.add('active-tab-title-landing');
            tabDetails?.classList.remove('active-tab-content-landing');
            tabDescription?.classList.add('active-tab-content-landing');
        }
    }

    // Close product info on Search Page when click on filter mask
    if(event.target.classList.contains('product-popup-overlay')){
        document.body.classList.remove('product-info-sidebar-active-body');
        document.querySelector('#product-info-sidebar-landing')?.classList.remove('product-info-sidebar-active');
        document.body.classList.remove('athena-overflow-hidden');
    }

})