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 type { ITableCellProps } from './model/ITableCellProps'
import UsTableCell_css from './styles.pcss'
import UsTableCell_vars from './vars.pcss'

declare global {
  interface HTMLElementTagNameMap {
    'us-table-cell': UsTableCell
  }
}

@customElementIfNotExist('us-table-cell')
export class UsTableCell extends UsBaseElement implements ITableCellProps {
  static styles = [
    UsBaseElement.styles,
    css([UsTableCell_css] as TemplateStringsArray | any),
    css([UsTableCell_vars] as TemplateStringsArray | any),
  ]

  @property({ type: Boolean }) header = false
  @property({ type: Boolean }) hover = false

  render() {
    return html`
      <div class=${this.getCellClasses()}>
        <slot></slot>
      </div>
    `
  }

  getCellClasses(): DirectiveResult<DirectiveClass> {
    return classMap({
      'table-cell': true,
      'table-cell__hover': this.hover,
      'table-cell_header': this.header,
    })
  }
}