/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './salla-button2.js';

const sallaCountDownCss = ".s-count-down-horizontal{background-color:rgba(0, 0, 0, 0.06);background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}";

const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        /**
         * The size of the count down
         * */
        this.size = 'md';
        /**
         * The color of the count down
         * */
        this.color = 'dark';
        /**
         * The digits lang to show in the count down
         * */
        this.digits = 'auto';
        /**
         * If true, hides days segment when days = 0, and hides hours segment when both days and hours = 0.
         * Matches salla-timer behaviour. Off by default for backward compatibility.
         * */
        this.autoSegments = false;
        this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
        this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
        this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
        this.secondsLabel = salla.lang.getWithDefault('pages.checkout.second', 'ثانية');
        this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
        this.invalidDate = salla.lang.getWithDefault('blocks.buy_as_gift.incorrect_date', 'الرجاء إدخال الموعد بشكل صحيح');
        this.offerEnded = false;
        this.parseFailed = false;
        this.showDays = true;
        this.showHours = true;
        this.days = this.number(0);
        this.hours = this.number(0);
        this.minutes = this.number(0);
        this.seconds = this.number(0);
        salla.lang.onLoaded(() => {
            this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
            this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
            this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
            this.invalidDate = salla.lang.getWithDefault('blocks.buy_as_gift.incorrect_date', 'الرجاء إدخال الموعد بشكل صحيح');
            this.secondsLabel = salla.lang.getWithDefault('pages.checkout.second', 'ثانية');
            this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
        });
        if (this.date && this.isValidDate(this.date)) {
            this.startCountDown();
        }
    }
    /**
     * End the count down
     * */
    async endCountDown() {
        clearInterval(this.countInterval);
        this.offerEnded = true;
        this.days = this.number(0);
        this.hours = this.number(0);
        this.minutes = this.number(0);
        this.seconds = this.number(0);
    }
    componentWillLoad() {
        if (typeof this.preOrder === 'string') {
            try {
                this.normalizedPreOrder = JSON.parse(this.preOrder);
            }
            catch {
                this.normalizedPreOrder = undefined;
            }
        }
        else {
            this.normalizedPreOrder = this.preOrder;
        }
        if (this.normalizedPreOrder?.end_date) {
            this.date = this.normalizedPreOrder.end_date;
        }
        if (this.date && this.isValidDate(this.date)) {
            this.startCountDown();
        }
    }
    /**
     * Normalize US-style date formats to ISO "YYYY-MM-DD[ HH:mm:ss]".
     */
    normalizeDate(date) {
        // "MM-DD-YYYY,HH:mm:ss am/pm"
        const dateTimeMatch = date.match(/^(\d{1,2})-(\d{1,2})-(\d{4}),(\d{1,2}):(\d{2}):(\d{2})\s*(am|pm)$/i);
        if (dateTimeMatch) {
            const [, month, day, year, rawHour, min, sec, period] = dateTimeMatch;
            let hour = parseInt(rawHour, 10);
            if (period.toLowerCase() === 'pm' && hour < 12)
                hour += 12;
            if (period.toLowerCase() === 'am' && hour === 12)
                hour = 0;
            const hh = String(hour).padStart(2, '0');
            const mm = String(month).padStart(2, '0');
            const dd = String(day).padStart(2, '0');
            return `${year}-${mm}-${dd} ${hh}:${min}:${sec}`;
        }
        // "MM-DD-YYYY" (date only, 4-digit year at the end distinguishes it from ISO YYYY-MM-DD)
        const dateOnlyMatch = date.match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/);
        if (dateOnlyMatch) {
            const [, month, day, year] = dateOnlyMatch;
            const mm = String(month).padStart(2, '0');
            const dd = String(day).padStart(2, '0');
            return `${year}-${mm}-${dd}`;
        }
        // Zero-pad "YYYY-M-D" shapes since V8's ISO parser rejects unpadded month/day.
        const isoLooseMatch = date.match(/^(\d{4})-(\d{1,2})-(\d{1,2})(?:[ T](\d{1,2}:\d{2}:\d{2}))?$/);
        if (isoLooseMatch) {
            const [, year, month, day, time] = isoLooseMatch;
            const mm = String(month).padStart(2, '0');
            const dd = String(day).padStart(2, '0');
            return time ? `${year}-${mm}-${dd} ${time}` : `${year}-${mm}-${dd}`;
        }
        return date;
    }
    isValidDate(date) {
        const normalized = this.normalizeDate(date);
        let dateHasDashes = normalized.includes('-'), dateParts = normalized.split(' '), testedDate;
        if (dateHasDashes) {
            testedDate = dateParts[0].replace(/-/g, '/');
        }
        else {
            testedDate = dateParts[0];
        }
        return !isNaN(Date.parse(testedDate));
    }
    number(digit) {
        return salla.helpers.number(digit, this.digits === 'en');
    }
    startCountDown() {
        const normalized = this.normalizeDate(this.date);
        const isIsoFormat = normalized.includes('-');
        const isDateOnly = this.endOfDay || normalized.split(' ').length === 1;
        let countDownTime;
        if (isIsoFormat) {
            // Backend KSA date — parse as UTC+3 explicitly
            const dateStr = isDateOnly
                ? `${normalized.split(' ')[0]}T23:59:59+03:00`
                : `${normalized.replace(' ', 'T')}+03:00`;
            countDownTime = new Date(dateStr).getTime();
        }
        else {
            // "MMM DD, YYYY HH:mm:ss" or "MM/DD/YYYY HH:mm:ss am/pm" format
            const countDownDate = new Date(normalized);
            if (isDateOnly) {
                countDownDate.setHours(23, 59, 59, 999);
            }
            countDownTime = countDownDate.getTime();
        }
        // Safety net: if parsing fails despite passing isValidDate, show the
        // invalid date message instead of ticking with NaN values.
        if (Number.isNaN(countDownTime)) {
            salla.logger.warn(`[salla-count-down] unable to parse date: "${this.date}"`);
            this.parseFailed = true;
            return;
        }
        const tick = () => {
            const distance = countDownTime - Date.now();
            const dRaw = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hRaw = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            this.days = this.number(dRaw);
            this.hours = this.number(hRaw);
            this.minutes = this.number(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
            this.seconds = this.number(Math.floor((distance % (1000 * 60)) / 1000));
            if (this.autoSegments) {
                this.showDays = dRaw > 0;
                this.showHours = dRaw > 0 || hRaw > 0;
            }
            if (distance < 0) {
                this.endCountDown();
            }
        };
        this.countInterval = setInterval(tick, 1000);
        tick();
    }
    renderCountDown() {
        const listStyle = this.listPadding ? { paddingLeft: this.listPadding, paddingRight: this.listPadding } : undefined;
        const resolvedBoxColor = this.boxTheme ? `var(--color-${this.boxTheme})` : this.boxColor;
        const boxStyle = this.boxed && resolvedBoxColor ? { backgroundColor: resolvedBoxColor } : undefined;
        return (h("ul", { class: `s-count-down-list ${this.boxed ? 's-count-down-boxed' : ''} ${this.offerEnded ? 's-count-down-ended' : ''} s-count-down-${this.size} s-count-down-${this.color}`, style: listStyle }, h("li", { class: "s-count-down-item", style: boxStyle }, h("div", { class: "s-count-down-item-value" }, this.seconds), this.labeled && h("div", { class: "s-count-down-item-label" }, this.secondsLabel)), h("li", { class: "s-count-down-item", style: boxStyle }, h("div", { class: "s-count-down-item-value" }, this.minutes), this.labeled && h("div", { class: "s-count-down-item-label" }, this.minutesLabel)), (!this.autoSegments || this.showHours) && (h("li", { class: "s-count-down-item", style: boxStyle }, h("div", { class: "s-count-down-item-value" }, this.hours), this.labeled && h("div", { class: "s-count-down-item-label" }, this.hoursLabel))), (!this.autoSegments || this.showDays) && (h("li", { class: "s-count-down-item", style: boxStyle }, h("div", { class: "s-count-down-item-value" }, this.days), this.labeled && h("div", { class: "s-count-down-item-label" }, this.daysLabel)))));
    }
    renderInvalidDate() {
        return h("div", { class: "s-count-down-text-center" }, this.invalidDate);
    }
    renderOfferEnded() {
        return h("div", { class: "s-count-down-end-text" }, !!this.endText ? this.endText : this.endLabel);
    }
    renderPreOrderToBeAvailableOn() {
        if (!this.normalizedPreOrder?.availability_date ||
            !this.isValidDate(this.normalizedPreOrder?.availability_date))
            return null;
        return (h("div", { class: "s-count-down-info-message" }, h("i", { class: "sicon-info" }), h("span", null, salla.lang.getWithDefault('pages.products.expected_to_be', 'متوقَّع توفُّره بتاريخ:')), h("span", null, new Date(this.normalizedPreOrder?.availability_date).toLocaleDateString(salla.lang.locale, {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric',
        }))));
    }
    renderPreOrderCountDown() {
        if (!this.normalizedPreOrder?.activate_countdown)
            return null;
        return (h("div", { class: "s-count-down-pre-order-container" }, h("p", { class: "text-sm " }, salla.lang.getWithDefault('pages.products.pre_order_ends_in', 'ينتهي الطلب المسبق خلال:')), this.renderCountDown()));
    }
    renderPreOrder() {
        return (h("div", null, typeof this.normalizedPreOrder === 'object' &&
            this.normalizedPreOrder?.availability_date &&
            this.renderPreOrderToBeAvailableOn(), this.renderPreOrderCountDown()));
    }
    renderPrefixText() {
        if (!this.prefixText)
            return null;
        return h("span", { class: "s-count-down-prefix-text" }, this.prefixText);
    }
    renderButton() {
        if (!this.withButton || !this.buttonText)
            return null;
        return h("salla-button", { color: "primary", size: "medium", href: this.buttonHref }, this.buttonIcon ? h("i", { class: this.buttonIcon }) : null, h("span", null, this.buttonText));
    }
    renderContent() {
        if (!this.date)
            return null;
        if (!this.isValidDate(this.date) || this.parseFailed) {
            return this.renderInvalidDate();
        }
        if (this.preOrder) {
            return this.renderPreOrder();
        }
        return this.renderCountDown();
    }
    render() {
        return (h(Host, { key: '16f2244e2e1b828cd80a186528726a089146acff', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
    }
    static get style() { return sallaCountDownCss; }
}, [0, "salla-count-down", {
        "date": [1],
        "preOrder": [1, "pre-order"],
        "horizontal": [4],
        "withButton": [4, "with-button"],
        "prefixText": [1, "prefix-text"],
        "buttonHref": [1, "button-href"],
        "buttonText": [1, "button-text"],
        "buttonIcon": [1, "button-icon"],
        "boxed": [4],
        "size": [1],
        "color": [1],
        "labeled": [4],
        "endText": [1, "end-text"],
        "boxColor": [1, "box-color"],
        "boxTheme": [1, "box-theme"],
        "listPadding": [1, "list-padding"],
        "digits": [1],
        "endOfDay": [4, "end-of-day"],
        "autoSegments": [4, "auto-segments"],
        "daysLabel": [32],
        "hoursLabel": [32],
        "minutesLabel": [32],
        "secondsLabel": [32],
        "endLabel": [32],
        "invalidDate": [32],
        "offerEnded": [32],
        "parseFailed": [32],
        "countInterval": [32],
        "days": [32],
        "hours": [32],
        "minutes": [32],
        "seconds": [32],
        "showDays": [32],
        "showHours": [32],
        "endCountDown": [64]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["salla-count-down", "salla-button"];
    components.forEach(tagName => { switch (tagName) {
        case "salla-count-down":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SallaCountDown);
            }
            break;
        case "salla-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { SallaCountDown as S, defineCustomElement as d };
