import { Component, State, h } from '@stencil/core'

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

@Component({
  tag: 'newtab-root',
  styleUrl: 'newtab-root.css',
  shadow: false,
})
export class NewTabRoot {
  private link = 'https://github.com/guocaoyi/create-chrome-ext'
  private intervalId: any

  @State() time = getTime()

  componentDidRender() {
    this.intervalId = setInterval(() => {
      this.time = getTime()
    }, 1000)
  }

  disconnectedCallback() {
    clearInterval(this.intervalId)
  }

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