import { format } from "date-fns";
import { css, html, LitElement } from "lit";
import { customElement } from "lit/decorators.js";
import { shared } from "./shared";

@customElement("fd-week-guide")
export class WeekGuide extends LitElement {
  constructor() {
    super();
    setInterval(this.requestUpdate.bind(this), 5 * 60 * 1000);
  }
  static styles = [
    shared,
    css`
      :host,
      :host > div {
        display: inline-block;
      }
      .wday > span {
        display: inline-block;
        background: #282a36;
        padding: 5px;
        border: 3px outset #333;
        text-align: center;
        vertical-align: middle;
        border-radius: 10px;
      }
      .wday > span.today {
        background: #282a36;
        border-color: #ff79c6;
        color: #ff79c6;
        text-shadow: 0 0 8px #ff79c6;
      }
    `,
  ];
  render() {
    const day = format(new Date(), "EEE").toLowerCase();

    return html`
      <div class="wday">
        <span class="wday-sun ${day == "sun" ? "today" : ""}">Sunday</span>
        <span class="wday-mon ${day == "mon" ? "today" : ""}">Monday</span>
        <span class="wday-tue ${day == "tue" ? "today" : ""}">Tuesday</span>
        <span class="wday-wed ${day == "wed" ? "today" : ""}">Wednesday</span>
        <span class="wday-thu ${day == "thu" ? "today" : ""}">Thursday</span>
        <span class="wday-fri ${day == "fri" ? "today" : ""}">Friday</span>
        <span class="wday-sat ${day == "sat" ? "today" : ""}">Saturday</span>
      </div>
    `;
  }
}