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";
const tagName = "sonic-td";
import {typeColor} from "@supersoniks/concorde/core/components/ui/_css/type";

@customElement(tagName)
export class TableTd extends LitElement {
  static styles = [
    typeColor,
    css`
      :host {
        display: contents;
      }
      td {
        all: inherit;
        display: table-cell;
        padding: var(--sc-table-td-py) var(--sc-table-td-px);
        border-top: var(--sc-table-td-border-t, none);
        border-bottom: var(--sc-table-td-border-b, none);
        border-right: var(--sc-table-td-border-r, none);
        border-left: var(--sc-table-td-border-l, none);
      }
    `,
  ];
  @property({type: Number}) colSpan?: number;
  @property({type: Number}) rowSpan?: number;
  @property({type: String}) align?: string;
  @property({type: String}) vAlign?: string;
  @property({type: String}) minWidth?: string;
  @property({type: String}) maxWidth?: string;
  @property({type: String}) width?: string;

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