import type { TemplateResult } from 'lit'
import { css, html } from 'lit'
import { property } from 'lit/decorators.js'
import { classMap } from 'lit/directives/class-map.js'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { UsBaseElement } from '../base/UsBaseElement'
import type { IStep } from './models/IStep'
import styles_css from './styles.pcss'

declare global {
  interface HTMLElementTagNameMap {
    'us-steps': UsSteps
  }
}

@customElementIfNotExist('us-steps')
export class UsSteps extends UsBaseElement {
  static styles = [
    UsBaseElement.styles,
    css([styles_css] as TemplateStringsArray | any),
  ]

  @property({ type: Array }) steps: IStep[] = []
  @property({ type: String }) widgetView = ''

  render(): TemplateResult {
    return html`
      <ul class="steps">
        ${this.steps.map((step, index) => html`
          <li class=${this.getStepClasses()}>
            <p class="step__number">${index + 1}</p>
            <div class="step__content">
              <p class="step__title">${step.title}</p>
              <p class="step__text">${step.text}</p>
            </div>
          </li>
        `)}
      </ul>
  `
  }

  private getStepClasses() {
    const size = this.widgetView.includes('vertical') ? 'big' : 'small'
    return classMap({
      step: true,
      [`pd-bottom-${size}`]: true,
    })
  }
}