'use client';
import { __decorate } from 'tslib';
import { nothing } from 'lit';
import { query, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js';
import { html } from 'lit/static-html.js';
import FormControlElement from '../../base/form-control-element.js';
import { defaultValue } from '../../utils/defaultvalue.js';
import { SgdsFormValidatorMixin } from '../../utils/validatorMixin.js';
import { watch } from '../../utils/watch.js';
import css_248z$1 from './textarea.js';
import css_248z from '../../styles/form-text-control.js';

/**
 * @summary Text areas allow for the collection of input longer than a single line.
 *
 * @slot invalidIcon - The slot for invalid icon
 *
 * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.
 * @event sgds-input - Emitted when the control receives input and its value changes.
 * @event sgds-focus - Emitted when textarea is in focus.
 * @event sgds-blur - Emitted when textarea loses focus.
 */
class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) {
    constructor() {
        super(...arguments);
        /**The textarea's value attribute. */
        this.value = "";
        /**Enables spell checking on the textarea */
        this.spellcheck = false;
        /** The number of rows to display by default. */
        this.rows = 4;
        /**The textarea's placeholder text. */
        this.placeholder = "Placeholder";
        /** Custom feedback text for error state when validated */
        this.invalidFeedback = "";
        /**Autofocus the textarea */
        this.autofocus = false;
        /** Makes the textarea readonly. */
        this.readonly = false;
        /** Controls how the textarea can be resized. */
        this.resize = "vertical";
        /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
        this.defaultValue = "";
        /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
        this.hasFeedback = false;
        /** Makes the textarea as a required field. */
        this.required = false;
        /** The textarea's hint text */
        this.hintText = "";
        this._isTouched = false;
    }
    /** Sets focus on the textarea. */
    focus(options) {
        this.textarea.focus(options);
    }
    /** Sets blur on the textarea. */
    blur() {
        this.textarea.blur();
    }
    /**
     * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
     * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
     */
    reportValidity() {
        return this._mixinReportValidity();
    }
    /**
     * Checks for validity without any native error popup message
     */
    checkValidity() {
        return this._mixinCheckValidity();
    }
    /**
     * Returns the ValidityState object
     */
    get validity() {
        return this._mixinGetValidity();
    }
    /**
     * Returns the validation message based on the ValidityState
     */
    get validationMessage() {
        return this._mixinGetValidationMessage();
    }
    /** Selects all the text in the textarea. */
    select() {
        this.textarea.select();
    }
    _handleInvalid(e) {
        e.preventDefault();
        this.invalid = true;
    }
    _handleChange(e) {
        this.value = this.input.value;
        this.emit("sgds-change");
        super._mixinHandleChange(e);
    }
    _handleInputChange(e) {
        this.value = this.input.value;
        this.emit("sgds-input");
        super._mixinHandleInputChange(e);
    }
    _handleFocus() {
        this.emit("sgds-focus");
    }
    _handleBlur() {
        this._isTouched = true;
        this.emit("sgds-blur");
    }
    /** @internal */
    _handleRowsChange() {
        this._setTextareaHeight();
    }
    _setTextareaHeight() {
        if (this.resize === "auto") {
            this.textarea.style.height = "auto";
            this.textarea.style.height = `${this.textarea.scrollHeight}px`;
        }
        else {
            this.textarea.style.height = undefined;
        }
    }
    /** @internal */
    _handleIsTouched() {
        if (this._isTouched) {
            this.invalid = !this.textarea.checkValidity();
        }
    }
    /** @internal */
    _handleDisabledChange() {
        // Disabled form controls are always valid, so we need to recheck validity when the state changes
        this.setInvalid(false);
    }
    /** @internal */
    _handleValueChange() {
        this.updateComplete.then(() => this._setTextareaHeight());
    }
    _renderHintText() {
        const hintTextTemplate = html ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
        return this.hintText && hintTextTemplate;
    }
    _wordCount() {
        return html `
      <div
        class="form-text word-count ${classMap({
            "invalid-feedback": this.invalid && this.hasFeedback
        })}"
      >
        ${this.value.length}/${this.maxlength}
      </div>
    `;
    }
    render() {
        return html `
      <div
        class="form-control-container ${classMap({
            disabled: this.disabled
        })}"
      >
        <label for=${this._controlId} class="form-label">${this.label}</label>
        <textarea
          class=${classMap({
            "form-control-group": true,
            // "form-control": true,
            "is-invalid": this.hasFeedback && this.invalid,
            "textarea-resize-none": this.resize === "none",
            "textarea-resize-vertical": this.resize === "vertical",
            "textarea-resize-auto": this.resize === "auto",
            readonly: this.readonly,
            disabled: this.disabled
        })}
          id=${this._controlId}
          name=${ifDefined(this.name)}
          rows=${ifDefined(this.rows)}
          placeholder=${ifDefined(this.placeholder)}
          minlength=${ifDefined(this.minlength)}
          maxlength=${ifDefined(this.maxlength)}
          .value=${live(this.value)}
          aria-invalid=${this.invalid ? "true" : "false"}
          spellcheck=${ifDefined(this.spellcheck)}
          ?disabled=${this.disabled}
          ?readonly=${this.readonly}
          ?required=${this.required}
          ?autofocus=${this.autofocus}
          autocorrect=${ifDefined(this.autocorrect)}
          inputmode=${ifDefined(this.inputmode)}
          @input=${(e) => this._handleInputChange(e)}
          @change=${(e) => this._handleChange(e)}
          @invalid=${(e) => this._handleInvalid(e)}
          @focus=${this._handleFocus}
          @blur=${this._handleBlur}
        ></textarea>
        <div class="textarea-info-container">
          ${this.invalid && this.hasFeedback
            ? html `
                <div class="invalid-feedback-container">
                  <sgds-icon name="exclamation-circle-fill" size="md"></sgds-icon>
                  <div id="${this._controlId}-invalid" class="invalid-feedback">
                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
                  </div>
                </div>
              `
            : html `${this._renderHintText()}`}
          ${this.maxlength > 0 ? this._wordCount() : nothing}
        </div>
      </div>
    `;
    }
}
SgdsTextarea.styles = [...FormControlElement.styles, css_248z, css_248z$1];
__decorate([
    query("textarea.form-control-group")
], SgdsTextarea.prototype, "textarea", void 0);
__decorate([
    property({ type: String, reflect: true })
], SgdsTextarea.prototype, "name", void 0);
__decorate([
    property({ type: String, reflect: true })
], SgdsTextarea.prototype, "value", void 0);
__decorate([
    property({ type: Number, reflect: true })
], SgdsTextarea.prototype, "minlength", void 0);
__decorate([
    property({ type: Number, reflect: true })
], SgdsTextarea.prototype, "maxlength", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsTextarea.prototype, "spellcheck", void 0);
__decorate([
    property({ type: Number })
], SgdsTextarea.prototype, "rows", void 0);
__decorate([
    property({ type: String, reflect: true })
], SgdsTextarea.prototype, "placeholder", void 0);
__decorate([
    property({ type: String, reflect: true })
], SgdsTextarea.prototype, "invalidFeedback", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsTextarea.prototype, "autofocus", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsTextarea.prototype, "readonly", void 0);
__decorate([
    property({ type: String, reflect: true })
], SgdsTextarea.prototype, "resize", void 0);
__decorate([
    property({ type: String, reflect: true })
], SgdsTextarea.prototype, "inputmode", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsTextarea.prototype, "autocorrect", void 0);
__decorate([
    defaultValue()
], SgdsTextarea.prototype, "defaultValue", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsTextarea.prototype, "hasFeedback", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsTextarea.prototype, "required", void 0);
__decorate([
    property({ reflect: true })
], SgdsTextarea.prototype, "hintText", void 0);
__decorate([
    state()
], SgdsTextarea.prototype, "_isTouched", void 0);
__decorate([
    watch("rows", { waitUntilFirstUpdate: true })
], SgdsTextarea.prototype, "_handleRowsChange", null);
__decorate([
    watch("_isTouched", { waitUntilFirstUpdate: true })
], SgdsTextarea.prototype, "_handleIsTouched", null);
__decorate([
    watch("disabled", { waitUntilFirstUpdate: true })
], SgdsTextarea.prototype, "_handleDisabledChange", null);
__decorate([
    watch("value", { waitUntilFirstUpdate: true })
], SgdsTextarea.prototype, "_handleValueChange", null);

export { SgdsTextarea, SgdsTextarea as default };
//# sourceMappingURL=sgds-textarea.js.map
