text: const inherits = require('util').inherits
  const Component = require('react').Component
  const h = require('react-hyperscript')
  const connect = require('react-redux').connect
  const actions = require('../../ui/app/actions')
  const infuraCurrencies = require('./infura-conversion.json').objects.sort((a, b) => {
        return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
      })
  const validUrl = require('valid-url')
  const exportAsFile = require('./util').exportAsFile
  const Modal = require('../../ui/app/components/modals/index').Modal
  
  module.exports = connect(mapStateToProps)(ConfigScreen)
  
  function mapStateToProps (state) {
    return {
      metamask: state.metamask,
      warning: state.appState.warning,
    }
  }
  
  inherits(ConfigScreen, Component)
  function ConfigScreen () {
    Component.call(this)
  }
  
  ConfigScreen.prototype.render = function () {
    var state = this.props
    var metamaskState = state.metamask
    var warning = state.warning
  
    return (
      h('.flex-column.flex-grow', {
        style: {
          maxHeight: '585px',
          overflowY: 'auto',
        },
      }, [
  
        h(Modal, {}, []),
  
        // subtitle and nav
        h('.section-title.flex-row.flex-center', [
          h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
            onClick: () => {
              state.dispatch(actions.goHome())
            },
          }),
          h('h2.page-subtitle', 'Settings'),
        ]),
  
        h('.error', {
          style: {
            display: warning ? 'block' : 'none',
            padding: '0 20px',
            textAlign: 'center',
          },
        }, warning),
  
        // conf view
        h('.flex-column.flex-justify-center.flex-grow.select-none', [
          h('.flex-space-around', {
            style: {
              padding: '20px',
              overflow: 'auto',
            },
          }, [
  
            currentProviderDisplay(metamaskState),
  
            h('div', { style: {display: 'block'} }, [
              h('input#new_rpc', {
                placeholder: 'New RPC URL',
                style: {
                  width: 'inherit',
                  flex: '1 0 auto',
                  height: '30px',
                  margin: '8px',
                },
                onKeyPress (event) {
                  if (event.key === 'Enter') {
                    var element = event.target
                    var newRpc = element.value
                    var chainid = document.querySelector('input#chainid')
                    var ticker = document.querySelector('input#ticker')
                    var nickname = document.querySelector('input#nickname')
                    rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state)
                  }
                },
              }),
              h('br'),
              h('input#chainid', {
                placeholder: 'ChainId (optional)',
                style: {
                  width: 'inherit',
                  flex: '1 0 auto',
                  height: '30px',
                  margin: '8px',
                },
                onKeyPress (event) {
                  if (event.key === 'Enter') {
                    var element = document.querySelector('input#new_rpc')
                    var newRpc = element.value
                    var chainid = document.querySelector('input#chainid')
                    var ticker = document.querySelector('input#ticker')
                    var nickname = document.querySelector('input#nickname')
                    rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state)
                  }
                },
              }),
              h('br'),
              h('input#ticker', {
                placeholder: 'Symbol (optional)',
                style: {
                  width: 'inherit',
                  flex: '1 0 auto',
                  height: '30px',
                  margin: '8px',
                },
                onKeyPress (event) {
                  if (event.key === 'Enter') {
                    var element = document.querySelector('input#new_rpc')
                    var newRpc = element.value
                    var chainid = document.querySelector('input#chainid')
                    var ticker = document.querySelector('input#ticker')
                    var nickname = document.querySelector('input#nickname')
                    rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state)
                  }
                },
              }),
              h('br'),
              h('input#nickname', {
                placeholder: 'Nickname (optional)',
                style: {
                  width: 'inherit',
                  flex: '1 0 auto',
                  height: '30px',
                  margin: '8px',
                },
                onKeyPress (event) {
                  if (event.key === 'Enter') {
                    var element = document.querySelector('input#new_rpc')
                    var newRpc = element.value
                    var chainid = document.querySelector('input#chainid')
                    var ticker = document.querySelector('input#ticker')
                    var nickname = document.querySelector('input#nickname')
                    rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state)
                  }
                },
              }),
              h('button', {
                style: {
                  alignSelf: 'center',
                },
                onClick (event) {
                  event.preventDefault()
                  var element = document.querySelector('input#new_rpc')
                  var newRpc = element.value
                  var chainid = document.querySelector('input#chainid')
                  var ticker = document.querySelector('input#ticker')
                  var nickname = document.querySelector('input#nickname')
                  rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state)
                },
              }, 'Save'),
            ]),
  
            h('hr.horizontal-line'),
  
            currentConversionInformation(metamaskState, state),
  
            h('hr.horizontal-line'),
  
            h('div', {
              style: {
                marginTop: '20px',
              },
            }, [
              h('p', {
                style: {
                  fontFamily: 'Montserrat Light',
                  fontSize: '13px',
                },
              }, `State logs contain your public account addresses and sent transactions.`),
              h('br'),
              h('button', {
                style: {
                  alignSelf: 'center',
                },
                onClick (event) {
                  window.logStateString((err, result) => {
                    if (err) {
                      state.dispatch(actions.displayWarning('Error in retrieving state logs.'))
                    } else {
                      exportAsFile('MetaMask State Logs.json', result)
                    }
                  })
                },
              }, 'Download State Logs'),
            ]),
  
            h('hr.horizontal-line'),
  
            h('div', {
              style: {
                marginTop: '20px',
              },
            }, [
              h('p', {
                style: {
                  fontFamily: 'Montserrat Light',
                  fontSize: '13px',
                },
              }, 'Clear privacy data so all websites must request access to view account information again.'),
              h('br'),
              h('button', {
                style: {
                  alignSelf: 'center',
                },
                onClick (event) {
                  event.preventDefault()
                  state.dispatch(actions.clearApprovedOrigins())
                },
              }, 'Clear privacy data'),
            ]),
  
            h('hr.horizontal-line'),
  
            h('div', {
              style: {
                marginTop: '20px',
              },
            }, [
              h('p', {
                style: {
                  fontFamily: 'Montserrat Light',
                  fontSize: '13px',
                },
              }, metamaskState.featureFlags.privacyMode ?
                'Websites will be able to view your account information.' :
                'Websites must request access to view your account information.'
              ),
              h('br'),
              h('button', {
                style: {
                  alignSelf: 'center',
                },
                onClick (event) {
                  event.preventDefault()
                  state.dispatch(actions.setFeatureFlag('privacyMode', !metamaskState.featureFlags.privacyMode))
                },
              }, metamaskState.featureFlags.privacyMode ?
                'Disable privacy mode' :
                'Enable privacy mode'
              ),
            ]),
  
            h('hr.horizontal-line'),
  
            h('div', {
              style: {
                marginTop: '20px',
              },
            }, [
              h('button', {
                style: {
                  alignSelf: 'center',
                },
                onClick (event) {
                  event.preventDefault()
                  state.dispatch(actions.revealSeedConfirmation())
                },
              }, 'Reveal Seed Words'),
            ]),
  
            h('hr.horizontal-line'),
  
            h('div', {
              style: {
                marginTop: '20px',
              },
            }, [
  
              h('p', {
                style: {
                  fontFamily: 'Montserrat Light',
                  fontSize: '13px',
                },
              }, [
                'Resetting is for developer use only. ',
                h('a', {
                  href: 'https://metamask.zendesk.com/hc/en-us/articles/360015489231-Resetting-an-Account-Old-UI-',
                  target: '_blank',
                }, 'Read more.'),
              ]),
              h('br'),
  
              h('button', {
                style: {
                  alignSelf: 'center',
                },
                onClick (event) {
                  event.preventDefault()
                  state.dispatch(actions.resetAccount())
                },
              }, 'Reset Account'),
            ]),
  
          ]),
        ]),
      ])
    )
  }
  
  function rpcValidation (newRpc, chainid, ticker = 'ETH', nickname = '', state) {
    if (validUrl.isWebUri(newRpc)) {
      state.dispatch(actions.setRpcTarget(newRpc, chainid, ticker, nickname))
    } else {
      var appendedRpc = `http://${newRpc}`
      if (validUrl.isWebUri(appendedRpc)) {
        state.dispatch(actions.displayWarning('URIs require the appropriate HTTP/HTTPS prefix.'))
      } else {
        state.dispatch(actions.displayWarning('Invalid RPC URI'))
      }
    }
  }
  
  function currentConversionInformation (metamaskState, state) {
    var currentCurrency = metamaskState.currentCurrency
    var conversionDate = metamaskState.conversionDate
    return h('div', [
      h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, 'Current Conversion'),
      h('span', {style: { fontWeight: 'bold', paddingRight: '10px', fontSize: '13px'}}, `Updated ${Date(conversionDate)}`),
      h('select#currentCurrency', {
        onChange (event) {
          event.preventDefault()
          var element = document.getElementById('currentCurrency')
          var newCurrency = element.value
          state.dispatch(actions.setCurrentCurrency(newCurrency))
        },
        defaultValue: currentCurrency,
      }, infuraCurrencies.map((currency) => {
        return h('option', {key: currency.quote.code, value: currency.quote.code}, `${currency.quote.code.toUpperCase()} - ${currency.quote.name}`)
      })
    ),
    ])
  }
  
  function currentProviderDisplay (metamaskState) {
    var provider = metamaskState.provider
    var title, value
  
    switch (provider.type) {
  
      case 'mainnet':
        title = 'Current Network'
        value = 'Main Ethereum Network'
        break
  
      case 'ropsten':
        title = 'Current Network'
        value = 'Ropsten Test Network'
        break
  
      case 'kovan':
        title = 'Current Network'
        value = 'Kovan Test Network'
        break
  
      case 'rinkeby':
        title = 'Current Network'
        value = 'Rinkeby Test Network'
        break
  
      case 'classic':
        title = 'Current Network'
        value = 'Ethereum Classic Network'
        break
  
      case 'callisto':
        title = 'Current Network'
        value = 'Callisto Network'
        break
  
      case 'leep':
      title = 'Current Network'
      value = 'Leep Network'
      break
  
      case 'leeptest':
        title = 'Current Network'
        value = 'Leep Test Network'
        break
  
      default:
        title = 'Current RPC'
        value = metamaskState.provider.rpcTarget
    }
  
    return h('div', [
      h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, title),
      h('span', value),
    ])
  }
  