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 { OxPrompt } from '@operato/popup/ox-prompt.js'

@customElement('process-template-builder')
export class ProcessTemplateBuilder extends LitElement {
  static styles = [
    ScrollbarStyles,
    css`
      :host {
        display: flex;
        padding: var(--padding-wide);

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

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

      label {
        font: var(--label-font);
        color: var(--label-color);
        text-transform: capitalize;
      }

      input,
      select,
      textarea {
        border: var(--border-dark-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);
      }
    `
  ]

  @property({ type: Object }) process?: { id: string; name: string; description: string }

  @state() visibility?: string = 'private'
  @state() name?: string = ''
  @state() description?: string = ''

  render() {
    const name = this.name || this.process?.name || ''
    const description = this.description || this.process?.description || ''

    return html`
      <div template>
        <h3>
          <ox-title-with-help topic="process-service/process-template" msgid="label.process-template"
            >process 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=${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>
          ${window.location.pathname.startsWith('/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.registerProcessAsTemplate}>${i18next.t('text.register-template')}</button>
      </div>
    `
  }

  async registerProcessAsTemplate() {
    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.process || {}

      this.dispatchEvent(
        new CustomEvent('register-template', {
          detail: {
            id,
            name: this.name || this.process?.name,
            description: this.description || this.process?.description,
            visibility: this.visibility
          },
          bubbles: true,
          composed: true
        })
      )
    }
  }
}
