import { Host, h, } from "@stencil/core";
import "@maggioli-design-system/mds-icon/dist/mds-icon/mds-icon";
import { States } from "src/utils/utils";
export class SwChecklistItem {
  constructor() {
    this.tempTodo = {};
    this.elementTODO = undefined;
    this.state = undefined;
    this.internalState = States.view;
    this.orderNumber = undefined;
    this.optionsMenuOpen = false;
    this.checked = false;
  }
  deleteItemFn(id) {
    this.deleteItem.emit(id);
  }
  goToViewState(id) {
    console.log(id);
    this.elementTODO = { ...this.elementTODO };
    const inputText = this.element.shadowRoot.querySelector("sw-input-text");
    const inputCheck = this.element.shadowRoot.getElementById("checkbox-check");
    inputText.value = this.elementTODO.description;
    inputCheck.checked = this.elementTODO.checked;
    if (this.internalState !== States.edit) {
      this.updateValue.emit(this.elementTODO.checked);
    }
    this.checked = this.elementTODO.checked ? true : false;
    this.internalState = States.view;
  }
  componentWillRender() {
    var _a;
    this.checked = (_a = this.elementTODO) === null || _a === void 0 ? void 0 : _a.checked;
    this.tempTodo = { ...this.elementTODO };
  }
  updateText(event) {
    if (this.internalState === States.view) {
      this.elementTODO.description = event.detail;
    }
    else {
      this.tempTodo.description = event.detail;
    }
  }
  updateCheckedValue(event) {
    if (this.internalState === States.view) {
      this.elementTODO.checked = event;
      this.checked = this.elementTODO.checked;
      this.updateValue.emit(this.elementTODO.checked);
    }
    else {
      this.tempTodo.checked = event;
    }
  }
  openOptions() {
    this.optionsMenuOpen = !this.optionsMenuOpen;
  }
  changeState(ev) {
    if (ev.detail === "edit") {
      this.internalState = States.edit;
    }
    else if (ev.detail === "delete") {
      this.rapidDeleteItem.emit(this.elementTODO.orderNumber);
      this.state = States.view;
    }
    this.emitChangeState.emit(this.state);
  }
  render() {
    var _a, _b, _c, _d;
    return (h(Host, null, h("div", { class: "checklist-container py-3" }, h("svg", { class: "cursor-grab active:cursor-grabbing mr-4", width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0 10H18V8H0V10ZM0 14H18V12H0V14ZM0 6H18V4H0V6ZM0 0V2H18V0H0Z", fill: "#BBBBBB" })), h("div", { class: "items-center w-[40px] h-full" }, this.internalState === States.view ? (h("input", { id: "checkbox-check", type: "checkbox", class: { checkOn: this.checked, checkOff: !this.checked }, checked: (_a = this.elementTODO) === null || _a === void 0 ? void 0 : _a.checked, disabled: this.state === States.view, onInput: () => { var _a; return this.updateCheckedValue(!((_a = this.elementTODO) === null || _a === void 0 ? void 0 : _a.checked)); } })) : (h("input", { id: "checkbox-check", type: "checkbox", class: { checkOn: this.checked, checkOff: !this.checked }, checked: (_b = this.elementTODO) === null || _b === void 0 ? void 0 : _b.checked, onInput: () => { var _a; return this.updateCheckedValue(!((_a = this.elementTODO) === null || _a === void 0 ? void 0 : _a.checked)); } }))), this.state === States.create || this.state === States.edit ? (h("sw-input-text", { onUpdateText: (ev) => this.updateText(ev), class: "grow", typography: "detail", value: (_c = this.elementTODO) === null || _c === void 0 ? void 0 : _c.description, status: this.state })) : (h("sw-input-text", { onUpdateText: (ev) => this.updateText(ev), class: "grow", typography: "detail", value: (_d = this.elementTODO) === null || _d === void 0 ? void 0 : _d.description, status: this.internalState })), this.state === States.create || this.state === States.edit ? (h("svg", { onClick: () => { var _a; return this.deleteItemFn((_a = this.elementTODO) === null || _a === void 0 ? void 0 : _a.orderNumber); }, class: "cursor-pointer mx-6", width: "14", height: "18", viewBox: "0 0 14 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M11 6V16H3V6H11ZM9.5 0H4.5L3.5 1H0V3H14V1H10.5L9.5 0ZM13 4H1V16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4Z", fill: "#C81B17" }))) : this.internalState === States.edit ? (h("div", { class: "flex flex-row justify-between" }, h("svg", { class: "mx-6 cursor-pointer", onClick: () => {
        var _a;
        this.goToViewState((_a = this.elementTODO) === null || _a === void 0 ? void 0 : _a.orderNumber);
      }, width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z", fill: "#C81B17" })), h("svg", { class: "cursor-pointer", onClick: () => {
        this.tempTodo.orderNumber = this.elementTODO.orderNumber;
        this.elementTODO = { ...this.tempTodo };
        this.saveItem.emit(this.elementTODO);
      }, width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5.79508 10.875L1.62508 6.70504L0.205078 8.11504L5.79508 13.705L17.7951 1.70504L16.3851 0.295044L5.79508 10.875Z", fill: "#4465A0" })))) : (h("sw-options-menu", { state: this.state, class: "flex-none", onClick: () => this.openOptions(), menuOpened: this.optionsMenuOpen, onChangeStatusEmitter: (ev) => this.changeState(ev) })), h("slot", null))));
  }
  static get is() { return "sw-checklist-item"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["sw-checklist-item.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["sw-checklist-item.css"]
    };
  }
  static get properties() {
    return {
      "elementTODO": {
        "type": "unknown",
        "mutable": true,
        "complexType": {
          "original": "ElementTODO",
          "resolved": "ElementTODO",
          "references": {
            "ElementTODO": {
              "location": "import",
              "path": "src/interfaces"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        }
      },
      "state": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "States",
          "resolved": "States.create | States.edit | States.view",
          "references": {
            "States": {
              "location": "import",
              "path": "src/utils/utils"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "state",
        "reflect": false
      },
      "internalState": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "States",
          "resolved": "States.create | States.edit | States.view",
          "references": {
            "States": {
              "location": "import",
              "path": "src/utils/utils"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "internal-state",
        "reflect": false,
        "defaultValue": "States.view"
      },
      "orderNumber": {
        "type": "number",
        "mutable": true,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "order-number",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "optionsMenuOpen": {},
      "checked": {}
    };
  }
  static get events() {
    return [{
        "method": "deleteItem",
        "name": "deleteItem",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        }
      }, {
        "method": "rapidDeleteItem",
        "name": "rapidDeleteItem",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        }
      }, {
        "method": "saveItem",
        "name": "saveItem",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "ElementTODO",
          "resolved": "ElementTODO",
          "references": {
            "ElementTODO": {
              "location": "import",
              "path": "src/interfaces"
            }
          }
        }
      }, {
        "method": "updateValue",
        "name": "updateValue",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        }
      }, {
        "method": "emitChangeState",
        "name": "emitChangeState",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "States",
          "resolved": "States.create | States.edit | States.view",
          "references": {
            "States": {
              "location": "import",
              "path": "src/utils/utils"
            }
          }
        }
      }];
  }
  static get elementRef() { return "element"; }
}
