// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=1235-8451&m=dev
import { LitElement, css, html, nothing, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";

import DatepickerItemStyle from "@styles/forms/ui/tems-datepicker-item.scss?inline";

export type TemsDatepickerItemProps = {
  label: string | undefined;
  active?: boolean;
  disabled?: boolean;
  selected?: boolean;
  hoverable?: boolean;
};

@customElement("tems-datepicker-item")
export class TemsDatepickerItem extends LitElement {
  static styles = css`
    ${unsafeCSS(DatepickerItemStyle)}
  `;

  @property({ attribute: "label", type: String, reflect: true })
  label: TemsDatepickerItemProps["label"] = undefined;

  @property({ attribute: "active", type: Boolean })
  active: TemsDatepickerItemProps["active"] = false;

  @property({ attribute: "disabled", type: Boolean })
  disabled: TemsDatepickerItemProps["disabled"] = false;

  @property({ attribute: "selected", type: Boolean })
  selected: TemsDatepickerItemProps["selected"] = false;

  @property({ attribute: "hoverable", type: Boolean })
  hoverable: TemsDatepickerItemProps["hoverable"] = true;

  _handleClickEvent(e: Event) {
    e.preventDefault();
    this.dispatchEvent(new CustomEvent("clicked"));
  }

  render() {
    if (!this.label) {
      return nothing;
    }
    return html`<button
      active=${this.active || nothing}
      disabled=${(this.disabled && !this.hoverable) || nothing}
      selected=${this.selected || nothing}
      hoverable=${this.hoverable || nothing}
      disabled-style=${(this.disabled && this.hoverable) || nothing}
      @click=${this._handleClickEvent}
    >
      ${this.label}
    </button>`;
  }
}