function createStyleLink(url) {
    let res = document.createElement("link");
    res.rel = "stylesheet"; 
    res.href = url;
    document.head.appendChild(res); 
}

function find_squad() {
    var element = document.getElementById("find_squad_open");
    element.classList.toggle("show");
}

createStyleLink("https://images.hindi.news18.com/ibnkhabar/uploads/assets/event/common/css/ipl_home_strip_1612930954.css");
createStyleLink("https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,400;1,700&display=swap");

if(!window.Glide){
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "https://images.hindi.news18.com/ibnkhabar/uploads/assests/js/glide.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
}

async function initWidget () {
    let iplTeamData = {}, auctionPlayersData = {};
    
    try {
        iplTeamData = await fetch("https://election.nw18.com/electiondata/electionjson/ipl_auction_2021/ipl_auction_teams.json");
        iplTeamData = await iplTeamData.json();
    } catch(error) {
        console.log("Ipl teamdata fetch error", new Date());
        iplTeamData={}
    }
    
    try {
        auctionPlayersData = await fetch("https://election.nw18.com/electiondata/electionjson/ipl_auction_2021/ipl_auction_players.json?kn");
        auctionPlayersData = await auctionPlayersData.json();
    } catch(error) {
        console.log("Ipl teamdata fetch error", new Date());
        auctionPlayersData = {}
    } 
    // sets the visibility of the widget
    let siteUrl = window.location.href,
        onOff = 0,
        liveBlogLink = '';
        siteDomain = siteUrl.split(".")[0].split("//")[1],
        siteLanguage = 'english',
        languages = [ 
            "english", 
            "hindi",
            "gujarati",
            "bengali",
            "lokmat",
            "kannada",
            "tamil",
            "malayalam",
            "telugu",
            "punjabi",
            "assam",
            "odia",
            "urdu",
            "punjab",
        ];
    
        languages.forEach(lang => {
            if(siteDomain.includes(lang) && lang === 'punjab') {
                siteLanguage = 'punjabi'
            } else if(siteDomain.includes(lang)){
                siteLanguage = lang
            }
        });
        
        let absolutePath = "https://www.news18.com/";
        if(siteDomain.includes('stg')){
            absolutePath = "https://stg.news18.com/";
        } else if(siteDomain.includes('beta')) {
            absolutePath = "https://beta.news18.com/";
        }

        Object.keys(iplTeamData?.ipl_auction_teams[0]).forEach((siteKey)=>{
            if(siteKey === siteLanguage) {
                let siteData = iplTeamData?.ipl_auction_teams[0][siteKey];
                onOff = Number.parseInt(siteData?.onoff);
                liveBlogLink = siteData?.url;
            }
        });

        if(siteLanguage.includes('localhost'))
            onOff = 1;

    // condition which checks the visibility and response data to proceed
    if((Object.keys(auctionPlayersData) || []).length && (Object.keys(iplTeamData) || []).length && onOff) {
        let iplLiveUpdateText = iplTeamData?.ipl_auction_teams[0]?.text;
        let iplLiveTextClass = iplLiveUpdateText.toLowerCase().trim() !== 'live updates' ? 'ipl_widget_highlight' : '';
        
        let playersTeamList = auctionPlayersData?.ipl_auction_players?.teams;
        let playersTeamListKeys = Object.keys(playersTeamList);
        
        let playersArray = [];
        playersTeamListKeys.forEach((teams)=>{
            (playersTeamList[teams] || []).forEach((player)=>{
                const {playername, tallydisplay} = player;
                let checkIfPlayerExists = playersArray.find(p => p && p.playername === playername) 
                if(!checkIfPlayerExists && tallydisplay){
                    playersArray.push(player);
                }
            })
        })
        
        playersArray.sort((a, b)=>{return Number.parseInt(a.tallydisplay) - Number.parseInt(b.tallydisplay)});
        let playersList = ``;
        let dotsButton = ``;
        let moneyUnit = siteLanguage === 'hindi' ? 'करोड़' : 'CR.';
        playersArray.forEach((player,index)=>{
            let {playername,ipl2021team,type,playernamehindi, costinrcr, typehindi} = player,
            teamClassName = ipl2021team.trim() === "PBKS" ? "kXip" : ipl2021team.toLowerCase(),
            displayName = siteLanguage === 'hindi' && playernamehindi ? playernamehindi : playername,
            displayType = siteLanguage === 'hindi' && typehindi ? typehindi : type,
            playerLink = teamUrl(ipl2021team);
            playersList +=`<div class="ipl_widget_row ${teamClassName}">
            <a href="${playerLink}">
                        <div class="ipl_widget_row_left">
                        <p>${displayName}</p>
                        <span>${ipl2021team} | ${displayType}</span>
                        </div>
                        <p class="ipl_widget_row_right">&#x20B9 ${costinrcr}<br/><span>(${moneyUnit})</span></p>
                        </a>
                        </div>`;
                        dotsButton += `<button class="glide__bullet" data-glide-dir="=${index}"></button>`;
        })

        function teamUrl(teamName) {
            let url = "";
            if(teamName == 'CSK'){
                url = "ipl-auction-2021/csk-players-list-2/";
            } else if(teamName == 'DC'){
                url = "ipl-auction-2021/dc-players-list-3/";
            } else if(teamName == 'KKR'){
                url = "ipl-auction-2021/kkr-players-list-4/";
            } else if(teamName == 'PBKS'){
                url = "ipl-auction-2021/kxip-players-list-5/";
            } else if(teamName == 'MI'){
                url = "ipl-auction-2021/mi-players-list-6/";
            } else if(teamName == 'RCB'){
                url = "ipl-auction-2021/rcb-players-list-7/";
            } else if(teamName == 'RR'){
                url = "ipl-auction-2021/rr-players-list-8/";
            } else if(teamName == 'SRH'){
                url = "ipl-auction-2021/srh-players-list-9/";
            }

            return siteLanguage === 'hindi'? `/${url}` : `${absolutePath}cricketnext/${url}`;
        }
                    
        let dropDownLlist = siteLanguage === 'hindi' ? `
            <li><a href="/ipl-auction-2021/top-10-players-list-1/">Top 10 खिलाड़ी</a></li>
            <li><a href="/ipl-auction-2021/csk-players-list-2/">चेन्नई सुपर किंग्स</a></li>
            <li><a href="/ipl-auction-2021/dc-players-list-3/">दिल्ली कैपिटल्स</a></li>
            <li><a href="/ipl-auction-2021/kkr-players-list-4/">कोलकाता नाइट राइडर्स</a></li>
            <li><a href="/ipl-auction-2021/kxip-players-list-5/">पंजाब किंग्स</a></li>
            <li><a href="/ipl-auction-2021/mi-players-list-6/">मुंबई इंडियंस</a></li>
            <li><a href="/ipl-auction-2021/rcb-players-list-7/">रॉयल चैलेंजर्स बैंगलोर</a></li>
            <li><a href="/ipl-auction-2021/rr-players-list-8/">राजस्थान रॉयल्स</a></li>
            <li><a href="/ipl-auction-2021/srh-players-list-9/">सनराइजर्स हैदराबाद</a></li>
            <li><a href="/ipl-auction-2021/unsold-players-list-10/">अनसोल्ड खिलाड़ी</a></li>
            `:`
            <li><a href="${absolutePath}cricketnext/ipl-auction-2021/top-10-players-list-1/">Top 10 Buys</a></li>
            <li><a href="${absolutePath}cricketnext/ipl-auction-2021/csk-players-list-2/">Chennai Super Kings</a></li>
            <li><a href="${absolutePath}cricketnext/ipl-auction-2021/dc-players-list-3/">Delhi Capitals</a></li>
            <li><a href="${absolutePath}cricketnext/ipl-auction-2021/kkr-players-list-4/">Kolkata Knight Riders</a></li>
            <li><a href="${absolutePath}cricketnext/ipl-auction-2021/kxip-players-list-5/">Punjab Kings</a></li>
            <li><a href="${absolutePath}cricketnext/ipl-auction-2021/mi-players-list-6/">Mumbai Indians</a></li>
            <li><a href="${absolutePath}cricketnext/ipl-auction-2021/rcb-players-list-7/">Royal Challengers Bangalore</a></li>
            <li><a href="${absolutePath}cricketnext/ipl-auction-2021/rr-players-list-8/">Rajasthan Royals</a></li>
            <li><a href="${absolutePath}cricketnext/ipl-auction-2021/srh-players-list-9/">Sunrisers Hyderabad</a></li>
            <li><a href="${absolutePath}cricketnext/ipl-auction-2021/unsold-players-list-10/">Unsold Players</a></li>
        `;
        
        let detailPageLink = siteLanguage === 'hindi' ? '/ipl-auction-2021/': `${absolutePath}cricketnext/ipl-auction-2021/`,
            iplAuctionText = siteLanguage === 'hindi' ? 'आईपीएल ऑक्शन 2021' : 'IPL Auction 2021',
            iplLiveBlogText = siteLanguage === 'hindi' ? 'आईपीएल ऑक्शन लाइव ब्लॉग' : 'IPL Auction Live Blog',
            iplDetailView = siteLanguage === 'hindi' ? 'विस्तार से पढ़ें' : 'Detailed view',
            findPlayerSquad = siteLanguage === 'hindi' ? 'सर्च करें' : 'Find player by squad',
            classForUrudu =  siteLanguage === 'urdu' ? "ipl-widget-urudu" : "",
            iplAuctionLink = siteLanguage === 'hindi' || siteLanguage === 'english' ? detailPageLink : liveBlogLink,
            hideDetailedView = siteLanguage === 'hindi' || siteLanguage === 'english' ? "" : "hide-detailed-view";

        let iplWidget = `<style>
                .ipl_widget_highlight::after {
                    display: none;
                }
                .ipl_widget_text span a{
                    text-decoration: none;
                    color: #fff;
                }
                #ipl_widget {
                    min-height: 62px;
                }
            </style>
            <div class="ipl_widget_outter ${classForUrudu}">
                <div class="ipl_widget">
                    <div class="ipl_widget_left">
                        <a href="${iplAuctionLink}">
                            <p class="ipl_widget_text ${iplLiveTextClass}" id="ipl_widget_text">${iplLiveUpdateText}<span>${iplAuctionText}</span></p>
                            <i><img src="https://images.hindi.news18.com/ibnkhabar/uploads/assets/event/common/others/players_icon_1612895589.svg"/></i>
                        </a>	
                        <a href="${detailPageLink}" class="detailedview ${hideDetailedView}">${iplDetailView}</a>
                    </div>
                    <div class="ipl_widget_midd">
                        <div class="ipl_widget_slider">
                            <div class="glide__track" data-glide-el="track">
                                <div class="glide__slides" id="players-list">
                                    ${playersList}
                                </div>
                            </div>
                            <div class="glide__bullets" id="glide__bullets_id" data-glide-el="controls[nav]">
                            ${dotsButton}
                            </div>
                        </div>
                    </div>
                    <div class="ipl_widget_right">
                        <a href="${liveBlogLink}" class="ipl_liveblog">${iplLiveBlogText}</a>
                        <button onclick="find_squad()" class="find_squad">${findPlayerSquad}</button>
                        <ul class="find_squad_open" id="find_squad_open">
                            ${dropDownLlist}
                        </ul>
                    </div>
                </div>
            </div>`
            
        // set widget to #ipl-widget div
        document.getElementById("ipl-widget").innerHTML = iplWidget;

        
        if ((document.getElementsByClassName('ipl_widget_slider') || []).length > 0 && playersArray.length > 0){
            
            let interValGlide = setInterval(() => {
                if(window.Glide){
                    setTimeout(()=>{
                        new Glide('.ipl_widget_slider', {
                            autoplay: 5000,
                            type: 'carousel',
                            perView: 3,
                            gap:10,
                            slidesToShow: 1,
                            dots: '#dots',
                            draggable: true,
                            
                            breakpoints: {
                                767: {
                                    perView: 1,
                                    slidesToShow: 1,
                                    peek: {
                                        before: 0,
                                        after: 70,
                                    }
                                }
                            }
                        }).mount()
                    },300)
                    clearInterval(interValGlide);
                }
            });
        }
        
    } else {
        if(document.getElementById("ipl-widget")){
            document.getElementById("ipl-widget").style.minHeight ='0px';
        }
    }
}

try {
    initWidget();
}catch(error){
    console.log(error);
}