import { unsafeCSS, LitElement, html, nothing } from "lit";
import { property, state, query } from "lit/decorators.js";
import { customElement } from "../../decorator.js";
import componentStyle from "./keyboard-full.css.js";
import "../icon-button/icon-button.js";
import "../../icons/icon-close-google.js";
import "../../icons/icon-backspace-google.js";
import "../../icons/icon-arrow-right-google.js";
import "../../icons/icon-arrow-left-google.js";
import "../../icons/icon-shift-lock.js";
import { ObcTextInputFieldSize } from "../text-input-field/text-input-field.js";
import "../button/button.js";
import "../check-button/check-button.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
var ObcKeyboardFullType = /* @__PURE__ */ ((ObcKeyboardFullType2) => {
  ObcKeyboardFullType2["Floating"] = "floating";
  ObcKeyboardFullType2["Flat"] = "flat";
  return ObcKeyboardFullType2;
})(ObcKeyboardFullType || {});
var ObcKeyboardFullMode = /* @__PURE__ */ ((ObcKeyboardFullMode2) => {
  ObcKeyboardFullMode2["ABC"] = "abc";
  ObcKeyboardFullMode2["Numbers"] = "123";
  ObcKeyboardFullMode2["Symbols"] = "symbols";
  ObcKeyboardFullMode2["SymbolsWithNumberRow"] = "symbols-with-number-row";
  return ObcKeyboardFullMode2;
})(ObcKeyboardFullMode || {});
let ObcKeyboardFull = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "floating";
    this.showTopBar = false;
    this.parameterName = "Parameter name";
    this.value = "";
    this.placeholder = "Placeholder";
    this.showNumberRow = false;
    this.inputSize = ObcTextInputFieldSize.Large;
    this.mode = "abc";
    this.capsLock = false;
    this.numberRow = [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "0"
    ];
    this.qwertyLayout = [
      ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
      ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
      ["Z", "X", "C", "V", "B", "N", "M", ".", "-"]
    ];
    this.symbolsWithNumberRowLayout = [
      ["$", "[", "]", "{", "}", "#", "^", "*", "="],
      ['"', "+", "(", ")", "/", "\\", "&", "%", "@"],
      ["'", "?", "!", ";", ":", '"', ",", ".", "-"]
    ];
    this.numbersLayout = [
      ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
      ['"', "+", "(", ")", "/", "\\", "&", "%", "@"],
      ["'", "?", "!", ";", ":", '"', ",", ".", "-"]
    ];
    this.symbolsLayout = [
      ["§", "[", "]", "{", "}", "#", "^", "*", "="],
      ["~", "_", "|", "<", ">", "$", "€", "£"],
      ['"', "'", "?", "!", ";", ":", ",", ".", "-"]
    ];
    this.onCloseClick = () => {
      this.dispatchEvent(
        new CustomEvent("close-click", {
          bubbles: true,
          composed: true
        })
      );
    };
    this.preventFocusLoss = (e) => {
      e.preventDefault();
    };
    this.onKeyPress = async (key) => {
      const char = this.capsLock && this.mode === "abc" && !this.showNumberRow ? key.toUpperCase() : key.toLowerCase();
      const inputElement = this.inputField?.shadowRoot?.querySelector(
        "input"
      );
      if (inputElement && inputElement.selectionStart !== null) {
        const cursorPos = inputElement.selectionStart;
        this.value = this.value.slice(0, cursorPos) + char + this.value.slice(cursorPos);
        this.dispatchValueChange();
        await this.updateComplete;
        inputElement.focus();
        inputElement.setSelectionRange(cursorPos + 1, cursorPos + 1);
      } else {
        this.value += char;
        this.dispatchValueChange();
      }
    };
    this.onBackspace = async () => {
      const inputElement = this.inputField?.shadowRoot?.querySelector(
        "input"
      );
      if (inputElement && inputElement.selectionStart !== null && inputElement.selectionStart > 0) {
        const cursorPos = inputElement.selectionStart;
        this.value = this.value.slice(0, cursorPos - 1) + this.value.slice(cursorPos);
        this.dispatchValueChange();
        await this.updateComplete;
        inputElement.focus();
        inputElement.setSelectionRange(cursorPos - 1, cursorPos - 1);
      } else if (this.value.length > 0 && !inputElement) {
        this.value = this.value.slice(0, -1);
        this.dispatchValueChange();
      }
    };
    this.onSpace = async () => {
      const inputElement = this.inputField?.shadowRoot?.querySelector(
        "input"
      );
      if (inputElement && inputElement.selectionStart !== null) {
        const cursorPos = inputElement.selectionStart;
        this.value = this.value.slice(0, cursorPos) + " " + this.value.slice(cursorPos);
        this.dispatchValueChange();
        await this.updateComplete;
        inputElement.focus();
        inputElement.setSelectionRange(cursorPos + 1, cursorPos + 1);
      } else {
        this.value += " ";
        this.dispatchValueChange();
      }
    };
    this.onToggleCaps = () => {
      this.capsLock = !this.capsLock;
    };
    this.onToggleMode = (mode) => {
      this.mode = mode;
    };
    this.onCursorLeft = () => {
      const inputElement = this.inputField?.shadowRoot?.querySelector(
        "input"
      );
      if (inputElement) {
        inputElement.focus();
        if (inputElement.selectionStart !== null) {
          const newPosition = Math.max(0, inputElement.selectionStart - 1);
          inputElement.setSelectionRange(newPosition, newPosition);
        }
      }
    };
    this.onCursorRight = () => {
      const inputElement = this.inputField?.shadowRoot?.querySelector(
        "input"
      );
      if (inputElement) {
        inputElement.focus();
        if (inputElement.selectionStart !== null) {
          const newPosition = Math.min(
            this.value.length,
            inputElement.selectionStart + 1
          );
          inputElement.setSelectionRange(newPosition, newPosition);
        }
      }
    };
    this.onDone = () => {
      this.dispatchEvent(
        new CustomEvent("done-click", {
          detail: { value: this.value },
          bubbles: true,
          composed: true
        })
      );
    };
    this.dispatchValueChange = () => {
      this.dispatchEvent(
        new CustomEvent("value-change", {
          detail: { value: this.value },
          bubbles: true,
          composed: true
        })
      );
    };
    this.onInputFieldValueChanged = (e) => {
      this.value = e.target.value;
      this.dispatchValueChange();
    };
  }
  renderCursorNavigation() {
    return html`
      <div class="navigation-buttons-container">
        <obc-icon-button
          variant="normal"
          cornerLeft
          @mousedown=${this.preventFocusLoss}
          @click=${this.onCursorLeft}
        >
          <obi-arrow-left-google></obi-arrow-left-google>
        </obc-icon-button>
        <obc-icon-button
          variant="normal"
          cornerRight
          @mousedown=${this.preventFocusLoss}
          @click=${this.onCursorRight}
        >
          <obi-arrow-right-google></obi-arrow-right-google>
        </obc-icon-button>
      </div>
    `;
  }
  renderModeButton() {
    if (this.showNumberRow) {
      return this.mode === "abc" ? html`
            <obc-button
              class="action-button mode-button"
              variant="normal"
              @mousedown=${this.preventFocusLoss}
              @click=${() => this.onToggleMode(
        "symbols-with-number-row"
        /* SymbolsWithNumberRow */
      )}
            >
              #+=
            </obc-button>
          ` : html`
            <obc-button
              class="action-button mode-button"
              variant="normal"
              @mousedown=${this.preventFocusLoss}
              @click=${() => this.onToggleMode(
        "abc"
        /* ABC */
      )}
            >
              ABC
            </obc-button>
          `;
    }
    if (this.mode === "abc") {
      return html`
        <obc-button
          class="action-button mode-button"
          variant="normal"
          @mousedown=${this.preventFocusLoss}
          @click=${() => this.onToggleMode(
        "123"
        /* Numbers */
      )}
        >
          123
        </obc-button>
      `;
    }
    if (this.mode === "123") {
      return html`
        <obc-button
          class="action-button mode-button"
          variant="normal"
          @mousedown=${this.preventFocusLoss}
          @click=${() => this.onToggleMode(
        "symbols"
        /* Symbols */
      )}
        >
          #+=
        </obc-button>
      `;
    }
    return html`
      <obc-button
        class="action-button mode-button"
        variant="normal"
        @mousedown=${this.preventFocusLoss}
        @click=${() => this.onToggleMode(
      "abc"
      /* ABC */
    )}
      >
        ABC
      </obc-button>
    `;
  }
  renderKeyboard() {
    if (this.showNumberRow) {
      return this.mode === "symbols-with-number-row" ? this.renderSymbolsWithNumberRowKeyboard() : this.renderABCKeyboard();
    }
    switch (this.mode) {
      case "abc":
        return this.renderABCKeyboard();
      case "123":
        return this.renderNumbersKeyboard();
      case "symbols":
        return this.renderSymbolsKeyboard();
      default:
        return this.renderABCKeyboard();
    }
  }
  renderABCKeyboard() {
    return html`
      <div class="container-left">
        <div class="keys-container">
          ${this.showNumberRow ? html`
                <div class="row row-numbers">
                  ${this.numberRow.map(
      (key) => html`
                      <obc-button
                        class="key-button"
                        variant="raised"
                        @mousedown=${this.preventFocusLoss}
                        @click=${() => this.onKeyPress(key)}
                      >
                        ${key}
                      </obc-button>
                    `
    )}
                </div>
              ` : nothing}
          ${this.qwertyLayout.map(
      (row, index) => html`
              <div class="row row-${index + 1}">
                ${index === 2 && row.length < 10 ? Array(10 - row.length).fill(0).map(
        () => html`<div class="key-button-placeholder"></div>`
      ) : nothing}
                ${row.map(
        (key) => html`
                    <obc-button
                      class="key-button"
                      variant="normal"
                      @mousedown=${this.preventFocusLoss}
                      @click=${() => this.onKeyPress(key)}
                    >
                      ${this.capsLock ? key.toUpperCase() : key.toLowerCase()}
                    </obc-button>
                  `
      )}
              </div>
            `
    )}
        </div>
        <obc-button
          ?fullWidth=${true}
          class="space-button"
          @mousedown=${this.preventFocusLoss}
          @click=${this.onSpace}
        >
          SPACE
        </obc-button>
      </div>
    `;
  }
  renderSymbolsWithNumberRowKeyboard() {
    return html`
      <div class="container-left">
        <div class="keys-container">
          <div class="row row-numbers">
            ${this.numberRow.map(
      (key) => html`
                <obc-button
                  class="key-button"
                  variant="raised"
                  @mousedown=${this.preventFocusLoss}
                  @click=${() => this.onKeyPress(key)}
                >
                  ${key}
                </obc-button>
              `
    )}
          </div>
          ${this.symbolsWithNumberRowLayout.map(
      (row, index) => html`
              <div class="row row-${index + 1}">
                ${row.map(
        (key) => html`
                    <obc-button
                      class="key-button"
                      variant="normal"
                      @mousedown=${this.preventFocusLoss}
                      @click=${() => this.onKeyPress(key)}
                    >
                      ${key}
                    </obc-button>
                  `
      )}
              </div>
            `
    )}
        </div>
        <obc-button
          ?fullWidth=${true}
          class="space-button"
          @mousedown=${this.preventFocusLoss}
          @click=${this.onSpace}
        >
          SPACE
        </obc-button>
      </div>
    `;
  }
  renderNumbersKeyboard() {
    return html`
      <div class="container-left">
        <div class="keys-container">
          ${this.numbersLayout.map(
      (row, index) => html`
              <div class="row row-${index + 1}">
                ${row.map(
        (key) => html`
                    <obc-button
                      class="key-button"
                      variant="normal"
                      @mousedown=${this.preventFocusLoss}
                      @click=${() => this.onKeyPress(key)}
                    >
                      ${key}
                    </obc-button>
                  `
      )}
              </div>
            `
    )}
        </div>
        <obc-button
          ?fullWidth=${true}
          class="space-button"
          @mousedown=${this.preventFocusLoss}
          @click=${this.onSpace}
        >
          SPACE
        </obc-button>
      </div>
    `;
  }
  renderSymbolsKeyboard() {
    return html`
      <div class="container-left">
        <div class="keys-container">
          ${this.symbolsLayout.map(
      (row, index) => html`
              <div class="row row-${index + 1}">
                ${row.map(
        (key) => html`
                    <obc-button
                      class="key-button"
                      variant="normal"
                      @mousedown=${this.preventFocusLoss}
                      @click=${() => this.onKeyPress(key)}
                    >
                      ${key}
                    </obc-button>
                  `
      )}
              </div>
            `
    )}
        </div>
        <obc-button
          ?fullWidth=${true}
          class="space-button"
          @mousedown=${this.preventFocusLoss}
          @click=${this.onSpace}
        >
          SPACE
        </obc-button>
      </div>
    `;
  }
  render() {
    return html`
      <div class="wrapper type-${this.type}">
        ${this.showTopBar ? html`
              <div class="top-bar">
                <div class="parameter-name">${this.parameterName}</div>
                <obc-icon-button variant="flat" @click=${this.onCloseClick}>
                  <obi-close-google></obi-close-google>
                </obc-icon-button>
              </div>
            ` : nothing}

        <div class="container-content">
          <div class="input-container">
            <obc-text-input-field
              class="input-field"
              .value=${this.value}
              .placeholder=${this.placeholder}
              .size=${this.inputSize}
              @input=${this.onInputFieldValueChanged}
            >
            </obc-text-input-field>

            ${!this.showNumberRow ? this.renderCursorNavigation() : nothing}
          </div>

          <div class="container-keyboard">
            ${this.renderKeyboard()}

            <div class="container-right">
              ${this.showNumberRow ? this.renderCursorNavigation() : nothing}

              <obc-button
                class="action-button delete-button"
                @mousedown=${this.preventFocusLoss}
                @click=${this.onBackspace}
                showLeadingIcon
              >
                <obi-backspace-google slot="leading-icon"></obi-backspace-google
                >DEL
              </obc-button>

              <obc-check-button
                class="action-button caps-button"
                type="regular"
                ?checked=${this.capsLock}
                @mousedown=${this.preventFocusLoss}
                @click=${this.onToggleCaps}
                ?showIcon=${true}
              >
                <obi-shift-lock slot="icon"></obi-shift-lock>
                CAPS
              </obc-check-button>

              ${this.renderModeButton()}

              <obc-button
                class="action-button done-button"
                variant="raised"
                @mousedown=${this.preventFocusLoss}
                @click=${this.onDone}
              >
                DONE
              </obc-button>
            </div>
          </div>
        </div>
      </div>
    `;
  }
};
ObcKeyboardFull.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcKeyboardFull.prototype, "type", 2);
__decorateClass([
  property({ type: Boolean })
], ObcKeyboardFull.prototype, "showTopBar", 2);
__decorateClass([
  property({ type: String })
], ObcKeyboardFull.prototype, "parameterName", 2);
__decorateClass([
  property({ type: String })
], ObcKeyboardFull.prototype, "value", 2);
__decorateClass([
  property({ type: String })
], ObcKeyboardFull.prototype, "placeholder", 2);
__decorateClass([
  property({ type: Boolean })
], ObcKeyboardFull.prototype, "showNumberRow", 2);
__decorateClass([
  property({ type: String })
], ObcKeyboardFull.prototype, "inputSize", 2);
__decorateClass([
  state()
], ObcKeyboardFull.prototype, "mode", 2);
__decorateClass([
  state()
], ObcKeyboardFull.prototype, "capsLock", 2);
__decorateClass([
  query("obc-text-input-field")
], ObcKeyboardFull.prototype, "inputField", 2);
ObcKeyboardFull = __decorateClass([
  customElement("obc-keyboard-full")
], ObcKeyboardFull);
export {
  ObcKeyboardFull,
  ObcKeyboardFullMode,
  ObcKeyboardFullType
};
//# sourceMappingURL=keyboard-full.js.map
