/*
    This is the Lit.dev code for generating the timepiece.
    Copyright (C) 2024  William Moore.

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { format } from 'date-fns-tz';

@customElement('wmoore-timepiece')
export class Timepiece extends LitElement {
  time = '';

  constructor() {
    super();
    this.reloadTime();
  }


  async reloadTime() {
    const date = new Date();
    const hours = date.getUTCHours();
    const minutes = date.getUTCMinutes();
    const seconds = date.getUTCSeconds();

    let beats = (hours * 3600 + 60 * minutes + seconds) / 86.4;

    beats = Math.round(beats * 100) / 100;

    this.setData(`${format(date, 'yyyy-MM-dd', {timeZone: 'UTC'})}@${beats.toFixed(2)}`);

    setTimeout(() => this.reloadTime(), 100);
  }

  setData(time: string) {
    this.time = time;
    this.requestUpdate();
  }

  static override styles = [
    css`
      .gauge-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-content: space-between;
        text-align: center;
      }

      .gauge-label {
        font-weight: bold;
      }
    `
  ]
  override render() {
    return html`
      <div class="gauge-body">
        <div>⧖${this.time}</div>
      </div>
`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'wmoore-timepiece': Timepiece;
  }
}