
async function goi_sp_tu_api(): Promise<ProductInfo[]> {
    return new Promise((resolve, reject) => {
        return resolve(listproduct_mau);
    })
}


async function hienthi_sp() {
    const lay_sp_tu_api: ProductInfo[] = await goi_sp_tu_api();

    // code hien thi danh sach dang dien ra
    // Usage example:
    showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started');
    showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming');
    showListProductHome(lay_sp_tu_api, 'ended', 'js-holder-list-ended');
}

function showListProductHome(lay_sp_tu_api: ProductInfo[], status: string, holderId: string) {
    const html: string[] = [];
    const holder = document.getElementById(holderId);

    lay_sp_tu_api
        .filter((product: ProductInfo) => product.status == status)
        .forEach(function (product, keyIndex) {
            html.push(
                xayhtml(product)
            );
            if (status != 'ended' || product.to_time > product.from_time) {
                const countdownTime = (status == 'started') ? product.to_time : product.from_time;
                countDown(`js-deal-time-${product.productId}`, countdownTime);
            }
        });

    if (holder) {
        holder.innerHTML = html.join('');
    }
}

function xayhtml(product: ProductInfo) {
    var Htmlcheckstatus: string = ''
    if (product.status == 'started') {
        Htmlcheckstatus = `<div class="deal-time-holder d-flex align-items space-center">
                    <div class="txt">Còn lại:</div>
                    <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.to_time}">
                    </div>
                </div>
                <a href="/auction_program/product-detail.html?id=${product.productId}" class="btn-auction">Đấu giá ngay</a>`;
    } else if (product.status == 'coming') {
        Htmlcheckstatus = `<div class="deal-time-holder d-flex align-items space-center">
                        <div class="txt">Bắt đầu sau:</div>
                        <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.from_time}">
                        </div>
                    </div>
                    <a href="/auction_program/product-detail.html?id=${product.productId}" class="btn-auction">Xem chi tiết</a>`;
    } else if (product.to_time < Date.now()) {
        Htmlcheckstatus = `<div class="starting-price">Thắng cuộc ${formatPrice(product.starting_price)}<u>đ</u></div>
<div class="deal-time-holder d-flex align-items space-center end">
    <div class="txt">Đã kết thúc</div>
</div>
<a href="/auction_program/product-detail.html?id=${product.productId}" class="btn-auction">Xem chi tiết</a>`;
    }
    return `<div class="product-item">
                <a href="/product-detail.html?id=${product.productId}" class="product-image">
                    <img src="${product.image}" alt="${product.product_name}">
                </a>
                <div class="info-product">
                    <a href="" class="product-name line-clamp-2">${product.product_name}</a>
                    <div class="product-cost">
                        Giá gốc: ${formatPrice(product.price)}đ
                    </div>
                    ${Htmlcheckstatus}
                </div>
            </div>
        `;
}

function formatPrice(price: number) {
    var b = price.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
    var len = b.length;
    b = b.substring(0, len - 3);
    return b;
}

function countDown(iid: string, endTime: number): void {

    const updateCountdown = () => {
        const now: number = Date.now();
        const distance: number = endTime - now;

        if (distance > 0) {
            const [days, hours, minutes, seconds] = getTimeComponents(distance);
            displayCountdown(iid, days, hours, minutes, seconds);
        } else {
            clearInterval(timer);
        }
    };

    // Initial update to avoid delay
    updateCountdown();

    const timer: NodeJS.Timeout = setInterval(updateCountdown, 1000);
}

function getTimeComponents(distance: number): [number, number, number, number] {
    const days: number = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours: number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes: number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds: number = Math.floor((distance % (1000 * 60)) / 1000);

    return [days, hours, minutes, seconds];
}

function displayCountdown(iid: string, days: number, hours: number, minutes: number, seconds: number): void {
    const element: HTMLElement | null = document.querySelector(`.${iid}`);
    if (element) {
        if (days > 0) {
            element.innerHTML = `
            <div class='item-time'><b>${formatTimeComponent(days)}</b></div>
            <div class='item-time'><b>${formatTimeComponent(hours)}</b></div>
            <div class='item-time'><b>${formatTimeComponent(minutes)}</b></div>
            <div class='item-time'><b>${formatTimeComponent(seconds)}</b></div>`;
        } else {
            element.innerHTML = `
            <div class='item-time'><b>${formatTimeComponent(hours)}</b></div>
            <div class='item-time'><b>${formatTimeComponent(minutes)}</b></div>
            <div class='item-time'><b>${formatTimeComponent(seconds)}</b></div>`;
        }
    }
}

function formatTimeComponent(component: number): string {
    return component <= 9 ? '0' + component : component.toString();
}


hienthi_sp();



