import { unsafeCSS, LitElement, nothing } from "lit";
import { property } from "lit/decorators.js";
import { customElement } from "../../decorator.js";
import "../icon-button/icon-button.js";
import compentStyle from "./clock.css.js";
import { literal, html } from "lit/static-html.js";
import { classMap } from "lit/directives/class-map.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let ObcClock = class extends LitElement {
  constructor() {
    super(...arguments);
    this.showSeconds = false;
    this.showDate = false;
    this.showTimezone = false;
    this.timeZoneOffsetHours = 0;
    this.isClickable = true;
    this.showYear = false;
    this.showWeekday = false;
    this.locale = "en-GB";
    this.hour12 = false;
    this.selected = false;
    this.double = false;
    this.activated = false;
    this.integrationBarMode = false;
    this.blinkOnlyBreakpointPx = 0;
  }
  get timezoneString() {
    if (this.timeZoneOffsetHours === 0) {
      return "UTC";
    }
    return this.timeZoneOffsetHours > 0 ? `UTC+${this.timeZoneOffsetHours}` : `UTC-${-this.timeZoneOffsetHours}`;
  }
  _dateString(date) {
    const options = {
      month: "short",
      day: "numeric",
      weekday: this.showWeekday ? "short" : void 0,
      year: this.showYear ? "numeric" : void 0,
      timeZone: "UTC"
    };
    return date.toLocaleDateString(this.locale, options).replace(/,/g, "").replace(/\./g, "");
  }
  _ampm(hours) {
    if (this.hour12) {
      return hours < 12 ? " AM" : " PM";
    }
    return "";
  }
  render() {
    const date = new Date(this.date);
    date.setUTCHours(date.getUTCHours() + this.timeZoneOffsetHours);
    const hours = date.getUTCHours();
    const minutes = date.getUTCMinutes();
    const hour12 = this.hour12 ? hours % 12 : hours;
    const hoursString = hour12 < 10 ? `0${hour12}` : `${hour12}`;
    const minutesString = minutes < 10 ? `0${minutes}` : `${minutes}`;
    const seconds = date.getUTCSeconds();
    const secondsString = seconds < 10 ? `0${seconds}` : `${seconds}`;
    const ampm = this._ampm(hours);
    const dateString = this._dateString(date);
    const wrapperTag = !this.isClickable ? literal`div` : literal`button`;
    const ticks = html`<div class="ticks ${this.showSeconds ? "" : "animate"}">
      <span class="tick"></span><span class="tick"></span>
    </div>`;
    const query = `@media (max-width: ${this.blinkOnlyBreakpointPx}px )`;
    const firstRow = html`<div class="clock">
        ${hoursString}${ticks}${minutesString}${this.showSeconds ? html`${ticks}${secondsString}` : ""}${ampm}
      </div>

      ${this.showTimezone ? html`<div class="timezone">${this.timezoneString}</div>` : null}`;
    return html`
      <style>
        ${query} {
          .wrapper {
            display: none !important;
          }
          .blink-wrapper {
            display: flex !important;
          }
        }
      </style>
      <${wrapperTag} 
        class=${classMap({
      wrapper: true,
      "no-click": !this.isClickable,
      selected: this.selected,
      double: this.double,
      "integration-bar-mode": this.integrationBarMode,
      activated: this.activated
    })}>
        <div class="visible-wrapper">
          ${this.double ? html`<div class="row">${firstRow}</div>` : firstRow}
        ${this.showDate ? html` <div class="divider"></div>
                <div class="date">${dateString}</div>` : nothing}
        ${this.double ? html`</div>` : nothing}
        </div>
      </${wrapperTag}>
      <div class=${classMap({
      "blink-wrapper": true,
      clock: true,
      blink: true,
      "integration-bar-mode": this.integrationBarMode
    })}>
        <div class="ticks animate"><div class="tick"></div><div class="tick"></div></div>
      </div>
    `;
  }
};
ObcClock.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcClock.prototype, "date", 2);
__decorateClass([
  property({ type: Boolean })
], ObcClock.prototype, "showSeconds", 2);
__decorateClass([
  property({ type: Boolean })
], ObcClock.prototype, "showDate", 2);
__decorateClass([
  property({ type: Boolean })
], ObcClock.prototype, "showTimezone", 2);
__decorateClass([
  property({ type: Number })
], ObcClock.prototype, "timeZoneOffsetHours", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcClock.prototype, "isClickable", 2);
__decorateClass([
  property({ type: Boolean })
], ObcClock.prototype, "showYear", 2);
__decorateClass([
  property({ type: Boolean })
], ObcClock.prototype, "showWeekday", 2);
__decorateClass([
  property({ type: String })
], ObcClock.prototype, "locale", 2);
__decorateClass([
  property({ type: Boolean })
], ObcClock.prototype, "hour12", 2);
__decorateClass([
  property({ type: Boolean })
], ObcClock.prototype, "selected", 2);
__decorateClass([
  property({ type: Boolean })
], ObcClock.prototype, "double", 2);
__decorateClass([
  property({ type: Boolean })
], ObcClock.prototype, "activated", 2);
__decorateClass([
  property({ type: Boolean })
], ObcClock.prototype, "integrationBarMode", 2);
__decorateClass([
  property({ type: Number })
], ObcClock.prototype, "blinkOnlyBreakpointPx", 2);
ObcClock = __decorateClass([
  customElement("obc-clock")
], ObcClock);
export {
  ObcClock
};
//# sourceMappingURL=clock.js.map
