import { Component, Host, h, Event, State, Prop, Listen } from '@stencil/core';
export class GascoCalendar {
  constructor() {
    this.fireFocusEvents = true;
    this.hasFocus = false;
    this.showCalendar = false;
    this.inputValue = '';
    this.onFocus = (ev) => {
      this.hasFocus = true;
      if (!this.showCalendar) {
        this.showCalendar = true;
      }
      if (this.fireFocusEvents) {
        this.gascoFocus.emit(ev);
      }
    };
    this.onBlur = (ev) => {
      this.hasFocus = false;
      if (this.showCalendar) {
        this.showCalendar = false;
      }
      if (this.fireFocusEvents) {
        this.gascoBlur.emit(ev);
      }
    };
  }
  handleDatetimeReady(ev) {
    const { month, day, year } = ev.detail;
    const value = `${day}/${month}/${year}`;
    this.inputValue = value;
    this.gascoChangeValue.emit({ value });
  }
  render() {
    const { onFocus, onBlur, showCalendar, inputValue } = this;
    return (h(Host, { onBlur: onBlur, onFocus: onFocus, class: {
        ['gasco-color']: true,
        ['gasco-calendar']: true,
        ['gasco-color-primary']: true,
        'has-focus': this.hasFocus,
      } },
      h("div", { class: "native-calendar", part: "native" },
        h("gasco-input", { class: "input-datetime", value: inputValue, readonly: true },
          h("ion-icon", { name: "calendar-number-outline", slot: "end" })),
        showCalendar && h("gasco-datetime", { size: "cover" }))));
  }
  static get is() { return "gasco-calendar"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["gasco-calendar.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gasco-calendar.css"]
  }; }
  static get properties() { return {
    "fireFocusEvents": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "fire-focus-events",
      "reflect": false,
      "defaultValue": "true"
    }
  }; }
  static get states() { return {
    "hasFocus": {},
    "showCalendar": {},
    "inputValue": {}
  }; }
  static get events() { return [{
      "method": "gascoChangeValue",
      "name": "gascoChangeValue",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the value has changed."
      },
      "complexType": {
        "original": "InputChangeEventDetail",
        "resolved": "InputChangeEventDetail",
        "references": {
          "InputChangeEventDetail": {
            "location": "import",
            "path": "../gasco-input/gasco-input-interface"
          }
        }
      }
    }, {
      "method": "gascoBlur",
      "name": "gascoBlur",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the input loses focus."
      },
      "complexType": {
        "original": "FocusEvent",
        "resolved": "FocusEvent",
        "references": {
          "FocusEvent": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "gascoFocus",
      "name": "gascoFocus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the input has focus."
      },
      "complexType": {
        "original": "FocusEvent",
        "resolved": "FocusEvent",
        "references": {
          "FocusEvent": {
            "location": "global"
          }
        }
      }
    }]; }
  static get listeners() { return [{
      "name": "gascoDatetimeReady",
      "method": "handleDatetimeReady",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
