import { LitElement, css, html } from 'lit'
import { customElement, state } from 'lit/decorators.js'

@customElement('newtab-root')
export class NewTab extends LitElement {
  @state()
  time = this.getTime()

  private link = 'https://github.com/guocaoyi/create-chrome-ext'

  private getTime(): string {
    const date = new Date()
    const hour = String(date.getHours()).padStart(2, '0')
    const minute = String(date.getMinutes()).padStart(2, '0')
    return `${hour}:${minute}`
  }

  connectedCallback(): void {
    super.connectedCallback()
    let intervalId = setInterval(() => {
      this.time = this.getTime()
    }, 1000)

    this.addEventListener('disconnected', () => {
      clearInterval(intervalId)
    })
  }

  render() {
    return html`
      <section>
        <span></span>
        <h1>${this.time}</h1>
        <a .href=${this.link} target="_blank"> generated by create-chrome-ext </a>
      </section>
    `
  }

  static styles = css`
    section::before {
      content: '';
      position: fixed;
      z-index: -1;
      width: 100vw;
      height: 100vh;
      background-image: url('https://source.unsplash.com/random');
      background-size: cover;
      filter: blur(10px);
    }

    section {
      width: 100vw;
      height: 100vh;

      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    h1 {
      color: #324fff;
      text-transform: uppercase;
      font-size: 6rem;
      margin: 2rem auto;
    }

    a {
      font-size: 0.5rem;
      margin: 0.5rem;
      color: #cccccc;
      text-decoration: none;
    }
  `
}

export default NewTab

declare global {
  interface HTMLElementTagNameMap {
    'newtab-root': NewTab
  }
}