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

@Component({
  tag: 'options-root',
  styleUrl: 'options-root.css',
  shadow: false,
})
export class OptionsRoot {
  private link = 'https://github.com/guocaoyi/create-chrome-ext'
  @State() countSync: number = 0

  componentWillLoad() {
    chrome.storage.sync.get(['count'], (result) => {
      this.countSync = result.count || 0
    })

    chrome.runtime.onMessage.addListener((request) => {
      if (request.type === 'COUNT') {
        this.countSync = request.count || 0
      }
    })
  }

  render() {
    return (
      <main>
        <h3>Option Page</h3>
        <h4>Count from Popup: {this.countSync}</h4>
        <a href={this.link} target="_blank">
          generated by create-chrome-ext
        </a>
      </main>
    )
  }
}