import { html, LitElement, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";

const tagName = "sonic-th";

@customElement(tagName)
export class TableTh extends LitElement {
  static styles = [
    typeColor,
    css`
      :host {
        display: contents;
        background: var(--sc-table-bg);
        position: sticky;
        top: 0;
        z-index: 20;
      }

      th {
        all: inherit;
        display: table-cell;
        border-bottom: calc(var(--sc-border-width, max(1px, 0.12rem)) * 1.5)
          solid var(--sc-table-border-color);
        text-transform: var(--sc-table-th-tt);
        font-weight: var(--sc-table-th-fw);
        font-size: var(--sc-table-th-fs);
        padding: var(--sc-table-th-py) var(--sc-table-th-px);
      }

      :host([noBorder]) th {
        border-bottom: none;
      }
    `,
  ];

  @property({ type: Number }) colSpan?: number;
  @property({ type: Number }) rowSpan?: number;
  @property({ type: String }) align?: string;
  @property({ type: String }) minWidth?: string;
  @property({ type: String }) maxWidth?: string;
  @property({ type: String }) width?: string;

  render() {
    const styles = {
      textAlign: this.align,
      minWidth: this.minWidth,
      maxWidth: this.maxWidth,
      width: this.width,
    };
    return html`<th
      part="th"
      style=${styleMap(styles)}
      colspan=${ifDefined(this.colSpan)}
      rowspan=${ifDefined(this.rowSpan)}
    >
      <slot></slot>
    </th> `;
  }
}