import {
  customElement,
  DeesElement,
  type TemplateResult,
  state,
  html,
  domtools,
  property,
} from '@design.estate/dees-element';

import * as ibantools from 'ibantools';
import { demoFunc } from './dees-input-iban.demo.js';

@customElement('dees-input-iban')
export class DeesInputIban extends DeesElement {
  // STATIC
  public static demo = demoFunc;

  // INSTANCE
  @state()
  enteredString: string = '';

  @state()
  enteredIbanIsValid: boolean = false;

  @property({
    type: Boolean,
  })
  public disabled = false;

  @property({
    type: Boolean,
  })
  public required = false;

  @property({
    type: String,
  })
  public label = '';

  @property({
    type: String,
  })
  public key = '';

  @property({
    type: String,
  })
  public value = '';

  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesInputIban>();

  public render(): TemplateResult {
    return html`
      <style>
        input[type='text'] {
          line-height: 20px;
          padding: 5px;
          width: 250px;
        }
      </style>
      <dees-input-text
        .label=${'IBAN'}
        .value=${this.value}
        @input=${(eventArg: InputEvent) => {
          this.validateIban(eventArg);
        }}
      ></dees-input-text>
    `;
  }

  public async firstUpdated() {
    const deesInputText = this.shadowRoot.querySelector('dees-input-text');
    deesInputText.disabled = this.disabled;
    deesInputText.required = this.required;
    deesInputText.changeSubject.subscribe(valueArg => {
      this.value = valueArg.value;
      this.changeSubject.next(this);
    })
  }

  public async validateIban(eventArg: InputEvent): Promise<void> {
    const inputElement: HTMLInputElement = eventArg.target as HTMLInputElement;
    let enteredString = inputElement?.value;
    enteredString = enteredString || '';
    if (this.enteredString !== enteredString) {
      this.enteredString = ibantools.friendlyFormatIBAN(enteredString) || '';
      if (inputElement) {
        inputElement.value = this.enteredString;
        this.value = this.enteredString;
        this.changeSubject.next(this);
      }
    }
    this.enteredIbanIsValid = ibantools.isValidIBAN(this.enteredString.replace(/ /g, ''));
    const deesInputText = this.shadowRoot.querySelector('dees-input-text');
    deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
  }
}