import { Component } from 'inferno'
import './Options.css'

interface State {
  countSync: number
}

export class Options extends Component<unknown, State> {
  link = 'https://github.com/guocaoyi/create-chrome-ext'
  state: State

  constructor(props: unknown) {
    super(props)

    this.state = {
      countSync: 0,
    }
  }

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

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

  render() {
    const crx = 'create-chrome-ext'

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

export default Options