import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { S as States } from './utils.js';
import { d as defineCustomElement$1 } from './sw-obligatory-field2.js';

const swDescriptionInputCss = ".description-container{display:flex;flex-direction:column;width:70%;height:147px;background-color:#E9EEF6;padding:20px;margin-top:3rem;margin-right:3rem;margin-bottom:1rem;border-radius:10px;position:relative}.description-container-view{display:flex;flex-direction:column;width:70%;height:-moz-min-content;height:min-content;background-color:white;margin-top:3rem;color:#4C4C4C;font-size:16px;font-weight:normal}.description-container:focus-within{background-color:#DFE6F1}.textarea-create{white-space:pre-wrap;overflow-wrap:break-word;writing-mode:horizontal-tb !important;padding:10px 10px 50px 0px;word-wrap:break-word;overflow:auto;position:relative;background-color:#E9EEF6;border:2px;border-radius:0;color:#4C4C4C;font-weight:bold;width:100%;height:120px;font-family:Karla, serif;text-overflow:ellipsis;resize:none;}.textarea-view{white-space:pre-wrap;overflow-wrap:break-word;background-color:white;font-size:16px;border:0;border-radius:0;color:#4C4C4C;font-weight:normal;width:100%;height:auto;font-family:Karla, serif;text-overflow:ellipsis;word-wrap:break-word;resize:none;overflow:hidden;pointer-events:none;min-height:120px}textarea:focus-within{background-color:#DFE6F1;font-weight:bold;font-family:Karla, serif}textarea:focus{outline:none !important;border-color:#839ECB}::-moz-placeholder{color:#839ECB}::placeholder{color:#839ECB}.title{color:#839ECB;font-family:Roboto, serif;font-weight:bold}.title:focus-within{color:#5D7FBA;font-weight:bold;font-family:Roboto, serif}.obligatory-field{position:absolute;bottom:0;right:0;margin-left:1rem}";

const SwDescriptionInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.textEmitter = createEvent(this, "textEmitter", 7);
    this.selectionText = "";
    this.status = undefined;
    this.state = undefined;
    this.text = "";
  }
  componentWillRender() {
    this.status = this.state;
  }
  componentShouldUpdate() {
    this.status = this.state;
  }
  async emitValueOfText(value) {
    if (value.inputType === "deleteContentBackward") {
      if (this.selectionText) {
        this.textEmitter.emit({
          inputType: "deleteContentBackward",
          text: this.selectionText,
        });
      }
      else {
        this.textEmitter.emit({ inputType: "deleteContentBackward", text: "" });
      }
    }
    else if (value.inputType === "insertFromPaste") {
      const textCopied = await navigator.clipboard.readText();
      this.textEmitter.emit({ inputType: "text", text: textCopied });
    }
    else {
      this.textEmitter.emit({ inputType: "text", text: value.data });
    }
  }
  // checkForDelete(ev){
  //
  //     const key = ev.key; // const {key} = event; ES6+
  //     if (key === "Cancel" || key === "Delete") {
  //       console.log(this.text)
  //     }
  //
  // }
  render() {
    if (this.status === States.create) {
      return (h("div", { class: "description-container" }, h("div", { class: "title" }, "Descrizione"), h("textarea", { rows: 2, name: "usrtxt", cols: 20, wrap: "hard", maxLength: 255, onInput: (value) => this.emitValueOfText(value), class: "textarea-create" }), h("sw-obligatory-field", { class: "obligatory-field" })));
    }
    else if (this.status === States.view) {
      return (h("div", { class: "description-container-view" }, h("textarea", { class: "textarea-view" }, this.text)));
    }
    else {
      return (h("div", { class: "description-container" }, h("div", { class: "title" }, "Descrizione"), h("textarea", { id: "mytext", onInput: (value) => this.emitValueOfText(value), class: "textarea-create" }, this.text), h("sw-obligatory-field", { class: "obligatory-field" })));
    }
  }
  handleSelection() {
    if (window.getSelection) {
      this.selectionText = window.getSelection().toString();
    }
  }
  static get style() { return swDescriptionInputCss; }
}, [1, "sw-description-input", {
    "state": [1],
    "text": [1],
    "status": [32]
  }, [[17, "mouseup", "handleSelection"]]]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sw-description-input", "sw-obligatory-field"];
  components.forEach(tagName => { switch (tagName) {
    case "sw-description-input":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, SwDescriptionInput);
      }
      break;
    case "sw-obligatory-field":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { SwDescriptionInput as S, defineCustomElement as d };
