import { Component, Element, Prop, h, State, Watch, Event } from '@stencil/core';
import flatpickr from 'flatpickr';
export class Datepicker {
  constructor() {
    this.label = 'Select date';
    this.enableRange = false;
    this.enableTime = false;
    this.doubleCalendar = false;
    this.showCalendarIcon = true;
    this.inline = false;
    this.format = 'Y-m-d H:i';
    this.value = '';
    /**
     *  Flag to disable button
     */
    this.disabled = false;
    /**
     * The minimum date that a user can start picking from (inclusive).
     */
    this.minDate = null;
    /**
     * The maximum date that a user can pick to (inclusive).
     */
    this.maxDate = null;
    /**
     * use date picker as an icon instead of default input.
     */
    this.useAsIcon = false;
    this.selectedDate = '';
  }
  componentDidLoad() {
    this.initFlatpickr();
    this.onValueChanged(this.value);
  }
  initFlatpickr() {
    let options = {
      enableTime: this.enableTime,
      dateFormat: this.format,
      altInput: typeof this.displayFormat !== 'undefined',
      altInputClass: '',
      altFormat: this.displayFormat,
      mode: this.enableRange ? 'range' : 'single',
      showMonths: this.doubleCalendar ? 2 : 1,
      onChange: (_dates, selectedDate) => this.handleDateChanged(selectedDate),
      inline: this.inline,
      minDate: this.minDate,
      maxDate: this.maxDate,
    };
    this.flatpickr = flatpickr(this.el.querySelector('.flatpickr'), options);
  }
  onValueChanged(value) {
    if (value) {
      let date = new Date(value);
      let isDate = date instanceof Date && !isNaN(date.valueOf());
      this.flatpickr.setDate(isDate ? date : value, false, this.format);
    }
    this.handleDateChanged(value);
  }
  /**
   * to trigger setting of the minDate in config
   * @param date
   */
  onMinDateChange(date) {
    if (date) {
      this.flatpickr.config.minDate = date;
    }
  }
  /**
   * to trigger setting of the maxDate in config
   * @param date
   */
  onMaxDateChange(date) {
    if (date) {
      this.flatpickr.config.maxDate = date;
    }
  }
  handleDateChanged(date) {
    this.selectedDate = date;
    this.valueChanged.emit(date);
  }
  render() {
    return (h("div", { class: {
        'disabled': this.disabled,
        'flatpickr': true,
        'btn-date-picker': this.useAsIcon,
      } }, this.useAsIcon ? (h("bs-button", { disabled: this.disabled, variant: "light", title: this.label },
      h("bs-icon", { icon: "fas fa-calendar-alt", size: 20 }))) : (h("bs-form-row", null,
      h("bs-form-group", null,
        h("bs-form-label", null, this.label),
        h("bs-form-control", { "control-id": `datepicker-${this.label.replace(/ /g, '')}`, as: "input", name: `datepicker-${this.label.replace(/ /g, '')}`, type: "text", value: this.selectedDate, onBsInput: e => { var _a, _b; return this.handleDateChanged((_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value); } }))))));
  }
  static get is() { return "gd-date-picker"; }
  static get originalStyleUrls() { return {
    "$": ["./gd-date-picker.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gd-date-picker.css"]
  }; }
  static get properties() { return {
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "'Select date'"
    },
    "enableRange": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "enable-range",
      "reflect": false,
      "defaultValue": "false"
    },
    "enableTime": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "enable-time",
      "reflect": false,
      "defaultValue": "false"
    },
    "doubleCalendar": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "double-calendar",
      "reflect": false,
      "defaultValue": "false"
    },
    "showCalendarIcon": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show-calendar-icon",
      "reflect": false,
      "defaultValue": "true"
    },
    "inline": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "inline",
      "reflect": false,
      "defaultValue": "false"
    },
    "format": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "format",
      "reflect": false,
      "defaultValue": "'Y-m-d H:i'"
    },
    "value": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": false,
      "defaultValue": "''"
    },
    "displayFormat": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "display-format",
      "reflect": false
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Flag to disable button"
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "minDate": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The minimum date that a user can start picking from (inclusive)."
      },
      "attribute": "min-date",
      "reflect": false,
      "defaultValue": "null"
    },
    "maxDate": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The maximum date that a user can pick to (inclusive)."
      },
      "attribute": "max-date",
      "reflect": false,
      "defaultValue": "null"
    },
    "useAsIcon": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "use date picker as an icon instead of default input."
      },
      "attribute": "use-as-icon",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "selectedDate": {}
  }; }
  static get events() { return [{
      "method": "valueChanged",
      "name": "valueChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "value",
      "methodName": "onValueChanged"
    }, {
      "propName": "minDate",
      "methodName": "onMinDateChange"
    }, {
      "propName": "maxDate",
      "methodName": "onMaxDateChange"
    }]; }
}
