import { Component, Element, Event, h, Listen, Prop, State } from '@stencil/core';
import '@elifent/paper-datepicker/paper-datepicker.js';
import '@ui5/webcomponents/dist/Calendar.js'; // ui5-li
import '@ui5/webcomponents/dist/CalendarDate.js'; // ui5-li
import '@ui5/webcomponents/dist/DatePicker.js'; // ui5-li
import '@ui5/webcomponents/dist/Assets.js';
import { StateOfReminder } from '../../utils/utils';
export class AddonReminderBody {
  constructor() {
    this.durationArray = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
    this.hoursArray = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
    this.minutesArray = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28',
      '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'];
    this.active1 = false;
    this.active2 = false;
    this.active3 = false;
    this.reminderDoneValue = false;
    this.reminderDone = false;
  }
  componentWillRender() {
    this.status = this.state;
    if (this.addonReminderInfoFromParent) {
      this.hours = this.addonReminderInfoFromParent.hour;
      this.minutes = this.addonReminderInfoFromParent.minute;
      this.duration = this.addonReminderInfoFromParent.duration;
      this.date = this.addonReminderInfoFromParent.date;
      this.descriptionText = this.addonReminderInfoFromParent.description;
    }
  }
  connectedCallback() {
    this.el.addEventListener('ui5-selected-dates-change', function (e) { console.log(e); }, false);
  }
  componentShouldUpdate() {
    if (this.state === StateOfReminder.view) {
      this.descriptionText = this.addonReminderInfoFromParent.description;
    }
    else {
      let remindeInfoBodyDTO = { description: this.descriptionText, hour: this.hours, minute: this.minutes, duration: this.duration, date: this.date };
      this.addonReminderInfoFromBodyEmitter.emit(remindeInfoBodyDTO);
    }
    this.reminderDone = this.reminderDoneValue;
    this.status = this.state;
  }
  takeCalendarDate(ev) {
    this.date = ev.currentTarget._state.dates[0]._state.value;
  }
  // dispatchEvent(ev: Event){
  //   let component: Element = (ev.composedPath()[0] as Element)
  //
  //   console.log(component.getAttribute('aria-label'))
  //   this.date = component.getAttribute('aria-label');
  //
  // }
  //TODO: implementare anche la ricerca della posizione quando cancello un singolo carattere.
  takeTextFromInput(value) {
    if (value.detail.inputType === 'deleteContentBackward' && value.detail.text === '') {
      let newString = this.descriptionText;
      newString = newString.substring(0, this.descriptionText.length - 1);
      this.descriptionText = newString;
    }
    else if (value.detail.inputType === 'deleteContentBackward') {
      let newString = this.descriptionText;
      newString = newString.replace(value.detail.text, '');
      this.descriptionText = newString;
    }
    else if (value.detail === 'deleteContentForward') {
      let newString = this.descriptionText;
      newString = newString.replace(value.detail.text, '');
      this.descriptionText = newString;
    }
    else {
      this.descriptionText = this.descriptionText + value.detail;
    }
  }
  calculateEndDate(hours, minutes, duration) {
    let endDate;
    endDate = parseInt(hours) + parseInt(duration);
    return endDate + '.' + minutes;
  }
  getHoursAndMinutes(ev) {
    if (ev.detail.type === 'Ore') {
      this.hours = ev.detail.value;
    }
    else if (ev.detail.type === 'Minuti') {
      this.minutes = ev.detail.value;
    }
    else {
      this.duration = ev.detail.value;
    }
  }
  catchOpenFromInputSelect(ev) {
    if (ev.detail.inputNr === 1) {
      this.active1 = ev.detail.isOpen;
      this.active2 = false;
      this.active3 = false;
    }
    else if (ev.detail.inputNr === 2) {
      this.active1 = false;
      this.active2 = ev.detail.isOpen;
      this.active3 = false;
    }
    else {
      this.active1 = false;
      this.active2 = false;
      this.active3 = ev.detail.isOpen;
    }
  }
  handleClickOutsideInputSelect(event) {
    if (event.target.shadowRoot) {
      this.active3 = false;
      this.active2 = false;
      this.active1 = false;
      // this.el.shadowRoot.getElementById('item-select3').shadowRoot.getElementById('alloptionscontainer').setAttribute('class', 'hidden')
      // this.el.shadowRoot.getElementById('item-select2').shadowRoot.getElementById('alloptionscontainer').setAttribute('class', 'hidden')
      // this.el.shadowRoot.getElementById('item-select1').shadowRoot.getElementById('alloptionscontainer').setAttribute('class', 'hidden')
      if (event.target.shadowRoot.activeElement) {
        if (event.target.shadowRoot.activeElement.id === 'item-select1') {
          this.active1 = true;
          this.active2 = false;
          this.active3 = false;
          // this.el.shadowRoot.getElementById('item-select1').shadowRoot.getElementById('alloptionscontainer').setAttribute('class', 'all-options-container')
        }
        if (event.target.shadowRoot.activeElement.id === 'item-select2') {
          this.active2 = true;
          this.active1 = false;
          this.active3 = false;
          // this.el.shadowRoot.getElementById('item-select2').shadowRoot.getElementById('alloptionscontainer').setAttribute('class', 'all-options-container')
        }
        if (event.target.shadowRoot.activeElement.id === 'item-select3') {
          this.active3 = true;
          this.active2 = false;
          this.active1 = false;
          // this.el.shadowRoot.getElementById('item-select3').shadowRoot.getElementById('alloptionscontainer').setAttribute('class', 'all-options-container')
        }
      }
    }
  }
  getDates(ev) {
    console.log(ev);
  }
  render() {
    if (this.state === StateOfReminder.create) {
      return (h("div", { class: "reminder-body", id: "ilmiobody" },
        h("div", { class: "calendar" },
          h("ui5-calendar", { onClick: (ev) => this.takeCalendarDate(ev), id: "my-calendar", class: "ilmiocalendar", "format-pattern": "dd/MM/yyyy", "hide-week-numbers": true })),
        h("div", { class: "description-elements" },
          h("description-input", { onInput: (value) => this.takeTextFromInput(value), state: this.status }),
          h("div", { class: "input-select-container" },
            h("input-select", { numberOfInputSelect: 1, triggerIsOpen: this.active1, id: "item-select1", class: "input-select", text: "Ore", optionLabels: this.hoursArray }),
            h("input-select", { numberOfInputSelect: 2, triggerIsOpen: this.active2, id: "item-select2", class: "input-select", text: "Minuti", optionLabels: this.minutesArray }),
            h("input-select", { numberOfInputSelect: 3, triggerIsOpen: this.active3, id: "item-select3", class: "input-select", text: "Durata", optionLabels: this.durationArray })))));
    }
    else if (this.state === StateOfReminder.view) {
      return (h("div", { class: "reminder-body" },
        h("div", { class: "calendar-view" },
          h("ui5-calendar", { "format-pattern": "dd/MM/yyyy", onClick: (ev) => this.takeCalendarDate(ev), id: "my-calendar", class: "ilmiocalendar" },
            h("ui5-date", { value: this.date }))),
        h("div", { class: "description-elements" },
          h("description-input", { state: this.status, text: this.descriptionText }),
          h("div", { class: "date-and-time-container" },
            h("div", { class: "time-slot" },
              h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                h("path", { d: "M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM14.2 14.2L9 11V5H10.5V10.2L15 12.9L14.2 14.2Z", fill: "#6F8DC2" })),
              h("div", { class: "time-text" },
                "Dalle ore ",
                this.hours,
                ".",
                this.minutes,
                " alle ",
                this.calculateEndDate(this.hours, this.minutes, this.duration),
                "  (",
                this.duration,
                " ore)")),
            h("div", { class: "date-slot" },
              h("svg", { width: "20", height: "22", viewBox: "0 0 20 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                h("path", { d: "M18 2H17V0H15V2H5V0H3V2H2C0.9 2 0 2.9 0 4V20C0 21.1 0.9 22 2 22H18C19.1 22 20 21.1 20 20V4C20 2.9 19.1 2 18 2ZM18 20H2V7H18V20Z", fill: "#6F8DC2" })),
              h("div", { class: "date-text" }, this.date)),
            h("div", { class: { 'reminder-status': true, 'hidden-reminder-status': this.reminderDone === true } },
              h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                h("path", { d: "M0 5C0 2.23858 2.23858 0 5 0H19C21.7614 0 24 2.23858 24 5V19C24 21.7614 21.7614 24 19 24H5C2.23858 24 0 21.7614 0 19V5Z", fill: "#6F8DC2" }),
                h("path", { d: "M9.00016 16.17L4.83016 12L3.41016 13.41L9.00016 19L21.0002 7.00003L19.5902 5.59003L9.00016 16.17Z", fill: "#F7F9FC" })),
              h("div", { class: "text-status" }, "Completato"))))));
    }
    else {
      return (h("div", { class: "reminder-body" },
        h("div", { class: "calendar" },
          h("ui5-calendar", { onClick: (ev) => this.takeCalendarDate(ev), id: "my-calendar", class: "ilmiocalendar", "format-pattern": "dd/MM/yyyy", "hide-week-numbers": true })),
        h("div", { class: "description-elements" },
          h("description-input", { state: this.status, text: this.descriptionText }),
          h("div", { class: "input-select-container" },
            h("input-select", { triggerIsOpen: this.active1, id: "item-select1", class: "input-select", text: "Ore", optionLabels: this.hoursArray, valueOfEdit: this.hours }),
            h("input-select", { triggerIsOpen: this.active2, id: "item-select2", class: "input-select", text: "Minuti", optionLabels: this.minutesArray, valueOfEdit: this.minutes }),
            h("input-select", { triggerIsOpen: this.active3, id: "item-select3", class: "input-select", text: "Durata", optionLabels: this.durationArray, valueOfEdit: this.duration })))));
    }
  }
  static get is() { return "addon-reminder-body"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["addon-reminder-body.css"]
  }; }
  static get styleUrls() { return {
    "$": ["addon-reminder-body.css"]
  }; }
  static get properties() { return {
    "addonReminderInfoFromParent": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "{\n    name: string;\n    description: string;\n    hour: string;\n    minute: string;\n    duration: string;\n    date: string;\n  }",
        "resolved": "{ name: string; description: string; hour: string; minute: string; duration: string; date: string; }",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "reminderDoneValue": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "reminder-done-value",
      "reflect": false,
      "defaultValue": "false"
    },
    "state": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "StateOfReminder",
        "resolved": "StateOfReminder.create | StateOfReminder.edit | StateOfReminder.view",
        "references": {
          "StateOfReminder": {
            "location": "import",
            "path": "../../utils/utils"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "state",
      "reflect": false
    },
    "descriptionText": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "description-text",
      "reflect": false
    },
    "hours": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "hours",
      "reflect": false
    },
    "minutes": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "minutes",
      "reflect": false
    },
    "date": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "date",
      "reflect": false
    },
    "duration": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "duration",
      "reflect": false
    }
  }; }
  static get states() { return {
    "active1": {},
    "active2": {},
    "active3": {},
    "reminderDone": {},
    "status": {}
  }; }
  static get events() { return [{
      "method": "addonReminderInfoFromBodyEmitter",
      "name": "addonReminderInfoFromBodyEmitter",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{description: string, hour:string, minute:string, duration:string, date: string}",
        "resolved": "{ description: string; hour: string; minute: string; duration: string; date: string; }",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
  static get listeners() { return [{
      "name": "selected-dates-change",
      "method": "takeCalendarDate",
      "target": undefined,
      "capture": true,
      "passive": true
    }, {
      "name": "textEmitter",
      "method": "takeTextFromInput",
      "target": undefined,
      "capture": true,
      "passive": true
    }, {
      "name": "emitOptionValue",
      "method": "getHoursAndMinutes",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "isOpenEmit",
      "method": "catchOpenFromInputSelect",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "click",
      "method": "handleClickOutsideInputSelect",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "ui5-change",
      "method": "getDates",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
