import { Component, Event, Host, h, Prop, State } from '@stencil/core';
export class UxplSelectDay {
  constructor() {
    /**
     * mode: single|multiple
     */
    this.mode = 'multiple';
    this.month = [['1', '2', '3', '4', '5', '6', '7'], ['8', '9', '10', '11', '12', '13', '14'], ['15', '16', '17', '18', '19', '20', '21'], ['22', '23', '24', '25', '26', '27', '28'], ['29', '30', '31']];
    this.week = [['S', 'M', 'T', 'W', 'TH', 'F', 'SA']];
    this.selected = [];
    this.onClick = (element) => {
      if (this.mode === 'single') {
        this.selected = [element];
      }
      else {
        if (!this.selected.includes(element)) {
          this.selected = [...this.selected, element];
        }
        else {
          const index = this.selected.indexOf(element);
          if (index !== -1) {
            this.selected.splice(index, 1);
          }
        }
      }
      this.uxplChanged.emit(this.selected);
    };
  }
  render() {
    const data = this.type === 'month' ? this.month : this.week;
    return (h(Host, null, data.map((row) => h("div", { class: "line" }, row.map((el, index) => h("div", { onClick: (_) => this.onClick(el), class: {
        "cell-content": true,
        "cell-content-margin": index === 0 ? false : true,
        "cell-content-selected": this.selected.includes(el) ? true : false
      } }, el))))));
  }
  static get is() { return "uxpl-select-day"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-select-day.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-select-day.css"]
  }; }
  static get properties() { return {
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "type: month|week"
      },
      "attribute": "type",
      "reflect": false
    },
    "mode": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "mode: single|multiple"
      },
      "attribute": "mode",
      "reflect": false,
      "defaultValue": "'multiple'"
    }
  }; }
  static get states() { return {
    "selected": {}
  }; }
  static get events() { return [{
      "method": "uxplChanged",
      "name": "uxplChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Value changed"
      },
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      }
    }]; }
}
