import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
import { statusCodes, LoggerService } from 'ew-common-lib';
import { EwMaDesignService } from '../../../ew-ma-design.service';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import * as momentTimezone from 'moment-timezone';
var WidgetSchedulePreviewComponent = /** @class */ (function () {
    /**
     * @description
     * constructor
     */
    function WidgetSchedulePreviewComponent(designService, ewloggerService, http) {
        this.designService = designService;
        this.ewloggerService = ewloggerService;
        this.http = http;
        /**
         * @description
         * schedule data
         */
        this.scheduleData = { "single_schedule": "loading schedule...", "local_time_zone": "", "dates_array": [] };
        this.isScheduleDataLoaded = false;
        this.select_one = "select_one";
        this.attendee_timezone = "";
        this.instant_replay = "";
        this.days = "00";
        this.hours = "00";
        this.minutes = "00";
        this.seconds = "00";
        this.interval_id = "";
    }
    WidgetSchedulePreviewComponent.prototype.ngOnInit = function () {
        this.fetchScheduleData();
    };
    /**
     * Pad function
    */
    WidgetSchedulePreviewComponent.prototype.pad = function (str, max) {
        if (max === void 0) { max = 2; }
        str = str.toString();
        return str.length < max ? this.pad("0" + str, max) : str;
    };
    /**
     * Fetch Schedule Data from API
    */
    WidgetSchedulePreviewComponent.prototype.fetchScheduleData = function () {
        var _this = this;
        var local_date = new Date();
        var localtime = local_date.toTimeString();
        this.attendee_timezone = localtime.substring(localtime.indexOf('(')).split("(").join("").split(")").join("");
        var regFormData = this.designService.getScheduleData();
        // if((regFormData !== undefined ) && (Object.keys(regFormData).length != 0)){
        //   this.populateScheduleData(regFormData);
        //   this.isScheduleDataLoaded =true;
        // }
        // fetch the dtat only once when not loaded already
        if (this.isScheduleDataLoaded == false) {
            var user_time_array = localtime.split(" ");
            var timezone_operation = '+';
            if (user_time_array[1].indexOf('+')) {
                timezone_operation = '+';
            }
            else {
                timezone_operation = '-';
            }
            var user_timezone = momentTimezone.tz.guess();
            var timezone_difference = momentTimezone(local_date.getTime()).tz(user_timezone).format('Z');
            timezone_difference = timezone_difference.replace(timezone_operation, '');
            timezone_difference = timezone_difference + ":00";
            var webinar_id = this.designService.eventId;
            //var webinar_id="1039";    
            //let url = this.designService.getScheduleApiEndpoint();
            var url = this.designService.getServerURL() + "wp-content/plugins/webinar_plugin/webinar-db-interaction/webinar_session.php";
            url = url + '?timezone_difference=' + timezone_difference + '&webinar_id=' + webinar_id + '&timezone_operation=' + timezone_operation + '&user_timezone=' + user_timezone;
            var headers = new HttpHeaders();
            headers = headers.set('Content-Type', 'application/json');
            this.http.get(url, { headers: headers })
                .subscribe(function (data) {
                _this.populateScheduleData(data);
                _this.designService.setScheduleData(data);
            }, function (err) {
                if (err.error instanceof Error) {
                    console.log('Client-side error occured.');
                }
                else {
                    console.log('Server-side error occured.');
                    console.log(err);
                }
            });
        }
    };
    /**
     * Fill the data
     */
    WidgetSchedulePreviewComponent.prototype.populateScheduleData = function (scheduleData) {
        // scheduleData=
        // {
        //   "single_schedule": "",
        //   "dates_array": "",
        //   "local_time_zone": null,
        //   "video_length": "1800",
        //   "first_option_schedules": [
        //     {
        //       "value": "2022-03-09",
        //       "selected": "selected",
        //       "rep_text": "Watch instant replay",
        //       "option_text": "Watch instant replay",
        //       "schedule_type": 2,
        //       "webinar_date_gmt": "2022-03-09 05:59:01"
        //     }
        //   ]
        // };
        var _this = this;
        this.scheduleData.single_schedule = scheduleData['single_schedule'];
        this.instant_replay = scheduleData['first_option_schedules'];
        if (scheduleData['dates_array'].length) {
            this.scheduleData.dates_array = scheduleData['dates_array'];
            // If timezone ID 0 it means attendee local timezone used
            if (scheduleData['dates_array'][0]['admin_tz'] == 0) {
                this.scheduleData.local_time_zone = this.attendee_timezone;
            }
            else {
                this.scheduleData.local_time_zone = scheduleData['local_time_zone'];
            }
            var webinar_time_milli = scheduleData['dates_array'][0]['timemilli'];
            var scheduled_time = parseInt(webinar_time_milli);
            var date = new Date();
            date.setTime(date.getTime() + scheduled_time);
            var countDownDate = date.getTime();
            this.interval_id = setInterval(function () {
                var now = new Date().getTime();
                var calculateDateTime = countDownDate - now;
                _this.days = _this.pad(Math.floor(calculateDateTime / (1000 * 60 * 60 * 24)));
                _this.hours = _this.pad(Math.floor((calculateDateTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
                _this.minutes = _this.pad(Math.floor((calculateDateTime % (1000 * 60 * 60)) / (1000 * 60)));
                _this.seconds = _this.pad(Math.floor((calculateDateTime % (1000 * 60)) / 1000));
                if (calculateDateTime <= 0) {
                    clearInterval(_this.interval_id);
                    _this.days = "00";
                    _this.hours = "00";
                    _this.minutes = "00";
                    _this.seconds = "00";
                }
            }, 1000);
            this.isScheduleDataLoaded = true;
        }
    };
    WidgetSchedulePreviewComponent.ctorParameters = function () { return [
        { type: EwMaDesignService },
        { type: LoggerService },
        { type: HttpClient }
    ]; };
    __decorate([
        Input()
    ], WidgetSchedulePreviewComponent.prototype, "data", void 0);
    __decorate([
        Input()
    ], WidgetSchedulePreviewComponent.prototype, "countDownData", void 0);
    WidgetSchedulePreviewComponent = __decorate([
        Component({
            selector: 'ew-element-widget-schedule-preview',
            template: "<div\r\n    class=\"ew-widget-common-element ew_schedule event-builder-schedule event-time-date-widget-new\"\r\n    [style.display]=\"(data?.status == false) ? 'block' : 'none'\"\r\n    \r\n    [style.background-color]=\"data?.bg_color\"\r\n    [style.color]=\"data?.text_color\"\r\n    \r\n>\r\n    <div class=\"col m12 ew-list-loader\" style=\"display: none;\">\r\n        <div class=\"ph-item listing-loader\">\r\n            <div class=\"ph-row\">\r\n            <div class=\"ph-col-12\"></div>\r\n            <div class=\"ph-col-12\"></div>\r\n            <div class=\"ph-col-12\"></div>\r\n            <div class=\"ph-col-6\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <ng-template\r\n        [ngIf]=\"(scheduleData.single_schedule !== 'loading schedule...' && scheduleData.single_schedule == '' && scheduleData.dates_array.length == 0 && instant_replay.length == 0)\"   \r\n    >\r\n        <div class=\"ew-builder-no-upcoming-schedule ew-widget-no-schedule-wrapper\">\r\n            <span>{{ 'BUILDER.NO_SCHEDULE_EXIT' | translate }}</span>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <div class=\"ew-list-loader-data ew-widget-schedule-wrapper\">\r\n        <div \r\n            [style.display]=\"(scheduleData.single_schedule !== '' || (instant_replay.length && scheduleData.dates_array.length==0)) ? 'block' : 'none'\"\r\n            class=\"ew-single-schedules\"\r\n        >\r\n            <span class=\"schedule-time-custom\" >\r\n                <span class=\"schedule-time-desc datetime-unique-for-mobile-size\" \r\n                >\r\n                    {{(instant_replay.length)?instant_replay[0].option_text:scheduleData.single_schedule}}\r\n                </span>\r\n            </span>\r\n\r\n            <span class=\"standard-time-schedule timezone-unique-for-mobile-size\" \r\n            >\r\n                {{(instant_replay.length)?attendee_timezone:scheduleData.local_time_zone}}\r\n            </span>\r\n            \r\n        </div>\r\n\r\n        <!--<div \r\n            *ngIf=\"((instant_replay.length) && (scheduleData.single_schedule =='') && (scheduleData.dates_array.length == 0 ))\"\r\n            class=\"ew-single-schedules with-instant-replay\"\r\n            style=\"text-align: center;\"\r\n        >\r\n            <span class=\"schedule-time-custom\" >\r\n                <span class=\"schedule-time-desc datetime-unique-for-mobile-size\" \r\n                >\r\n                {{instant_replay[0].option_text}}\r\n                </span>\r\n            </span>            \r\n        </div> -->\r\n\r\n        <div class=\"ew-mat-select-conversion schedule-time-custom-outer disableClick\" \r\n            *ngIf=\"(scheduleData.single_schedule =='' && scheduleData.dates_array.length)\"\r\n        >\r\n            <mat-form-field floatLabel=\"never\" >\r\n                <mat-select matInput \r\n                    [value]=\"(instant_replay.length && instant_replay[0].selected == 'selected') ? instant_replay[0].value: scheduleData.dates_array[0].formated_date_time\"\r\n                    style=\"border-radius: 3px; border: 1px solid; text-align: center;\"\r\n                    class=\"datetime-unique-for-mobile-size\"                  \r\n                \r\n                >\r\n                    <mat-option  \r\n                        *ngIf=\"(instant_replay.length)\"\r\n    \r\n                        [value]=\"instant_replay[0].value\" \r\n                        [attr.rep_text]=\"instant_replay[0].rep_text\"\r\n                        >\r\n                        {{instant_replay[0].option_text}}\r\n                    </mat-option>\r\n    \r\n                    <mat-option *ngFor=\"let item of scheduleData.dates_array\" \r\n                        [value]=\"item.formated_date_time\" \r\n                        >\r\n                        {{item.formated_date_time}} {{ ( item.admin_tz == 0 ) ? attendee_timezone : scheduleData.local_time_zone }}\r\n                    </mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n        </div>\r\n        \r\n        <!-- *ngIf=\"(scheduleData.dates_array.length > 1)\" -->\r\n\r\n        <div class=\"ew-multiple-schedules ew-custom-nice-select-schedule schedule-time-custom-outer  datetime-unique-for-mobile-size\" \r\n            style=\"display: none;border-radius: 3px; border: 1px solid; text-align: center;\"\r\n        >\r\n            <select\r\n                name=\"webinar_dates\"\r\n                class=\"schedule-select-box\"\r\n            > \r\n            <!-- Create One Schedule for already selected options ONLY -->\r\n            <option  \r\n                *ngIf=\"(instant_replay.length)\"\r\n                [value]=\"instant_replay[0].value\" \r\n                [attr.rep_text]=\"instant_replay[0].rep_text\"\r\n                [attr.selected]=\"(instant_replay.length && instant_replay[0].selected == 'selected') ? 'selected':'' \"\r\n                >\r\n                {{instant_replay[0].option_text}}\r\n            </option>\r\n    \r\n                <option \r\n                \r\n                [attr.selected]=\"(instant_replay.length && instant_replay[0].selected != 'selected') ? 'selected':'' \"\r\n                >\r\n                    {{scheduleData.dates_array[0]?.formated_date_time}} {{ ( scheduleData.dates_array[0]?.admin_tz == 0 ) ? attendee_timezone : scheduleData.local_time_zone }}\r\n                </option>\r\n            </select>\r\n        \r\n        </div>\r\n    </div>\r\n    \r\n</div>\r\n\r\n<!-- Countdown -->\r\n\r\n<!-- [ngIf]=\"((scheduleData.single_schedule !== 'loading schedule...') && (scheduleData.single_schedule != '' || scheduleData.dates_array.length != 0 || instant_replay.length != 0))\" -->\r\n\r\n    <input type=\"hidden\" value=\"{{countDownData?.status == false}}\" class=\"widget-countdown-status\">\r\n<!-- [style.display]=\"(countDownData?.status == false) ? 'block' : 'none'\" -->\r\n    <div class=\"ew-widget-common-element ew_countdown\"\r\n        [style.display]=\"(countDownData?.status == false && (scheduleData.single_schedule !== 'loading schedule...') && (scheduleData.single_schedule != '' || scheduleData.dates_array.length != 0 || instant_replay.length != 0)) ? 'block' : 'none'\"\r\n     >\r\n\r\n        <div class=\"col m12 ew-list-loader\" style=\"display: none;\">\r\n            <div class=\"ph-item listing-loader\">\r\n                <div class=\"ph-row\">\r\n                <div class=\"ph-col-12\"></div>\r\n                <div class=\"ph-col-12\"></div>\r\n                <div class=\"ph-col-12\"></div>\r\n                <div class=\"ph-col-6\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"ew-list-loader-data countdown-timer-offers widget-countdown-time event-schedule-counter-preview-ew\">\r\n            <div style=\"padding:8px 6px;\">\r\n                <span class=\"days\" [style.color]=\"countDownData?.time_unit_color\">{{days}}</span>\r\n                <div class=\"smalltext\" [style.color]=\"countDownData?.label_color\">{{countDownData?.days.text}} \r\n                </div>\r\n            </div>\r\n            \r\n            <div style=\"padding:8px 6px;\">\r\n                <div class=\"ew-sepration-dots\">\r\n                    <div class=\"ew-common-dots ew-top-dot\" [style.background-color]=\"countDownData?.time_unit_color\"></div>\r\n                    <div class=\"ew-common-dots ew-bottom-dot\" [style.background-color]=\"countDownData?.time_unit_color\"></div>\r\n                </div>\r\n                <span class=\"hours\" [style.color]=\"countDownData?.time_unit_color\">{{hours}}</span>\r\n                <div class=\"smalltext\" [style.color]=\"countDownData?.label_color\">{{countDownData?.hours.text}}\r\n                </div>\r\n            </div>\r\n            <div style=\"padding:8px 6px;\" >\r\n                <div class=\"ew-sepration-dots\">\r\n                    <div class=\"ew-common-dots ew-top-dot\" [style.background-color]=\"countDownData?.time_unit_color\"></div>\r\n                    <div class=\"ew-common-dots ew-bottom-dot\" [style.background-color]=\"countDownData?.time_unit_color\"></div>\r\n                </div>\r\n                <span class=\"minutes\" [style.color]=\"countDownData?.time_unit_color\">{{minutes}}</span>\r\n                <div class=\"smalltext\" [style.color]=\"countDownData?.label_color\">{{countDownData?.minutes.text}}\r\n                </div>\r\n            </div>\r\n            <div style=\"padding:8px 6px;\">\r\n                <div class=\"ew-sepration-dots\">\r\n                    <div class=\"ew-common-dots ew-top-dot\" [style.background-color]=\"countDownData?.time_unit_color\"></div>\r\n                    <div class=\"ew-common-dots ew-bottom-dot\" [style.background-color]=\"countDownData?.time_unit_color\"></div>\r\n                </div>\r\n                <span class=\"seconds\"[style.color]=\"countDownData?.time_unit_color\" >{{seconds}}</span>\r\n                <div class=\"smalltext\" [style.color]=\"countDownData?.label_color\">{{countDownData?.seconds.text}}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n",
            styles: [""]
        })
    ], WidgetSchedulePreviewComponent);
    return WidgetSchedulePreviewComponent;
}());
export { WidgetSchedulePreviewComponent };
//# sourceMappingURL=data:application/json;base64, 