import '@material/web/textfield/outlined-text-field.js'
import '@material/web/textfield/filled-text-field.js'
import '@material/web/checkbox/checkbox.js'

import { css, html, LitElement } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { i18next, localize } from '@operato/i18n'

@customElement('kpi-view')
export class KpiView extends localize(i18next)(LitElement) {
  static styles = [
    css`
      :host {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-medium);
        padding: var(--spacing-medium);
      }

      .form-group {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-small);
      }

      .form-row {
        display: flex;
        gap: var(--spacing-medium);
        align-items: center;
      }

      .form-row > * {
        flex: 1;
      }

      label {
        font-weight: 500;
        color: var(--md-sys-color-on-surface);
        margin-bottom: var(--spacing-small);
      }

      md-outlined-text-field,
      md-filled-text-field,
      md-outlined-select {
        width: 100%;
      }

      .checkbox-group {
        display: flex;
        align-items: center;
        gap: var(--spacing-small);
      }

      .section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--md-sys-color-primary);
        margin-top: var(--spacing-large);
        margin-bottom: var(--spacing-medium);
        border-bottom: 1px solid var(--md-sys-color-outline-variant);
        padding-bottom: var(--spacing-small);
      }

      textarea {
        background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
        color: var(--input-field-color, var(--md-sys-color-on-surface));
        width: 100%;
        min-height: 100px;
        padding: var(--spacing-small);
        border: 1px solid var(--md-sys-color-outline);
        border-radius: var(--md-sys-shape-corner-small);
        font-family: monospace;
        resize: vertical;
      }
    `
  ]

  @property({ type: Object }) kpi: any = {}

  render() {
    return html`
      <div class="section-title">${i18next.t('label.basic_information')}</div>
      
      <div class="form-group">
        <label>Name *</label>
        <md-outlined-text-field
          .value=${this.kpi?.name || ''}
          @input=${(e: any) => this.updateProperty('name', e.target.value)}
          required
        ></md-outlined-text-field>
      </div>

      <div class="form-group">
        <label>Description</label>
        <md-outlined-text-field
          .value=${this.kpi?.description || ''}
          @input=${(e: any) => this.updateProperty('description', e.target.value)}
          type="textarea"
          rows="3"
        ></md-outlined-text-field>
      </div>

      <div class="form-group">
        <label>Weight</label>
        <md-outlined-text-field
          type="number"
          .value=${this.kpi?.weight?.toString() || '1'}
          @input=${(e: any) => this.updateProperty('weight', parseFloat(e.target.value) || 1)}
          min="0"
          step="0.1"
        ></md-outlined-text-field>
      </div>

      <div class="form-row">
        <div class="checkbox-group">
          <md-checkbox
            ?checked=${this.kpi?.active !== false}
            @change=${(e: any) => this.updateProperty('active', e.target.checked)}
          ></md-checkbox>
          <label>Active</label>
        </div>

        <div class="checkbox-group">
          <md-checkbox
            ?checked=${this.kpi?.isLeaf !== false}
            @change=${(e: any) => this.updateProperty('isLeaf', e.target.checked)}
          ></md-checkbox>
          <label>${i18next.t('label.is_leaf_node')}</label>
        </div>
      </div>

      <div class="section-title">${i18next.t('label.formula_calculation')}</div>

      <div class="form-group">
        <label>${i18next.t('label.kpi_formula')}</label>
        <textarea
          .value=${this.kpi?.formula || ''}
          @input=${(e: any) => this.updateProperty('formula', e.target.value)}
          placeholder="${i18next.t('placeholder.enter_formula')}"
        ></textarea>
      </div>

      <div class="form-group">
        <label>${i18next.t('label.score_formula')}</label>
        <textarea
          .value=${this.kpi?.scoreFormula || ''}
          @input=${(e: any) => this.updateProperty('scoreFormula', e.target.value)}
          placeholder="${i18next.t('placeholder.enter_score_formula')}"
        ></textarea>
      </div>

      <div class="section-title">Schedule</div>

      <div class="form-group">
        <label>Cron Schedule</label>
        <md-outlined-text-field
          .value=${this.kpi?.schedule || ''}
          @input=${(e: any) => this.updateProperty('schedule', e.target.value)}
          placeholder="${i18next.t('placeholder.cron_schedule')}"
        ></md-outlined-text-field>
      </div>

      <div class="form-group">
        <label>Timezone</label>
        <md-outlined-text-field
          .value=${this.kpi?.timezone || ''}
          @input=${(e: any) => this.updateProperty('timezone', e.target.value)}
          placeholder="${i18next.t('placeholder.timezone')}"
        ></md-outlined-text-field>
      </div>
    `
  }

  updateProperty(property: string, value: any) {
    this.kpi = {
      ...this.kpi,
      [property]: value
    }

    this.dispatchEvent(new CustomEvent('property-change', {
      detail: this.kpi,
      bubbles: true,
      composed: true
    }))

    this.requestUpdate()
  }

}