import { html } from 'lit'
import { property, state } from 'lit/decorators.js'
import { UsBaseElement } from '../../base/UsBaseElement'
import { customElementIfNotExist } from '../../../utils/customElementIfNotExist'

declare global {
  interface HTMLElementTagNameMap {
    'us-form-wrap': UsFormWrap
  }
}

@customElementIfNotExist('us-form-wrap')
export class UsFormWrap extends UsBaseElement {
  @property({ type: String, attribute: 'data-testid', reflect: true }) dataTestId = 'form_wrap_component'

  @state() formValidInputsMap = new Map()

  @state() isValidForm = false
  @state() validCheck!: boolean

  connectedCallback(): void {
    super.connectedCallback()
    this.addEventListener('validHandler', this.inputListener as EventListener)
  }

  disconnectedCallback(): void {
    this.removeEventListener('validHandler', this.inputListener as EventListener)
    super.disconnectedCallback()
  }

  render() {
    return html`
        <slot></slot>
    `
  }

  createRenderRoot() {
    return this
  }

  inputListener(e: CustomEvent) {
    const { id, isValid } = e.detail
    this.formValidInputsMap.set(id, isValid)
    this.isValidForm = !Array.from(this.formValidInputsMap.values()).includes(false)
    const options = {
      detail: {
        isValid: this.isValidForm,
      },
      bubbles: true,
      composed: true,
    }

    if (this.validCheck !== this.isValidForm)
      this.dispatchEvent(new CustomEvent('validHandlerForm', options))

    this.validCheck = this.isValidForm
  }
}