import { css, html } from 'lit'
import { property } from 'lit/decorators.js'
import { classMap } from 'lit/directives/class-map.js'
import type { DirectiveClass, DirectiveResult } from 'lit/directive.js'
import { UsBaseElement } from '../../base/UsBaseElement'
import { customElementIfNotExist } from '../../../utils/customElementIfNotExist'
import UsValidMessage_css from './validMessage.pcss'

declare global {
  interface HTMLElementTagNameMap {
    'us-valid-message': UsValidMessage
  }
}

@customElementIfNotExist('us-valid-message')
export class UsValidMessage extends UsBaseElement {
  static styles = [
    UsBaseElement.styles,
    css([UsValidMessage_css] as TemplateStringsArray | any),
  ]

  @property({ type: Boolean, attribute: 'error' }) isError = false
  @property({ type: String, attribute: 'data-testid', reflect: true }) dataTestId = 'message_valid'

  render() {
    return html`
      <span class="${this.getClasses()}">
        <slot></slot>
      </span>
    `
  }

  getClasses(): DirectiveResult<DirectiveClass> {
    return classMap({
      'valid-message': true,
      'message_error': this.isError,
    })
  }
}