// import { Component, h, Prop, State } from '@stencil/core';
// import { guid } from '../../utils';
// import { Icon } from '../dga-featured-icon/dga-featured-icon';
// import { formatDate, isValidDate } from '../dga-datepicker/dateUtils';
// export interface DatepickerOptions {
//     initialDate?: Date;
//     range?: boolean;
//     dualMonthView?: boolean;
//     inputField?: boolean;
//     submitButton?: boolean;
//     qickOptions?: boolean;
//     value?: Date;
//     // onChange?: (event?: any) => void;
//     onSubmit: (event?: any) => void;
//     onCancel: (event?: any) => void;
// }
// const feedbackIconTypes = {
//   success: <dga-icon icon="CheckmarkCircle02Icon" variant="solid" />,
//   error: <dga-icon icon="AlertCircleIcon" variant="solid" />,
//   warning: <dga-icon icon="Alert02Icon" variant="solid" />,
// };
// @Component({
//   tag: 'dga-text-input-v2',
//   styleUrl: 'dga-date-field.scss'
// })
// export class DgaTextInput {
//   @Prop() label?: string;
//   @Prop() placeholder?: string = "DD/MM/YY";
//   @Prop() size: 'md' | 'lg' = 'lg';
//   @Prop() type: 'text' | 'number' | 'password' = 'text';
//   @Prop() variant: 'default' | 'lighter' | 'darker' = 'default';
//   @Prop() error: boolean = false;
//   @Prop() feedbackIcon: boolean = false;
//   @Prop() feedbackIconType: 'success' | 'error' | 'warning' = 'success';
//   @Prop() feedbackIconRing: boolean = false;
//   @Prop() helperTextIcon?: Icon;
//   @Prop() helperText?: string = '';
//   // @Prop() prefix: boolean = false;
//   // @Prop() suffix: boolean = false;
//   // @Prop() inputPrefix?: JSX.Element; // JSX prop for prefix
//   // @Prop() inputSuffix?: JSX.Element; // JSX prop for suffix
//   // @Prop() icon?: JSX.Element; // Adjusted to any since ReactNode isn't used in Stencil
//   @Prop() icon?: Icon; // Adjusted to any since ReactNode isn't used in Stencil
//   @Prop() disabled: boolean = false;
//   @Prop() readonly: boolean = false;
//   @Prop() required: boolean = false;
//   //   @Prop() id: string = guid();
//   @Prop() name: string = guid();
//   @Prop() value: string = '';
//   //   @Prop() customAttribute: CustomAttribute = { key: "", value: "" };
//   @Prop() onChange?: (event?: Event) => void = (event) => {};
//   @Prop() onInput?: (event?: Event) => void = (event) => {};
//   @Prop() onBlur?: (event?: Event) => void = (event) => {};
//   @Prop() datepickerOptions: DatepickerOptions;
//   @State() isActive: boolean = false;
//   @State() isFocused: boolean = false;
//   @State() isDatepickerOpen: boolean = false;
//   @State() errorMessage: string = '';
// @State() selectedDate: Date | null = null; // State to hold Date object
//   //   @Element() el: HTMLElement;
//   inputContainerRef: HTMLDivElement;
//   private handleInput = (event: Event) => {
//     const input = event.target as HTMLInputElement;
//     const inputValue = input.value;
//     // Validate the input format
//     if (isValidDate(inputValue)) {
//       this.errorMessage = '';
//       this.value = inputValue;
//       if(this.error) {
//         this.error = true
//       }
//     } else {
//       this.errorMessage = 'Invalid date. Use D/M/YYYY format.';
//       this.error = true
//     }
//   };
//   private handleBlur = () => {
//     if (isValidDate(this.value)) {
//       const [day, month, year] = this.value.split('/').map(Number);
//       const formattedDate = formatDate(new Date(year, month - 1, day));
//       this.value = formattedDate; // Ensure value matches D/M/YYYY format
//       this.errorMessage = '';
//     } else {
//       this.errorMessage = 'Invalid date. Please correct it.';
//     }
//   };
//   //   handleFocus = () => {
//   //     this.isFocused = true;
//   //   };
//   //   handleBlur = (e: FocusEvent) => {
//   //     this.isFocused = false;
//   //     if (this.onBlur) {
//   //       this.onBlur(e);
//   //     }
//   //   };
//   //   handleMouseDown = () => {
//   //     this.isActive = true;
//   //   };
//   //   handleMouseUp = () => {
//   //     this.isActive = false;
//   //   };
//   //   handleMouseOut = () => {
//   //     this.isActive = false;
//   //   };
//   private handleDatepickerChange = (event: any) => {
//     // Update the Date object and formatted string
//     this.selectedDate = event.detail; // Assuming dga-datepicker emits a `Date` object
//     this.value = formatDate(this.selectedDate);
//     console.log(event.detail , "event.detail")
//     this.errorMessage = '';
//   };
//   render() {
//     return (
//       <div class="dga-form-control">
//         {this.label && <dga-label label={this.label} size={this.size} required={this.required} disabled={this.disabled} />}
//         <div
//           class={`input input--${this.size} ${this.error ? 'input--error' : ''} ${this.variant !== 'default' ? `input--${this.variant}` : ''} ${this.isActive ? 'active' : ''} ${
//             this.isFocused ? 'focus' : ''
//           } ${this.disabled ? 'input--disabled' : ''} ${this.readonly ? 'readOnly' : ''}`}
//           ref={el => (this.inputContainerRef = el as HTMLDivElement)}
//         >
//           <slot name="prefix" />
//           {/* Render prefix */}
//           {this.icon && (
//             <span class="input__icon">
//               <dga-icon icon={this.icon.name} variant={this.icon.variant} type={this.icon.type} size={20} />
//             </span>
//           )}
//           <input
//             // id={id}
//             value={this.value}
//             name={this.name}
//             type={this.type}
//             onFocus={() => {
//                 this.isFocused = true
//                 this.isDatepickerOpen = true
//             }}
//             onBlur={e => {
//               this.isFocused = false;
//               this.onBlur(e);
//               this.isDatepickerOpen = false
//             }}
//             class="input__field"
//             placeholder={this.placeholder}
//             disabled={this.disabled}
//             readOnly={this.readonly}
//             required={this.required}
//             onMouseDown={() => (this.isActive = true)}
//             onMouseUp={() => (this.isActive = false)}
//             onMouseOut={() => (this.isActive = false)}
//             onChange={this.onChange}
//             // onInput={this.onInput}
//             onInput={this.handleInput}
//             // onBlur={this.handleBlur}
//           />
//           {this.error ? (
//             <span class={`input__feedback-icon input__feedback-icon--error ${this.feedbackIconRing ? 'input__feedback-icon--ring' : ''}`}>
//               {/* {feedbackIconTypes["error"]} */}
//             </span>
//           ) : this.feedbackIcon ? (
//             <span class={`input__feedback-icon input__feedback-icon--${this.feedbackIconType} ${this.feedbackIconRing ? 'input__feedback-icon--ring' : ''}`}>
//               {feedbackIconTypes[this.feedbackIconType]}
//             </span>
//           ) : null}
//           <slot name="suffix" /> {/* Render suffix */}
//         </div>
//         {this.helperText && <dga-helper-text helperText={this.helperText} helperTextIcon={this.helperTextIcon} error={this.error} />}
//         {this.isDatepickerOpen && <div class="breadcrumb-dropdown">
//             <dga-datepicker {...this.datepickerOptions} 
//               value={this.selectedDate}
//               onChange={this.handleDatepickerChange}
//             ></dga-datepicker>
//         </div>}
//       </div>
//     );
//   }
// }
import { h } from "@stencil/core";
import { guid } from "../../utils";
import { formatDate, isValidDate } from "../dga-datepicker/dateUtils";
export class DgaDateField {
    constructor() {
        this.placeholder = "DD/MM/YYYY";
        this.size = 'lg';
        this.variant = 'default';
        this.error = false;
        this.helperText = '';
        this.disabled = false;
        this.readonly = false;
        this.required = false;
        this.name = guid();
        this.value = '';
        this.isActive = false;
        this.isFocused = false;
        this.isDatepickerOpen = false;
        this.errorMessage = '';
        this.selectedDate = null;
        this.inputValue = '';
        //   componentWillLoad() {
        //     // Initialize with provided value
        //     if (this.value) {
        //       this.inputValue = this.value;
        //       if (isValidDate(this.value)) {
        //         const [day, month, year] = this.value.split('/').map(Number);
        //         this.selectedDate = new Date(year, month - 1, day);
        //       }
        //     }
        //   }
        this.handleInput = (event) => {
            var _a, _b;
            const input = event.target;
            this.inputValue = input.value;
            if (this.inputValue === '') {
                this.selectedDate = null;
                this.errorMessage = '';
                this.error = false;
                (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, null);
                return;
            }
            if (isValidDate(this.inputValue)) {
                const [day, month, year] = this.inputValue.split('/').map(Number);
                this.selectedDate = new Date(year, month - 1, day);
                this.errorMessage = '';
                this.error = false;
                (_b = this.onChange) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedDate);
            }
            else {
                this.errorMessage = 'Use DD/MM/YYYY format';
                this.error = true;
            }
        };
        this.handleDatepickerChange = (event) => {
            var _a;
            console.log(event, "eeeeeeeeeeeeeeeeeeeee");
            this.selectedDate = event.detail;
            this.inputValue = formatDate(this.selectedDate);
            this.errorMessage = '';
            this.error = false;
            (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.selectedDate);
            this.isDatepickerOpen = false;
        };
        this.handleFocus = () => {
            this.isFocused = true;
            if (!this.readonly && !this.disabled) {
                this.isDatepickerOpen = true;
            }
        };
        this.handleBlur = () => {
            // Delay closing to allow datepicker click
            setTimeout(() => {
                var _a;
                if (!((_a = this.inputContainerRef) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))) {
                    this.isFocused = false;
                    this.isDatepickerOpen = false;
                    // Format on blur if valid
                    if (this.selectedDate) {
                        this.inputValue = formatDate(this.selectedDate);
                    }
                }
            }, 200);
        };
    }
    render() {
        const inputClasses = {
            'input': true,
            [`input--${this.size}`]: true,
            'input--error': this.error,
            [`input--${this.variant}`]: this.variant !== 'default',
            'active': this.isActive,
            'focus': this.isFocused,
            'input--disabled': this.disabled,
            'readOnly': this.readonly
        };
        console.log(this.selectedDate, "selected");
        return (h("div", { key: 'e41201440bbd896bc5bf31efde3ac5c6f2028f9a', class: "dga-form-control" }, this.label &&
            h("dga-label", { key: '7a603e877c949df718bba37f39d5e44bd0a7a270', label: this.label, size: this.size, required: this.required, disabled: this.disabled }), h("div", { key: '39e8bed956b92a85eb85871d5ce37b084a8b3acc', class: Object.keys(inputClasses).filter(key => inputClasses[key]).join(' '), ref: el => this.inputContainerRef = el }, this.icon && (h("span", { key: '60cb999f72f310ed7ca1cc14e19f954ffeade69e', class: "input__icon" }, h("dga-icon", { key: '72929e9e25f6e075a10454af7d55d7cf2411cb20', icon: this.icon.name, variant: this.icon.variant, type: this.icon.type, size: 20 }))), h("input", { key: '6c4623fe5f94e4c974474ff77dfd90d990adece1', name: this.name, value: this.inputValue, type: "text", class: "input__field", placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, onFocus: this.handleFocus, onBlur: this.handleBlur, onInput: this.handleInput, onMouseDown: () => this.isActive = true, onMouseUp: () => this.isActive = false, onMouseOut: () => this.isActive = false }), this.error && (h("span", { key: '10fdb0d7bd274c52d420d83b5df6a6b6e663e75c', class: "input__feedback-icon input__feedback-icon--error" }, h("dga-icon", { key: '3e6536b274610200f7ff75a49200895dcc1f396e', icon: "AlertCircleIcon", variant: "solid" })))), (this.errorMessage || this.helperText) &&
            h("dga-helper-text", { key: '59ddd85bbf4c955d3199a17e58813b365b058ed0', helperText: this.errorMessage || this.helperText, error: this.error }), console.log(this.selectedDate), this.isDatepickerOpen &&
            h("div", { key: '59a2de01b7a3b0d6f04c1203b783c7d943627f1c', class: "date-picker-dropdown" }, h("dga-datepicker", Object.assign({ key: 'd8d1c1f576cfd63504e2b2191d419f3006e63572' }, this.datepickerOptions, { value: this.selectedDate, onChange: this.handleDatepickerChange })))));
    }
    static get is() { return "dga-date-field"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-date-field.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-date-field.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "placeholder",
                "reflect": false,
                "defaultValue": "\"DD/MM/YYYY\""
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'md' | 'lg'",
                    "resolved": "\"lg\" | \"md\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'lg'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'default' | 'lighter' | 'darker'",
                    "resolved": "\"darker\" | \"default\" | \"lighter\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'default'"
            },
            "error": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "error",
                "reflect": false,
                "defaultValue": "false"
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "helper-text",
                "reflect": false,
                "defaultValue": "''"
            },
            "icon": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Icon",
                    "resolved": "Icon",
                    "references": {
                        "Icon": {
                            "location": "import",
                            "path": "../dga-featured-icon/dga-featured-icon",
                            "id": "src/components/dga-featured-icon/dga-featured-icon.tsx::Icon"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "readonly",
                "reflect": false,
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "required",
                "reflect": false,
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": false,
                "defaultValue": "guid()"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": false,
                "defaultValue": "''"
            },
            "onChange": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(date: Date | null) => void",
                    "resolved": "(date: Date) => void",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "datepickerOptions": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "DatepickerOptions",
                    "resolved": "DatepickerOptions",
                    "references": {
                        "DatepickerOptions": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-date-field/dga-date-field.tsx",
                            "id": "src/components/dga-date-field/dga-date-field.tsx::DatepickerOptions"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "isActive": {},
            "isFocused": {},
            "isDatepickerOpen": {},
            "errorMessage": {},
            "selectedDate": {},
            "inputValue": {}
        };
    }
}
//# sourceMappingURL=dga-date-field.js.map
