import { Component, Element, Event, h, Listen, Prop, State, Watch } from "@stencil/core";
import { Schedule } from "@payfunc/model";
import * as translation from "./translation";
export class IntergiroSelectOffset {
  constructor() {
    this.days = [];
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
    this.weekdays = ["Weekday", ...Schedule.weekdays];
    this.quarterly = ["Month", ...Schedule.quarterly];
    this.months = ["Month", ...Schedule.months];
    const days = ["Date", ...Schedule.daysOfMonth.map(day => (day >= 0 ? (day + 1).toString() : day.toString()))];
    this.days = days;
    this.setValues();
  }
  onSelectionChanged(e) {
    const value = Number(e.detail.value);
    e.detail.value = value != undefined && value >= 0 ? (value - 1).toString() : e.detail.value;
    if (e.detail.identifier == "offset") {
      this.value = e.detail.value;
      this.offsetChanged.emit(this.value2 ? [this.value, this.value2] : this.value);
    }
    else if (e.detail.identifier == "offset2") {
      this.value2 = e.detail.value;
      this.offsetChanged.emit([this.value, this.value2]);
    }
  }
  setValues() {
    switch (this.frequency) {
      case "weekly":
        this.values = this.weekdays;
        this.value = "Weekday";
        this.value2 = undefined;
        break;
      case "monthly":
        this.values = this.days;
        this.value = "Date";
        this.value2 = undefined;
        break;
      case "quarterly":
        this.values = this.quarterly;
        this.value = "Month";
        this.values2 = this.days;
        this.value2 = "Date";
        break;
      case "yearly":
        this.values = this.months;
        this.value = "Month";
        this.values2 = this.days;
        this.value2 = "Date";
        break;
      default:
        break;
    }
  }
  render() {
    return [
      this.values && this.value ? (h("smoothly-select", { identifier: "offset", background: "transparent" }, this.values.map(option => this.value == option ? (h("option", { value: option, selected: true }, this.t(option))) : (h("option", { value: option }, this.t(option)))))) : ([]),
      this.values2 && this.value2 && this.value != "Month" ? (h("smoothly-select", { identifier: "offset2", background: "transparent" }, this.values2.map(option => this.value2 == option ? (h("option", { value: option, selected: true }, this.t(option))) : (h("option", { value: option }, this.t(option)))))) : ([]),
    ];
  }
  static get is() { return "ig-select-offset"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "frequency": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "frequency",
      "reflect": true
    }
  }; }
  static get states() { return {
    "weekdays": {},
    "months": {},
    "quarterly": {},
    "days": {},
    "t": {},
    "values": {},
    "value": {},
    "values2": {},
    "value2": {}
  }; }
  static get events() { return [{
      "method": "offsetChanged",
      "name": "offsetChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "element"; }
  static get watchers() { return [{
      "propName": "frequency",
      "methodName": "setValues"
    }]; }
  static get listeners() { return [{
      "name": "selectionChanged",
      "method": "onSelectionChanged",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
