import {html, LitElement, css, PropertyValues} from "lit";
import {customElement, property} from "lit/decorators.js";
import {typeColor} from "@supersoniks/concorde/core/components/ui/_css/type";
import {ListItemMetadata} from "@supersoniks/concorde/core/components/functional/list/list";
import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";

const tagName = "sonic-tr";

@customElement(tagName)
export class TableTr extends Subscriber(LitElement) {
  static styles = [
    typeColor,
    css`
      :host {
        display: table-row;
      }

      :host([odd]) {
        background: var(--sc-table-accent-bg) !important;
      }
      :host([even]) {
        background: var(--sc-table-bg) !important;
      }

      :host([last]) {
        --sc-table-td-border-b: none;
      }
      :host(:hover) {
        background: var(--sc-table-hover-bg) !important;
      }
    `,
  ];
  @property({type: Object}) _metadata_: ListItemMetadata = {};
  @property({type: Boolean, reflect: true}) even?: boolean;
  @property({type: Boolean, reflect: true}) odd?: boolean;
  @property({type: Boolean, reflect: true}) last?: boolean;
  willUpdate(changedProperties: PropertyValues) {
    if (changedProperties.has("_metadata_")) {
      this.even = !!this._metadata_.even;
      this.odd = !!this._metadata_.odd;
      this.last = !!this._metadata_.lastChild;
    }
    super.willUpdate(changedProperties);
  }
  render() {
    return html`<slot></slot>`;
  }
}