class MakeModelSearchManager {
    AllModels = {};


}
const makeModelManager = new MakeModelSearchManager();

document.addEventListener("DOMContentLoaded", () => {

    // on desktop, we want to have a blue bg to avoid weird video flicker, so we show a temporary element with the same dimensions as the video, then we hide it on video load
    const videoElementDesktop = document.querySelector(".bg-video-wrapper video.desktop-video");
    if (videoElementDesktop) {
        videoElementDesktop.addEventListener('loadeddata', (e) => {
            ActivateVideo(videoElementDesktop);
        });
    }


    const videoElementMobile = document.querySelector(".bg-video-wrapper video.mobile-video");
    if (videoElementMobile) {
        videoElementMobile.addEventListener('loadeddata', (e) => {
            ActivateVideo(videoElementMobile);

        });
    }



    let slider = document.getElementById("choice-slider-mobile-only");
    if (slider) {
        //tiny slider https://github.com/ganlanyuan/tiny-slider
        tns({
            container: '#choice-slider-mobile-only',
            "loop": false,
            "controls": false,
            "nav": false,
            "fixedWidth": 150,
            "mouseDrag": true,
            "swipeAngle": false,
            "speed": 400
        });
    }

    SetupMakeModelSearch();
    document.getElementById("make-select").addEventListener("change", ChangeMakeSearch);
    if (document.getElementById("main-search-button"))
        document.getElementById("main-search-button").addEventListener("click", ClickSearchButton);

    document.getElementById("monthly-payment").addEventListener("change", UpdateBudgetSection);
    document.getElementById("monthly-payment-deposit").addEventListener("change", UpdateBudgetSection);
    UpdateBudgetSection();

    document.querySelectorAll(".radiobox").forEach(ele => ele.addEventListener("click", UpdateBudgetSection));

    document.querySelectorAll('.bunny-ears-parent-wrapper .selectors-wrapper select').forEach(elem => elem.addEventListener('change', BunnyEarsSelectChanged));

    //const popupRan = localStorage.getItem("homepage-popup");
    //if (popupRan != "true") {
    //    try { ShowModal("popup-modal"); } catch { }
    //    localStorage.setItem("homepage-popup", "true");
    //}
});

const BunnyEarsSelectChanged = (event) => {
    const select = event.currentTarget;
    const selectorsWrapper = select.closest('.selectors-wrapper');
    const bunnyEarsWrapper = select.closest('.bunny-ears-parent-wrapper');

    const searchButton = bunnyEarsWrapper.querySelector('.search-button-wrapper .btn');

    const spinner = bunnyEarsWrapper.querySelector('.lds-dual-ring-wrapper');

    let make = selectorsWrapper.querySelector('#make-select').value;
    let model = selectorsWrapper.querySelector('#model-select').value;

    let monthlyPrice = '-1';
    if (selectorsWrapper.querySelector('.monthly-price-select:not(.hidden)'))
        monthlyPrice = selectorsWrapper.querySelector('.monthly-price-select:not(.hidden) select').value;

    let cashPrice = '-1';
    if (selectorsWrapper.querySelector('.cash-price-select:not(.hidden)'))
        cashPrice = selectorsWrapper.querySelector('.cash-price-select:not(.hidden) select').value;

    let spinnerTimeout = setTimeout(() => {
        spinner.classList.remove('hidden');
        searchButton.classList.add('text-colour-transparent'); // hide  button's text. This is needed so we don't disturb the button's original size.

    }, 200);


    API.Stock.GetStockCountForSelectedFilters(make, model, monthlyPrice, cashPrice)
        .then(response => {

            clearTimeout(spinnerTimeout);

            spinner.classList.add('hidden');
            searchButton.classList.remove('text-colour-transparent');

            const count = parseInt(response.Count);

            let searchString = `Search ${count.toLocaleString()} cars`;
            if (isNaN(count) || count == 0)
                searchString = 'Search all cars';

            searchButton.textContent = searchString;
        })
        .catch(error => {
            spinner.classList.add('hidden');
            searchButton.classList.remove('text-colour-transparent');
            searchButton.textContent = "Search all cars";
        });

}

const ActivateVideo = (video) => {
    let videoPlaceholder = document.querySelector(".bg-video-wrapper .video-loading-placeholder");

    let timeToPause = 8000;
    if (videoPlaceholder) {

        if (videoPlaceholder.classList.contains("no-images")) {
            timeToPause = 0;
            videoPlaceholder.classList.add("hidden);")
        }
    }

    if (video.readyState >= 3) {

        if (videoPlaceholder) {

            video.pause();


            setTimeout(() => {
                video.play();
                setTimeout(() => {
                    videoPlaceholder.classList.add("hidden");
                }, 900);
            }, timeToPause);
        }

    }

}

