import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@ionic/angular";
import * as i3 from "@angular/common";
import * as i4 from "primeng/dialog";
import * as i5 from "primeng/calendar";
import * as i6 from "@ngx-translate/core";
function AppointmentSelfSchedulerComponent_section_14_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "section");
    i0.ɵɵelement(1, "br");
    i0.ɵɵelementEnd();
} }
function AppointmentSelfSchedulerComponent_div_15_ion_col_6_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "ion-col", 24)(1, "ion-button", 25);
    i0.ɵɵlistener("click", function AppointmentSelfSchedulerComponent_div_15_ion_col_6_Template_ion_button_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const slot_r3 = restoredCtx.$implicit; const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.onTimeSlotSelect(slot_r3)); });
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const slot_r3 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("fill", ctx_r2.selectedTimeSlot === slot_r3 ? "solid" : "outline");
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1(" ", slot_r3, " ");
} }
function AppointmentSelfSchedulerComponent_div_15_Template(rf, ctx) { if (rf & 1) {
    const _r7 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div")(1, "h4", 5);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "translate");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "ion-grid")(5, "ion-row", 19);
    i0.ɵɵtemplate(6, AppointmentSelfSchedulerComponent_div_15_ion_col_6_Template, 3, 2, "ion-col", 20);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "ion-row", 21)(8, "ion-col", 22)(9, "ion-button", 18);
    i0.ɵɵlistener("click", function AppointmentSelfSchedulerComponent_div_15_Template_ion_button_click_9_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.close()); });
    i0.ɵɵtext(10, "Cancel");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(11, "ion-col", 22)(12, "ion-button", 23);
    i0.ɵɵlistener("click", function AppointmentSelfSchedulerComponent_div_15_Template_ion_button_click_12_listener() { i0.ɵɵrestoreView(_r7); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.confirm()); });
    i0.ɵɵtext(13, "Confirm");
    i0.ɵɵelementEnd()()()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1("2. ", i0.ɵɵpipeBind1(3, 2, "self.scheduler.time"), "");
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("ngForOf", ctx_r1.timeSlots);
} }
const _c0 = () => ({ width: "37.5vw" });
const _c1 = () => ({ "1200px": "660px", "992px": "660px", "768px": "660px", "576px": "100vw" });
export class AppointmentSelfSchedulerComponent {
    constructor(fb) {
        this.fb = fb;
        this.success = new EventEmitter();
        this.error = new EventEmitter();
        this.onClose = new EventEmitter();
        this.availableDates = [];
        this.invalidDates = [];
        this.showTimeSlotPopup = false;
        this.selectedDate = null;
        this.timeSlots = [];
        this.selectedTimeSlot = null;
    }
    /** GET mapping call to /scheduler/available-slots/ - to give available dates to allow to display and disable rest in the p-calendar*/
    ngOnInit() {
        this.rescheduleDate =
            this.fb.group({
                newAppointmentDate: null,
                timeSlot: null
            });
        this.showSchedulerPopup = true;
        this.availableDates = [
            new Date(2025, 4, 5),
            new Date(2025, 4, 10),
            new Date(2025, 4, 20)
        ];
        //Disable all dates after retrieving available dates.
        this.generateInvalidDates();
    }
    //Dummy data for display purposes of initial look of component.
    generateTimeSlots(date) {
        this.timeSlots = [
            '9:00 – 10:00 AM',
            '10:30 – 11:30 AM',
            '12:00 – 1:00 PM'
        ];
    }
    /** Will iterate through dates fetched from GET mapping, and disable dates not available in p-calendar*/
    generateInvalidDates() {
        const start = new Date(2025, 4, 1); // May 1
        const end = new Date(2025, 4, 31); // May 31
        const invalids = [];
        for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
            if (!this.availableDates.some(date => date.getDate() === d.getDate())) {
                invalids.push(new Date(d));
            }
        }
        this.invalidDates = invalids;
    }
    /** Will set the time slots availale for a given date in p-calendar*/
    onDateSelect(date) {
        this.selectedDate = date;
        this.generateTimeSlots(date); // GET mapping call to /scheduler/available-time/
        this.showTimeSlotPopup = true;
    }
    /** Will update value for selected time slot*/
    onTimeSlotSelect(slot) {
        this.selectedTimeSlot = slot;
        this.rescheduleDate.get('timeSlot')?.setValue(slot);
    }
    close() {
        this.showSchedulerPopup = false;
    }
    closeConfirmationPopup() {
        this.showSchedulerConfirmationPopup = false;
    }
    confirm() {
        const selectedDate = this.rescheduleDate.get('newAppointmentDate')?.value;
        const selectedSlot = this.rescheduleDate.get('timeSlot')?.value;
        ;
        if (selectedDate && selectedSlot) {
            this.confirmedDate = selectedDate;
            this.selectedTimeSlot = selectedSlot;
            //TODO Call endpoint and if successful set popup false and confirmation popup to true
            /**  POST /scheduler/reschedule - Model - pass and save in tables */
            this.showSchedulerPopup = false;
            this.showSchedulerConfirmationPopup = true;
        }
        else {
            alert('Please select a date first.');
        }
    }
    get newAppointmentDate() {
        return this.rescheduleDate.controls['newAppointmentDate'];
    }
    get timeSlot() {
        return this.rescheduleDate.controls['timeSlot'];
    }
    static { this.ɵfac = function AppointmentSelfSchedulerComponent_Factory(t) { return new (t || AppointmentSelfSchedulerComponent)(i0.ɵɵdirectiveInject(i1.UntypedFormBuilder)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AppointmentSelfSchedulerComponent, selectors: [["app-appointment-self-scheduler"]], inputs: { showSchedulerPopup: "showSchedulerPopup", showSchedulerConfirmationPopup: "showSchedulerConfirmationPopup" }, outputs: { success: "success", error: "error", onClose: "onClose" }, decls: 44, vars: 40, consts: [["modal", "true", "appendTo", "body", "position", "top", 3, "visible", "showHeader", "breakpoints"], [1, "dialog-header"], [1, "title-text", 2, "font-weight", "500"], [1, "close-wrapper", 3, "click"], ["src", "https://logowik.com/content/uploads/images/close1437.jpg", "width", "20", "height", "20", "margin-top", "5px", 1, "clickable-img"], [1, "app-heading"], [2, "text-align", "center"], [3, "formGroup"], ["inputId", "newAppointmentDate", "formControlName", "newAppointmentDate", "yearRange", "1901:2050", "dateFormat", "MM dd, yy", "dataType", "string", 1, "custom-calendar", 3, "inline", "yearNavigator", "disabledDates", "onSelect"], [4, "ngIf"], ["header", "Selected Date", "modal", "true", "appendTo", "body", "position", "top", 3, "visible", "showHeader", "breakpoints", "visibleChange"], [1, "app-heading", 2, "font-weight", "600", "color", "#949494"], [1, "message-box"], [2, "font-weight", "500", "font-size", "18px"], [2, "margin-left", "50px"], [2, "margin-left", "45px"], [1, "ion-padding"], [2, "text-align", "-webkit-right"], ["shape", "block", "fill", "outline", "type", "reset", 2, "width", "fit-content", 3, "click"], ["justify-content-start", "", 1, "time-slot-row"], ["size", "6", "size-sm", "4", "size-md", "4", "size-lg", "4", "class", "time-slot-col", 4, "ngFor", "ngForOf"], [1, "ion-padding", "ion-justify-content-end"], ["size", "auto"], ["shape", "block", "fill", "solid", "type", "submit", 2, "width", "fit-content", 3, "click"], ["size", "6", "size-sm", "4", "size-md", "4", "size-lg", "4", 1, "time-slot-col"], ["expand", "block", 3, "fill", "click"]], template: function AppointmentSelfSchedulerComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "p-dialog", 0);
            i0.ɵɵelement(1, "br");
            i0.ɵɵelementStart(2, "div", 1)(3, "span", 2);
            i0.ɵɵtext(4);
            i0.ɵɵpipe(5, "translate");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(6, "span", 3);
            i0.ɵɵlistener("click", function AppointmentSelfSchedulerComponent_Template_span_click_6_listener() { return ctx.close(); });
            i0.ɵɵelement(7, "img", 4);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(8, "h4", 5);
            i0.ɵɵtext(9);
            i0.ɵɵpipe(10, "translate");
            i0.ɵɵelementEnd();
            i0.ɵɵelement(11, "div", 6);
            i0.ɵɵelementStart(12, "form", 7)(13, "p-calendar", 8);
            i0.ɵɵlistener("onSelect", function AppointmentSelfSchedulerComponent_Template_p_calendar_onSelect_13_listener($event) { return ctx.onDateSelect($event); });
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(14, AppointmentSelfSchedulerComponent_section_14_Template, 2, 0, "section", 9);
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(15, AppointmentSelfSchedulerComponent_div_15_Template, 14, 4, "div", 9);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(16, "p-dialog", 10);
            i0.ɵɵlistener("visibleChange", function AppointmentSelfSchedulerComponent_Template_p_dialog_visibleChange_16_listener($event) { return ctx.showSchedulerConfirmationPopup = $event; });
            i0.ɵɵelement(17, "br");
            i0.ɵɵelementStart(18, "div", 1)(19, "span", 2);
            i0.ɵɵtext(20);
            i0.ɵɵpipe(21, "translate");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(22, "span", 3);
            i0.ɵɵlistener("click", function AppointmentSelfSchedulerComponent_Template_span_click_22_listener() { return ctx.closeConfirmationPopup(); });
            i0.ɵɵelement(23, "img", 4);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(24, "h4", 11);
            i0.ɵɵtext(25);
            i0.ɵɵpipe(26, "translate");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(27, "div", 12)(28, "h5", 13);
            i0.ɵɵtext(29);
            i0.ɵɵpipe(30, "translate");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(31, "p");
            i0.ɵɵtext(32, "Date: ");
            i0.ɵɵelementStart(33, "span", 14);
            i0.ɵɵtext(34);
            i0.ɵɵpipe(35, "date");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(36, "p");
            i0.ɵɵtext(37, "Time: ");
            i0.ɵɵelementStart(38, "span", 15);
            i0.ɵɵtext(39);
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(40, "ion-row", 16)(41, "ion-col", 17)(42, "ion-button", 18);
            i0.ɵɵlistener("click", function AppointmentSelfSchedulerComponent_Template_ion_button_click_42_listener() { return ctx.closeConfirmationPopup(); });
            i0.ɵɵtext(43, "Home");
            i0.ɵɵelementEnd()()()();
        } if (rf & 2) {
            i0.ɵɵstyleMap(i0.ɵɵpureFunction0(36, _c0));
            i0.ɵɵproperty("visible", ctx.showSchedulerPopup)("showHeader", false)("breakpoints", i0.ɵɵpureFunction0(37, _c1));
            i0.ɵɵadvance(4);
            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 23, "self.scheduler.reschedule"), "");
            i0.ɵɵadvance(5);
            i0.ɵɵtextInterpolate1("1. ", i0.ɵɵpipeBind1(10, 25, "self.scheduler.selectdate"), "");
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("formGroup", ctx.rescheduleDate);
            i0.ɵɵadvance(1);
            i0.ɵɵproperty("inline", true)("yearNavigator", true)("disabledDates", ctx.invalidDates);
            i0.ɵɵadvance(1);
            i0.ɵɵproperty("ngIf", ctx.showSchedulerPopup);
            i0.ɵɵadvance(1);
            i0.ɵɵproperty("ngIf", ctx.timeSlots.length);
            i0.ɵɵadvance(1);
            i0.ɵɵstyleMap(i0.ɵɵpureFunction0(38, _c0));
            i0.ɵɵproperty("visible", ctx.showSchedulerConfirmationPopup)("showHeader", false)("breakpoints", i0.ɵɵpureFunction0(39, _c1));
            i0.ɵɵadvance(4);
            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(21, 27, "self.scheduler.confirmation1"));
            i0.ɵɵadvance(5);
            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(26, 29, "self.scheduler.confirmation2"), " ");
            i0.ɵɵadvance(4);
            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(30, 31, "self.scheduler.details"));
            i0.ɵɵadvance(5);
            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(35, 33, ctx.confirmedDate, "longDate"), "");
            i0.ɵɵadvance(5);
            i0.ɵɵtextInterpolate1(" ", ctx.selectedTimeSlot, "");
        } }, dependencies: [i2.IonButton, i2.IonCol, i2.IonGrid, i2.IonRow, i3.NgForOf, i3.NgIf, i1.ɵNgNoValidate, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i4.Dialog, i5.Calendar, i3.DatePipe, i6.TranslatePipe], styles: [".app-heading[_ngcontent-%COMP%]{font-family:var(--app-font-light);font-size:15px;color:var(--ion-color-medium-gray);padding-top:10px;font-weight:500}  .p-datepicker table td>span.p-highlight{background-color:#4478aa!important;color:#fff!important}  .p-datepicker td span:not(.p-disabled){background-color:#fff!important;color:#22405d!important;font-weight:700}  .custom-calendar .p-datepicker td span:not(.p-disabled):after{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:6px;height:6px;background-color:#22405d;border-radius:50%}  .custom-calendar .p-datepicker table td>span.p-highlight:after{background-color:#fff}.message-box[_ngcontent-%COMP%]{background-color:#f5f5f5;padding:16px;border-radius:8px;border:1px solid #ddd;color:#333}.clickable-img[_ngcontent-%COMP%]{cursor:pointer}.dialog-header[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center}"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppointmentSelfSchedulerComponent, [{
        type: Component,
        args: [{ selector: 'app-appointment-self-scheduler', template: "<p-dialog [visible]=\"showSchedulerPopup\" modal=\"true\" appendTo=\"body\" position=\"top\" [showHeader]=\"false\"\r\n    [breakpoints]=\"{'1200px': '660px', '992px': '660px', '768px': '660px', '576px': '100vw'}\" [style]=\"{width: '37.5vw'}\">\r\n    <br>\r\n    <div class=\"dialog-header\">\r\n        <span class=\"title-text\" style=\"font-weight: 500;\"> {{\"self.scheduler.reschedule\"|translate}}</span>\r\n        <span class=\"close-wrapper\" (click)=\"close()\"> <img src=\"https://logowik.com/content/uploads/images/close1437.jpg\" width=\"20\" height=\"20\" margin-top=\"5px\" class=\"clickable-img\"></span>\r\n      </div>\r\n    <h4 class=\"app-heading\">1. {{\"self.scheduler.selectdate\"|translate}}</h4>\r\n    <div style=\"text-align: center;\">\r\n    </div>\r\n    <form [formGroup]=\"rescheduleDate\">\r\n    <p-calendar  class=\"custom-calendar\" [inline]=\"true\" inputId=\"newAppointmentDate\"\r\n    formControlName=\"newAppointmentDate\" [yearNavigator]=\"true\"\r\n    yearRange=\"1901:2050\" dateFormat=\"MM dd, yy\" \r\n     dataType=\"string\"  [disabledDates]=\"invalidDates\"\r\n     (onSelect)=\"onDateSelect($event)\"\r\n      >\r\n  </p-calendar>\r\n  <section *ngIf=showSchedulerPopup><br></section>\r\n\t\r\n</form>\r\n\r\n<div *ngIf=\"timeSlots.length\">\r\n  <h4 class=\"app-heading\">2. {{\"self.scheduler.time\"|translate}}</h4>\r\n  <ion-grid>\r\n    <ion-row class=\"time-slot-row\" justify-content-start>\r\n      <ion-col size=\"6\" size-sm=\"4\" size-md=\"4\" size-lg=\"4\"\r\n               *ngFor=\"let slot of timeSlots\"\r\n               class=\"time-slot-col\">\r\n        <ion-button expand=\"block\" [fill]=\"selectedTimeSlot === slot ? 'solid' : 'outline'\"\r\n        (click)=\"onTimeSlotSelect(slot)\">\r\n          {{ slot }}\r\n        </ion-button>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row class=\"ion-padding ion-justify-content-end\">\r\n      <ion-col size=\"auto\">\r\n                <ion-button shape=\"block\" style=\"width: fit-content;\" fill=\"outline\"  type=\"reset\" (click)=\"close()\">Cancel</ion-button>\r\n      </ion-col>\r\n      <ion-col size=\"auto\">\r\n                <ion-button shape=\"block\" style=\"width: fit-content;\" fill=\"solid\" type=\"submit\" (click)=\"confirm()\">Confirm</ion-button>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</div>\r\n\r\n</p-dialog>\r\n\r\n<p-dialog header=\"Selected Date\" [(visible)]=\"showSchedulerConfirmationPopup\" modal=\"true\" appendTo=\"body\" position=\"top\" [showHeader]=\"false\"\r\n[breakpoints]=\"{'1200px': '660px', '992px': '660px', '768px': '660px', '576px': '100vw'}\" [style]=\"{width: '37.5vw'}\">\r\n<br>\r\n<div class=\"dialog-header\">\r\n    <span class=\"title-text\" style=\"font-weight: 500;\">{{\"self.scheduler.confirmation1\"|translate}}</span>\r\n    <span class=\"close-wrapper\" (click)=\"closeConfirmationPopup()\"> <img src=\"https://logowik.com/content/uploads/images/close1437.jpg\" width=\"20\" height=\"20\" margin-top=\"5px\" class=\"clickable-img\"></span>\r\n  </div>\r\n  <h4 class=\"app-heading\" style=\"font-weight: 600; color:#949494;\">{{\"self.scheduler.confirmation2\"|translate}} </h4>\r\n\r\n<div class=\"message-box\">\r\n    <h5 style=\"font-weight: 500; font-size: 18px;\">{{\"self.scheduler.details\"|translate}}</h5>\r\n    <p>Date: <span style=\"margin-left: 50px;\"> {{ confirmedDate | date: 'longDate' }}</span></p>\r\n    <p>Time: <span style=\"margin-left: 45px;\"> {{selectedTimeSlot}}</span></p>\r\n\r\n</div>\r\n<ion-row class=\"ion-padding\">\r\n    <ion-col style=\"text-align: -webkit-right;\">\r\n        <ion-button shape=\"block\" style=\"width: fit-content;\" fill=\"outline\"  type=\"reset\" (click)=\"closeConfirmationPopup()\">Home</ion-button>\r\n    </ion-col>\r\n</ion-row>\r\n  </p-dialog>", styles: [".app-heading{font-family:var(--app-font-light);font-size:15px;color:var(--ion-color-medium-gray);padding-top:10px;font-weight:500}::ng-deep .p-datepicker table td>span.p-highlight{background-color:#4478aa!important;color:#fff!important}::ng-deep .p-datepicker td span:not(.p-disabled){background-color:#fff!important;color:#22405d!important;font-weight:700}::ng-deep .custom-calendar .p-datepicker td span:not(.p-disabled):after{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:6px;height:6px;background-color:#22405d;border-radius:50%}::ng-deep .custom-calendar .p-datepicker table td>span.p-highlight:after{background-color:#fff}.message-box{background-color:#f5f5f5;padding:16px;border-radius:8px;border:1px solid #ddd;color:#333}.clickable-img{cursor:pointer}.dialog-header{display:flex;justify-content:space-between;align-items:center}\n"] }]
    }], () => [{ type: i1.UntypedFormBuilder }], { success: [{
            type: Output
        }], error: [{
            type: Output
        }], onClose: [{
            type: Output
        }], showSchedulerPopup: [{
            type: Input
        }], showSchedulerConfirmationPopup: [{
            type: Input
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AppointmentSelfSchedulerComponent, { className: "AppointmentSelfSchedulerComponent", filePath: "lib\\components\\appointment-self-scheduler\\appointment-self-scheduler.component.ts", lineNumber: 9 }); })();
//# sourceMappingURL=data:application/json;base64, 