main.js

import '../component/search-bar.js';
import DataSource from '../data/data-source.js';
import rockets from './../data/rockets.js'

function SetVar(){
    this.contentSearch = document.querySelector("#content-search");
    this.rockelement =  document.querySelector("#rocketlist");

    this.SearchElement = document.querySelector("search-bar");

    this.refreshElement = document.querySelector("#refreshButtonElement");
    this.cbox = document.querySelector(".cbox");
    this.btnview = document.querySelector('#btnview');
    this.contentSearch = document.querySelector("#content-search");
    this.pagination = document.querySelector("#pagination");
    this.seacrhcontainer = document.querySelector("#search-container");
}

const main = () => {
    const getVar = new SetVar();
//  Tampilan halam utama tampilkan seluruh data rocket
    rockets.forEach(rocket => {
            getVar.contentSearch.style.display = 'none';

            const {mission,launch_date,imgrocket} = rocket;

            const createListRocket = document.createElement("div");
            createListRocket.setAttribute("class","cbox");
            createListRocket.innerHTML =
            `<img src="${imgrocket}" alt="" class=" imglist" width="200">
            <hr>
            <p> <b>Mission Name : ${mission}</b>$</p>
            <p> <b>Launch Date Utc :</b> ${launch_date}</p>
            <button type="button" class="btnview" id="btnview" value="${mission}" onclick="viewData(this)">View</button>
            </div>`;
            getVar.rockelement.appendChild(createListRocket);
    })

    // aksi ketika pencarian
    const onButtonSearchClicked = () => {
        if(getVar.SearchElement.value == ""){
            alert("Please input you search!");
        }else{
        getVar.rockelement.innerHTML = "";
        DataSource.searchRocket(getVar.SearchElement.value)
        .then(renderResult)
        .catch(fallbackResult)
        }
    };

    // aksi refresh halaman utama
    const refreshPage = () => {
        window.location.reload();
    }

    // fungsi mencari data pencarian kata kunci
    const renderResult = (results => {
        getVar.rockelement.innerHTML = "";
        results.forEach(function(rocket) {
            const {mission,launch_date,imgrocket} = rocket;

            const RocketElement = document.createElement("div");
            RocketElement.setAttribute("class","cbox");
            RocketElement.innerHTML =
            `<img src="${imgrocket}" alt="" class="imglist" width="200">
            <hr>
            <p> <b>Mission Name :</b> ${mission} </p>
            <p> <b>Launch Date Utc :</b> ${launch_date} </p>
            <button type="button" class="btnview" id="btnview" value="${mission}" onclick="viewData(this)">View</button>
            </div>`;
            getVar.rockelement.appendChild(RocketElement);
        })
    })

    const fallbackResult = (message => {
        getVar.rockelement.innerHTML = "";
        getVar.rockelement.innerHTML =`<h2>${message}</h2>`;
    })

    getVar.SearchElement.clickEvent = onButtonSearchClicked;
    getVar.SearchElement.clickRefresh = refreshPage;

    // panggil fungsi pagination
    page();

};

// fungsi value dari button view rocket
    const viewData = (key =>{
        DataSource.searchRocket(key.value)
        .then(renderResult)
    })

    // tampilkan data ketika click view view
    const renderResult = (results => {
        const getVar = new SetVar();
        getVar.rockelement.remove();
        getVar.pagination.style.display = "none";
        getVar.seacrhcontainer.style.display = "none";
        getVar.contentSearch.style.display = "block";
        results.forEach(rocket => {
            const {mission,launch_date,youtube} = rocket;

            const ytChange = youtube.replace('https://www.youtube.com/watch?v=','https://www.youtube.com/embed/');
        getVar.contentSearch.innerHTML =
        `<button id="back" class="back" onclick="back()">&laquo;</button>&nbsp; Detail Mission<br><br>
        <iframe src="${ytChange}"></iframe>`;
        const contentView = document.createElement("div");
        contentView.setAttribute("class","content");
        contentView.innerHTML =
        `<p>Mission Name :</p>
        <p>Rocket Name : </p>
        <p>Rocket Type :</p>
        <p>Launch Date UTC : </p>
        <p>Launch Date Local : </p>
        <p>National : </p>
        <p>Playload Type : </p>
        <p>Detail : </p>
        </div>`;
        getVar.contentSearch.appendChild(contentView);
        })
    })


    const back = () => {
        window.location.reload();
    }

//// Pagination sampe kebawah

const page = () =>{
    var Items = $('#rocketlist .cbox').length;
    var limitPerItem = 4;
    $("#rocketlist .cbox:gt(" +(limitPerItem -1)+ ")").hide();
    var totalItem = Math.round(Items / limitPerItem);
    $('.item').append("<a href='javascript:void(0)'class='current-page active'> " + 1 +"</a>");

        for(var i = 2 ; i <= totalItem; i++){
            $('.item').append("<a class='current-page' href='javascript:void(0)'>" + i +"</a>");
        }
    $('.item').append("<a id='next-page' href='javascript:void(0)'>&raquo;</a>");

    $(".item a.current-page").on("click", function(){
        if($(this).hasClass("active")) {
            return false;
        } else {
        var currentPage = $(this).index();
        $(".item a").removeClass("active");
        $(this).addClass("active");
        $("#rocketlist .cbox").hide();

        var getTotal = limitPerItem * currentPage;
            for(var i = getTotal - limitPerItem; i < getTotal; i++){
                $("#rocketlist .cbox:eq(" + i +")").show();
            }
        }
    });

    $("#next-page").on("click", function() {
        var currentPage = $(".item a.active").index();
        if(currentPage === totalItem){
            return false;
        } else {
            currentPage++;
            $(".item a").removeClass("active");
            $("#rocketlist .cbox").hide();

            var getTotal = limitPerItem * currentPage;
            for(var i = getTotal - limitPerItem; i < getTotal; i++){
                $("#rocketlist .cbox:eq("+i+")").show();
            }
            $(".item a.current-page:eq("+(currentPage-1) +")").addClass("active");
        }

    });

    $("#previous-page").on("click", function() {
        var currentPage = $(".item a.active").index();
        if(currentPage === 1){
            return false;
        } else {
            currentPage--;
            $(".item a").removeClass("active");
            $("#rocketlist .cbox").hide();

            var getTotal = limitPerItem * currentPage;
            for(var i = getTotal - limitPerItem; i < getTotal; i++){
                $("#rocketlist .cbox:eq("+i+")").show();
            }
            $(".item a.current-page:eq("+(currentPage-1) +")").addClass("active");
        }

    });
}
// Akhir pagination
export default main;