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

    // todo: get shortlist cars
    let IDs = LovedCars.IDs.join("_");

    if (IDs.length > 0) {
        // foreach FillCarInShortlist(car);
        API.Stock.Search({ IDs: IDs })
            .then(resp => {
                resp.Cars.forEach(car => FillCarInShortlist(car));

                // remove loved cars not in list
                let returnedIDs = resp.Cars.map(o => o.StockNumber);
                let currentIDs = LovedCars.IDs;
                for (let id of currentIDs) {
                    if (returnedIDs.some(o => o == id) == false) {
                        LovedCars.RemoveCar(id);
                    }
                }
                LovedCars.Load();
            });
    }
    else {
        // todo: no loved cars? What to show?
    }
});

const FillCarInShortlist = (car) => {
    let tbody = document.querySelector("#shortlist-table tbody");
    let row = tbody.insertRow();

    // image
    let imgCell = row.insertCell();
    let carLink = document.createElement("a");
    carLink.href = car.WebsiteURL;
    imgCell.appendChild(carLink);

    let imgWrapper = BIG.CreateDiv("image-wrapper");
    carLink.appendChild(imgWrapper);
    let img = document.createElement("img");
    img.classList.add("lozad");
    img.src = car.CarDefaultImageUrl;
     imgWrapper.appendChild(img);

    // price rating
    let priceLabelText = car.PriceLabel.toLowerCase();
    let priceRatingLabel = document.createElement('div');
    priceRatingLabel.classList.add('price-label', priceLabelText);

    switch (priceLabelText) {
        case 'unknown':
            priceLabelText = 'No analysis';
            break;
        default:
            priceLabelText = `${car.PriceLabel} Price`;
            break;
    }

    priceRatingLabel.textContent = priceLabelText;

    let priceRatingLabelTick = document.createElement('div');
    priceRatingLabel.appendChild(priceRatingLabelTick);
    priceRatingLabelTick.classList.add('tick');

    imgCell.appendChild(priceRatingLabel);


    // button
    let buttonCell = row.insertCell();
    buttonCell.classList.add("buttons");
    let buttonLink = document.createElement("a");
    buttonLink.className = "btn secondary rounded";
    buttonLink.text = "View Car";
    buttonLink.href = car.WebsiteURL;
    buttonCell.appendChild(buttonLink);

    let favButton = document.createElement("a");
    favButton.className = "btn secondary favourite-car-button rounded loved";
    favButton.setAttribute("stockID", car.StockNumber);
    favButton.addEventListener("click", (e) => {
        e.preventDefault();
        let stockID = e.currentTarget.getAttribute("stockID");
        if (e.currentTarget.classList.contains("loved")) {
            LovedCars.RemoveCar(stockID);
            e.currentTarget.classList.remove("loved");
        }
        else {
            LovedCars.AddCar(stockID);
            e.currentTarget.classList.add("loved");
        }
    });
    buttonCell.appendChild(favButton);


    // make
    AddCell(row, car.Make);
    // model
    AddCell(row, car.Model);
    // spec
    AddCell(row, car.Spec);
    // year
    AddCell(row, car.YearString);
    // fuel
    AddCell(row, car.Fuel);
    // engine
    AddCell(row, car.EngineSizeString);
    // trans
    AddCell(row, car.Transmission);
    // mileag
    AddCell(row, car.Mileage.toLocaleString() + " miles");

    // doors
    AddCell(row, car.Doors);

    // bhp
    AddCell(row, car.BHP);

    //MPG
    AddCell(row, car.MPG);

    // mot
    AddCell(row, car.MOTExpiry);

    // body
    AddCell(row, car.BodyType);

    // co2
    AddCell(row, car.Co2);

    // colour
    AddCell(row, car.Colour);

    // seats
    AddCell(row, car.Seats);

    // pay now price
    AddCell(row, "£" + car.AskingPrice.toLocaleString());

}

const AddCell = (row, text) => {
    let cell = row.insertCell();
    cell.textContent = text;
    return cell;
}