const ClickSellButton = () => {
    let pxReg = document.getElementById("reg-sell-input").value;
    let pxMileage = parseInt(document.getElementById("mileage-sell-input").value);

    if (pxReg.length > 7 || pxReg.length == 0) {
        BIG.Animations.ShakeX(document.getElementById("reg-sell-input"));
        // todo: wiggle px reg
        return;
    }
    if (isNaN(pxMileage)) {
        // todo: wiggle mileage?
        BIG.Animations.ShakeX(document.getElementById("mileage-sell-input"));
        return;
    }

    document.location.href = "/part-exchange/details?reg=" + pxReg + "&mileage=" + pxMileage + "&sellOnly=true";
}

const UpdateBudgetSection = () => {
    let monthlyPaymentBudget = parseFloat(document.getElementById("monthly-payment").value);
    let monthlyPaymentDeposit = parseFloat(document.getElementById("monthly-payment-deposit").value);

    let totalBudget = monthlyPaymentBudget;

    totalBudget *= 60; // 5 years

    totalBudget *= 0.8258;
    totalBudget += monthlyPaymentDeposit;


    totalBudget = Math.round((totalBudget / 100)) * 100;

    document.getElementById("monthly-budget-summary").textContent = "£" + NumberWithCommas(totalBudget.toFixed(0));

    // Update our finance sample to store our deposit that they selected
    let financeDetails = JSON.parse(localStorage.getItem("financeDetails"));
    if (financeDetails) {
        financeDetails.Deposit = monthlyPaymentDeposit;
    }
    else {
        financeDetails = {};
        financeDetails.Term = 60;
        financeDetails.Deposit = monthlyPaymentDeposit;
        financeDetails.AnnualMileage = 10_000;
        financeDetails.PXDeposit = 0;
        financeDetails.IncludePXDeposit = false;
    }
    localStorage.setItem("financeDetails", JSON.stringify(financeDetails));


    let href = "/used-cars/?monthlyPriceTo=" + monthlyPaymentBudget + "&sort=high-price";

    let valArray = BIG.GetMultipleRadioboxValues("lifestyle");

    // valArray has duplicate values as the group ('lifestyle') is appearing in desktop collection, as well as mobile
    // 'Set' is a collection storing only unique values of any type (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
    let valArrayUnique = [... new Set(valArray)];
    let val = valArrayUnique.join('_');

    if (val)
        href += "&body=" + val;
    let searchButton = document.getElementById("see-cars-in-budget-search");
    searchButton.href = href;

    let req = new StockAPISearchRequest();
    req.deposit = monthlyPaymentDeposit;
    req.monthlyPriceTo = monthlyPaymentBudget;
    req.BodyTypes = val;
    req.topLevelOnly = true;

    API.Stock.Search(req)
        .then(response => {
            searchButton.innerText = 'Search ' + response.TotalCount.toLocaleString() + ' cars by monthly payment';
        })
        .catch(() => {
        });

}

const ClickSearchButton = () => {

    let makeSelect = document.getElementById("make-select").value;
    let modelSelect = document.getElementById("model-select").value;

    if (makeSelect == "-1")
        makeSelect = "";
    if (modelSelect == "-1")
        modelSelect = "any";

    let searchUrl = "/used-cars/";
    if (makeSelect.length > 0)
        searchUrl += makeSelect.replace(/ /g, '-') + "/";

    if (modelSelect.toLowerCase() != "any" && modelSelect.toLowerCase() != "any model") {
        searchUrl += modelSelect.replace(/ /g, '-') + "/";
    }

    document.location.href = searchUrl.toLowerCase();

}

const ChangeMakeSearch = () => {
    let selectedMake = event.currentTarget.value;

    let modelSelect = document.getElementById("model-select");
    modelSelect.removeAttribute("disabled");
    modelSelect.innerHTML = "";

    let modelOpts = makeModelManager.AllModels[selectedMake.toLowerCase()];
    let anyModelOpt = document.createElement("option");
    anyModelOpt.innerText = "Any Model";
    modelSelect.appendChild(anyModelOpt);
    modelOpts.forEach(modelOpt => {
        modelSelect.append(modelOpt);
    });
}

const SetupMakeModelSearch = () => {

    let models = document.querySelectorAll("#model-select option");

    models.forEach(modelOpt => {
        let make = modelOpt.getAttribute("make");
        if (!make)
            return;

        let obj = makeModelManager.AllModels[make.toLowerCase()];
        if (!obj)
            makeModelManager.AllModels[make.toLowerCase()] = [];

        makeModelManager.AllModels[make.toLowerCase()].push(modelOpt);
    });
}