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

import "@supersoniks/concorde/core/components/ui/table/table-tr";
import "@supersoniks/concorde/core/components/ui/table/table-th";
import "@supersoniks/concorde/core/components/ui/table/table-td";
import "@supersoniks/concorde/core/components/ui/table/table-thead";
import "@supersoniks/concorde/core/components/ui/table/table-tbody";
import "@supersoniks/concorde/core/components/ui/table/table-tfoot";
import "@supersoniks/concorde/core/components/ui/table/table-caption";
import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";

const tagName = "sonic-table";
@customElement(tagName)
export class Table extends LitElement {
  static styles = [
    customScroll,
    fontSize,
    css`
      :host {
        --sc-table-fw: var(--sc-font-weight-base, 400);
        --sc-table-fst: var(--sc-font-style-base, normal);
        --sc-table-fs: 1rem;
        --sc-table-border-color: var(--sc-border-color);
        --sc-table-caption-color: var(
          --sc-base-500,
          var(--sc-base-content, #000)
        );
        --sc-table-bg: var(--sc-base, #fff);
        --sc-table-accent-bg: var(--sc-base-50, rgba(0, 0, 0, 0.04));
        --sc-table-hover-bg: var(--sc-base-100, rgba(0, 0, 0, 0.07));
        --sc-table-th-fs: 0.85em;
        --sc-table-th-fw: bold;
        --sc-table-th-tt: uppercase;
        --sc-table-th-px: var(--sc-table-td-px);
        --sc-table-th-py: calc(1.8 * var(--sc-table-td-py));
        --sc-table-td-px: 0.5em;
        --sc-table-td-py: 0.5em;
        --sc-table-bw: var(--sc-border-width, max(1px, 0.12rem));
        display: block;
      }

      .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      :host([noCustomScroll]) .table-container {
        overflow: initial;
      }

      .table {
        width: 100%;
        display: table;
        box-sizing: border-box;
      }

      :host([bordered]) .table-container {
        border: var(--sc-table-bw) solid var(--sc-table-border-color);
        border-radius: var(--sc-rounded);
        --sc-table-td-border-b: var(--sc-table-bw) solid
          var(--sc-table-border-color);
      }
    `,
  ];

  @property({ type: String, reflect: true }) size?:
    | "2xs"
    | "xs"
    | "sm"
    | "md"
    | "lg"
    | "xl"
    | "2xl";
  @property({ type: Boolean, reflect: true }) bordered?: boolean;
  @property({ type: Boolean, reflect: true }) rounded?: boolean;
  @property({ type: Boolean, reflect: true }) noCustomScroll?: boolean;
  @property({ type: String }) maxHeight?: string;

  render() {
    const containerStyles = {
      maxHeight: this.maxHeight,
    };
    return html`
      <div
        class="table-container ${!this.noCustomScroll ? "custom-scroll" : ""}"
        style=${styleMap(containerStyles)}
      >
        <div class="table">
          <slot></slot>
        </div>
      </div>
    `;
  }
}