var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { UmbTextStyles } from '../../core/style/index.js';
import { css, html, nothing, customElement, property, state, ifDefined } from '../../../external/lit/index.js';
import { HealthCheckService } from '../../core/backend-api/index.js';
import { UmbLitElement } from '../../core/lit-element/index.js';
import { tryExecute } from '../../core/resources/index.js';
let UmbDashboardHealthCheckActionElement = class UmbDashboardHealthCheckActionElement extends UmbLitElement {
    async _onActionClick(e) {
        e.preventDefault();
        this._buttonState = 'waiting';
        const { error } = await tryExecute(this, HealthCheckService.postHealthCheckExecuteAction({ body: this.action }));
        if (error) {
            this._buttonState = 'failed';
            return;
        }
        this._buttonState = 'success';
        this.dispatchEvent(new CustomEvent('action-executed'));
    }
    render() {
        return html ` <div class="action uui-text">
			<p>${this.action.description || html `<span class="no-description">This action has no description</span>`}</p>
			<uui-form>
				<form @submit=${(e) => this._onActionClick(e)}>
					${this._renderValueRequired()}
					<uui-button
						type="submit"
						look="primary"
						color="positive"
						label="${this.action.name || 'Action'}"
						.state=${this._buttonState}>
						${this.action.name || 'Action'}
					</uui-button>
				</form>
			</uui-form>
		</div>`;
    }
    _renderValueRequired() {
        if (this.action.valueRequired) {
            switch (this.action.providedValueValidation) {
                case 'email':
                    return html ` <div class="required-value">
						<uui-label for="action">Set new value:</uui-label>
						<uui-input
							id="action"
							type="email"
							@input=${(e) => (this.action.providedValue = e.target.value)}
							placeholder="Value"
							.value=${this.action.providedValue ?? ''}
							required></uui-input>
					</div>`;
                case 'regex':
                    return html `<div class="required-value">
						<uui-label for="action">Set new value:</uui-label>
						<uui-input
							id="action"
							type="text"
							pattern="${ifDefined(this.action.providedValueValidationRegex ?? undefined)}"
							@input=${(e) => (this.action.providedValue = e.target.value)}
							placeholder="Value"
							.value=${this.action.providedValue ?? ''}
							required></uui-input>
					</div>`;
                default:
                    return html `<div class="required-value">
						<uui-label for="action">Set new value:</uui-label>
						<uui-input
							id="action"
							type="text"
							@input=${(e) => (this.action.providedValue = e.target.value)}
							placeholder="Value"
							.value=${this.action.providedValue ?? ''}
							required></uui-input>
					</div>`;
            }
        }
        return nothing;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				margin: var(--uui-size-space-4) 0;
				display: block;
				border-radius: var(--uui-border-radius);
				background-color: var(--uui-color-surface-alt);
			}
			form {
				margin: 0;
				padding: 0;
			}

			p {
				padding-top: 0;
				margin-top: 0;
			}

			.action {
				padding: var(--uui-size-space-5) var(--uui-size-space-6);
				width: 100%;
			}

			.action uui-label {
				display: block;
			}

			.action uui-button {
				flex-shrink: 1;
			}

			.no-description {
				color: var(--uui-color-border-emphasis);
				font-style: italic;
			}

			.required-value {
				margin: 0 0 var(--uui-size-space-4);
			}
		`,
    ]; }
};
__decorate([
    property({ reflect: true })
], UmbDashboardHealthCheckActionElement.prototype, "action", void 0);
__decorate([
    state()
], UmbDashboardHealthCheckActionElement.prototype, "_buttonState", void 0);
UmbDashboardHealthCheckActionElement = __decorate([
    customElement('umb-dashboard-health-check-action')
], UmbDashboardHealthCheckActionElement);
export { UmbDashboardHealthCheckActionElement };
export default UmbDashboardHealthCheckActionElement;
