import { __decorate, __metadata } from "tslib";
import '@operato/i18n/ox-i18n.js';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { ScrollbarStyles } from '@operato/styles';
import { i18next } from '@operato/i18n';
import { getPathInfo } from '@operato/utils';
import { OxPrompt } from '@operato/popup/ox-prompt.js';
let BoardTemplateBuilder = class BoardTemplateBuilder extends LitElement {
    constructor() {
        super(...arguments);
        this.visibility = 'private';
        this.name = '';
        this.description = '';
    }
    render() {
        var _a, _b;
        const name = this.name || ((_a = this.board) === null || _a === void 0 ? void 0 : _a.name) || '';
        const description = this.description || ((_b = this.board) === null || _b === void 0 ? void 0 : _b.description) || '';
        const { domain } = getPathInfo(window.location.pathname);
        return html `
      <div template>
        <h3>
          <ox-title-with-help topic="board-service/board-template" msgid="label.board-template"
            >board template</ox-title-with-help
          >
        </h3>
        <label for="name">${i18next.t('field.name')}</label>
        <input id="name" type="text" .value=${name} @change=${e => (this.name = e.target.value)} />

        <label for="description">${i18next.t('field.description')}</label>
        <textarea
          id="description"
          .value=${this.description}
          @change=${e => (this.description = e.target.value)}
        ></textarea>

        <label>${i18next.t('field.visibility')}</label>
        <select
          @change=${e => (this.visibility = e.target.value)}
          placeholder="choose visibility ..."
          .value=${this.visibility}
        >
          <option value="private">${i18next.t('label.visibility-private')}</option>
          ${domain ? html ` <option value="domain">${i18next.t('label.visibility-domain')}</option> ` : nothing}
          <option value="public">${i18next.t('label.visibility-public')}</option>
        </select>

        <button @click=${this.registerBoardAsTemplate}>${i18next.t('text.register-template')}</button>
      </div>
    `;
    }
    async registerBoardAsTemplate() {
        var _a, _b;
        if (await OxPrompt.open({
            title: i18next.t('text.are_you_sure'),
            text: i18next.t('text.sure_to_x', { x: i18next.t('text.register-template') }),
            confirmButton: { text: i18next.t('button.confirm') },
            cancelButton: { text: i18next.t('button.cancel') }
        })) {
            const { id } = this.board || {};
            this.dispatchEvent(new CustomEvent('register-template', {
                detail: {
                    id,
                    name: this.name || ((_a = this.board) === null || _a === void 0 ? void 0 : _a.name),
                    description: this.description || ((_b = this.board) === null || _b === void 0 ? void 0 : _b.description),
                    visibility: this.visibility
                },
                bubbles: true,
                composed: true
            }));
        }
    }
};
BoardTemplateBuilder.styles = [
    ScrollbarStyles,
    css `
      :host {
        display: flex;
        padding: var(--spacing-large);

        /* for narrow mode */
        flex-direction: column;
      }

      div[template] {
        display: grid;
        position: relative;
      }

      label {
        font: var(--label-font);
        color: var(--label-color, var(--md-sys-color-on-surface));
        text-transform: capitalize;
      }

      input,
      select,
      textarea {
        border: var(--border-dim-color);
        border-radius: var(--border-radius);
        margin: var(--input-margin);
        padding: var(--input-padding);
        font: var(--input-font);
        flex: 1 1 0%;
      }

      textarea {
        min-height: 132px;
        resize: none;
      }

      select:focus,
      input:focus,
      textarea:focus,
      button {
        outline: none;
      }

      button:hover {
        border: var(--button-activ-border);
        box-shadow: var(--button-active-box-shadow);
      }
    `
];
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], BoardTemplateBuilder.prototype, "board", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], BoardTemplateBuilder.prototype, "visibility", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], BoardTemplateBuilder.prototype, "name", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], BoardTemplateBuilder.prototype, "description", void 0);
BoardTemplateBuilder = __decorate([
    customElement('board-template-builder')
], BoardTemplateBuilder);
export { BoardTemplateBuilder };
//# sourceMappingURL=board-template-builder.js.map