const { Component } = require('react')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')

class ConnectScreen extends Component {
    constructor (props, context) {
        super(props)
    }

    renderUnsupportedBrowser () {
        return (
            h('div.new-account-connect-form', {}, [
                h('div.hw-connect', [
                    h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
                    h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForTrezor')),
                ]),
                h(
                    'button.btn-primary.btn--large',
                    {
                      onClick: () => global.platform.openWindow({
                        url: 'https://google.com/chrome',
                      }),
                    },
                    this.context.t('downloadGoogleChrome')
                ),
            ])
        )
    }

    renderConnectScreen () {
        return (
            h('div.new-account-connect-form', {}, [
                h('div.hw-connect', [
                    h('h3.hw-connect__title', {}, this.context.t('trezorHardwareWallet')),
                    h('p.hw-connect__msg', {}, this.context.t('connectToTrezorHelp')),
                    h('p.hw-connect__msg', {}, [
                        this.context.t('connectToTrezorTrouble'),
                        h('a.hw-connect__link', {
                            href: 'https://support.metamask.io/',
                            target: '_blank',
                        }, ` ${this.context.t('learnMore')}`),
                    ]),
                ]),
                h(
                    'button.btn-primary.btn--large',
                    { onClick: this.props.connectToTrezor.bind(this) },
                    this.props.btnText
                ),
                h('div.hw-connect__get-trezor', {}, [
                  h('a', {
                    href: 'https://shop.trezor.io/?a=metamask',
                    target: '_blank',
                  }, this.context.t('getYourTrezor')),
                ]),
            ])
        )
      }

    render () {
        if (this.props.browserSupported) {
            return this.renderConnectScreen()
        }
        return this.renderUnsupportedBrowser()
    }
}

ConnectScreen.propTypes = {
    connectToTrezor: PropTypes.func.isRequired,
    btnText: PropTypes.string.isRequired,
    browserSupported: PropTypes.bool.isRequired,
}

ConnectScreen.contextTypes = {
    t: PropTypes.func,
}

module.exports = ConnectScreen