import { Component, Event, h, Host, Prop, State, Watch } from '@stencil/core';
// See: https://en.wikipedia.org/wiki/12-hour_clock
function formatAMPM(timeFormat, value) {
  if (timeFormat === '12-hour') {
    let digits = `${value % 12}`;
    if (value === 0) {
      digits = '12';
    }
    return digits;
  }
  return `${value}`;
}
const numberInputWidth = '50px';
export class DvnTimePicker {
  constructor() {
    this.hour = 9;
    this.minute = 0;
    this.disabled = false;
    this.leaned = false;
    this.timeFormat = '24-hour';
  }
  componentWillLoad() {
    this.isAM = this.hour < 12;
    if (this.timeFormat === '12-hour') {
      this.hours = Array.apply(null, Array(12)).map((_, i) => i);
    }
    else {
      this.hours = Array.apply(null, Array(24)).map((_, i) => i);
    }
  }
  watchHandler(newValue) {
    this.isAM = newValue < 12;
  }
  render() {
    const { disabled, hour, minute, timeFormat, isAM } = this;
    const hourValue = timeFormat === '12-hour' ? (hour % 12) : hour;
    return (h(Host, null,
      h("dvn-input-group", { leaned: this.leaned },
        h("dvn-select", { disabled: disabled, width: numberInputWidth, hideCaret: true, hideCheck: true, hideScrollbar: false, value: `${hourValue}`, optionsContainerMaxHeight: this.optionsContainerMaxHeight, onChange: e => {
            e.stopImmediatePropagation();
            if (timeFormat === '24-hour' || isAM) {
              this.change.emit({ hour: Number(e.detail), minute });
            }
            else {
              this.change.emit({ hour: Number(e.detail) + 12, minute });
            }
          } },
          h("dvn-select-option", null, "HH"),
          this.hours.map(hour => (h("dvn-select-option", { value: `${hour}` }, formatAMPM(timeFormat, hour))))),
        h("dvn-select", { disabled: disabled, width: numberInputWidth, hideCaret: true, hideCheck: true, hideScrollbar: true, value: `${minute}`, onChange: e => {
            e.stopImmediatePropagation();
            this.change.emit({ hour, minute: Number(e.detail) });
          } },
          h("dvn-select-option", null, "mm"),
          h("dvn-select-option", { value: "0" }, "00"),
          h("dvn-select-option", { value: "15" }, "15"),
          h("dvn-select-option", { value: "30" }, "30"),
          h("dvn-select-option", { value: "45" }, "45")),
        timeFormat === '12-hour' &&
          h("dvn-select", { disabled: disabled, width: numberInputWidth, hideCaret: true, hideCheck: true, hideScrollbar: true, value: isAM ? 'AM' : 'PM', onChange: e => {
              e.stopImmediatePropagation();
              if (e.detail === 'AM') {
                this.change.emit({ hour: hourValue, minute });
              }
              else {
                this.change.emit({ hour: hourValue + 12, minute });
              }
            } },
            h("dvn-select-option", { value: "AM" }, "AM"),
            h("dvn-select-option", { value: "PM" }, "PM")))));
  }
  static get is() { return "dvn-time-picker"; }
  static get originalStyleUrls() { return {
    "$": ["dvn-time-picker.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["dvn-time-picker.css"]
  }; }
  static get properties() { return {
    "hour": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "hour",
      "reflect": false,
      "defaultValue": "9"
    },
    "minute": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "minute",
      "reflect": false,
      "defaultValue": "0"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "optionsContainerMaxHeight": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "options-container-max-height",
      "reflect": false
    },
    "leaned": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "leaned",
      "reflect": false,
      "defaultValue": "false"
    },
    "timeFormat": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "TimeFormat",
        "resolved": "\"12-hour\" | \"24-hour\"",
        "references": {
          "TimeFormat": {
            "location": "import",
            "path": "@dvn/takvim/api/models/Event"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "time-format",
      "reflect": false,
      "defaultValue": "'24-hour'"
    }
  }; }
  static get states() { return {
    "isAM": {}
  }; }
  static get events() { return [{
      "method": "change",
      "name": "change",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get watchers() { return [{
      "propName": "hour",
      "methodName": "watchHandler"
    }]; }
}
