import BaseComponent from "../BaseComponent";
import AppData from "../../Common/AppData";
import UserUtil from "../../Utils/UserUtil";
import EventBus from "../../Events/EventBus";

class TimeDateUI {
    init() {
        if (!jQuery('.date-time-ui')[0]) {
            return;
        }
        if (jQuery('.date-time-ui').data('initializied') !== 'true') {
            new TimeDateUIHandler(jQuery('.date-time-ui'));
        }
    }
}

class TimeDateUIHandler extends BaseComponent {

    _timeInterval = null;
    _dateInterval = null;

    constructor(component_base_ui) {
        super(component_base_ui);
        const show_user_time_date = AppData.getInstance().get('show_user_time_date');

        this._registerEventListeners();

        if (!UserUtil.isLoggedIn() && show_user_time_date === 'on') {
            return this._showTimeAndDate();
        }

        if (UserUtil.isLoggedIn()) {
            const user_show_user_time_date = UserUtil.getUserMetaByKey('show_user_time_date', null);

            if (user_show_user_time_date === 'on') {
                return this._showTimeAndDate();
            }

            if (user_show_user_time_date === null && show_user_time_date === 'on') {
                return this._showTimeAndDate();
            }
        }

    }

    _registerEventListeners() {
        const _this = this;

        EventBus.getInstance().registerDynamicEvent({
            key: 'SHOW_TIME_AND_DATE',
            callback: () => {
                _this._showTimeAndDate();
            }
        });

        EventBus.getInstance().registerDynamicEvent({
            key: 'HIDE_TIME_AND_DATE',
            callback: () => {
                _this._hideTimeAndDate();
            }
        });
    }

    _showTimeAndDate() {
        this._component_base_ui.removeClass('hidden');
        this._updateTime();
        clearInterval(this._timeInterval);
        this._timeInterval = setInterval(() => {
            this._updateTime();
        }, 1000)

        clearInterval(this._dateInterval);
        this._dateInterval = setInterval(() => {
            this._updateDate();
        }, 5000)

        this._updateTime();
        this._updateDate();
    }

    _hideTimeAndDate() {
        clearInterval(this._timeInterval);
        clearInterval(this._dateInterval);
        this._component_base_ui.addClass('hidden');
    }

    _updateTime() {
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const formattedTime = `${hours}:${minutes}`;
        
        this._component_base_ui.find('.time').html(formattedTime);
    }

    _updateDate() {
        const now = new Date();
    
        let current_lang_code = AppData.getInstance().get('current_lang_code');
        current_lang_code = current_lang_code ? current_lang_code : 'en-us';
        const dayOfWeek = now.toLocaleString(current_lang_code, { weekday: 'long' });
        
        const dayOfMonth = now.getDate();
        const ordinalDay = dayOfMonth + this._getOrdinalSuffix(dayOfMonth);
        this._component_base_ui.find('.date').html(`${dayOfWeek}, ${ordinalDay}`);
    }

    _getOrdinalSuffix(day) {
        if (day >= 11 && day <= 13) {
            return 'th';
        }
        switch (day % 10) {
            case 1: return 'st';
            case 2: return 'nd';
            case 3: return 'rd';
            default: return 'th';
        }
    }
}

export default TimeDateUI;