import * as React from 'react'
import { render } from 'react-dom'
import { Provider, connect } from 'react-redux'
import { Store } from 'react-chrome-redux'
import { accessToken } from './modules/auth/selectors'
import * as PopupActions from './modules/popup/actions'
import PopUp from './popup/popup'
import Login from './popup/Login'

import Raven from './utils/sentry'

import '../css/popup.styl'

window.onerror = (messageOrEvent, source, lineno, colno, error) => {
  Raven.captureException(error)
}

(window as any).onunhandledrejection = (error: PromiseRejectionEvent) => {
  console.log('error', error.reason)
  Raven.captureException(error.reason)
}

const store = new Store({
  portName: 'DRIFT', // communication port name
})

interface PopupProps {
  accessToken: string
}

(window as any).store = store

const Popup = ({ accessToken }: PopupProps): JSX.Element => {
  return (
    accessToken
      ? <PopUp />
      : <Login />
  )
}
const mapStateToProps = (state: any) => {
  return {
    accessToken: accessToken(state),
  }
}

const ConnectedPopup = connect(mapStateToProps)(Popup)

store.ready().then(() => {
  store.dispatch(PopupActions.popupOpen())

  render((
    <Provider store={store}>
      <ConnectedPopup />
    </Provider>
  ), window.document.getElementById('app-container'))
})