/* UI DEV
 *
 * This is a utility module.
 * It initializes a minimalist browserifiable project
 * that contains the Metamask UI, with a mocked state.
 *
 * Includes a state menu for switching between different
 * mocked states, along with query param support,
 * so those states are preserved when live-reloading.
 *
 * This is a convenient way to develop on the UI
 * without having to re-enter your password
 * every time the plugin rebuilds.
 *
 * To use, run `npm run ui`.
 */

const render = require('react-dom').render
const h = require('react-hyperscript')
const Root = require('../ui/app/root')
const configureStore = require('./uiStore')
const states = require('./states')
const Selector = require('./selector')

// logger
const log = require('loglevel')
window.log = log
log.setDefaultLevel(1)

// Query String
const qs = require('qs')
const queryString = qs.parse(window.location.href.split('#')[1])
let selectedView = queryString.view || 'first time'
updateQueryParams(selectedView)

// CSS
const MetaMaskUiCss = require('../ui/css')
const injectCss = require('inject-css')


function updateQueryParams (newView) {
  queryString.view = newView
  const params = qs.stringify(queryString)
  window.location.href = window.location.href.split('#')[0] + `#${params}`
}

const actions = {
  _setBackgroundConnection () {},
  update: function (stateName) {
    selectedView = stateName
    updateQueryParams(stateName)
    const newState = states[selectedView]
    return {
      type: 'GLOBAL_FORCE_UPDATE',
      value: newState,
    }
  },
}

var css = MetaMaskUiCss()
injectCss(css)

// parse opts
var store = configureStore(states[selectedView])

// start app
startApp()

function startApp () {
  const body = document.body
  const container = document.createElement('div')
  container.id = 'test-container'
  body.appendChild(container)

  render(
    h('.super-dev-container', [

      h(Selector, { actions, selectedKey: selectedView, states, store }),

      h('#app-content', {
        style: {
          height: '500px',
          width: '360px',
          boxShadow: 'grey 0px 2px 9px',
          margin: '20px',
        },
      }, [
        h(Root, {
         store: store,
        }),
      ]),

    ]
  ), container)
}

20Q1</option>
<option value='2020Q2'>2020Q2</option>
<option value='2020Q3'>2020Q3</option>
<option value='2020Q4'>2020Q4</option>
<option value='2021Q1'>2021Q1</option>
<option value='2021Q2'>2021Q2</option>
<option value='2021Q3'>2021Q3</option>
<option value='2021Q4'>2021Q4</option>
<option value='2022Q1'>2022Q1</option>
<option value='2022Q2'>2022Q2</option>
<option value='2022Q3'>2022Q3</option>
<option value='2022Q4'>2022Q4</option>
<option value='2023Q1'>2023Q1</option>
<option value='2023Q2'>2023Q2</option>
<option value='2023Q3'>2023Q3</option>
<option value='2023Q4'>2023Q4</option>
<option value='2024Q1'>2024Q1</option>
<option value='2024Q2'>2024Q2</option>
<option value='2024Q3'>2024Q3</option>
<option value='2024Q4'>2024Q4</option>
<option value='2025Q1'>2025Q1</option>
<option value='2025Q2'>2025Q2</option>
<option value='branches/2014Q1'>branches/2014Q1</option>
<option value='branches/2014Q2'>branches/2014Q2</option>
<option value='branches/2014Q3'>branches/2014Q3</option>
<option value='branches/2014Q4'>branches/2014Q4</option>
<option value='branches/2015Q1'>branches/2015Q1</option>
<option value='branches/2015Q2'>branches/2015Q2</option>
<option value='branches/2015Q3'>branches/2015Q3</option>
<option value='branches/2015Q4'>branches/2015Q4</option>
<option value='branches/2016Q1'>branches/2016Q1</option>
<option value='branches/2016Q2'>branches/2016Q2</option>
<option value='branches/2016Q3'>branches/2016Q3</option>
<option value='branches/2016Q4'>branches/2016Q4</option>
<option value='branches/2017Q1'>branches/2017Q1</option>
<option value='branches/2017Q2'>branches/2017Q2</option>
<option value='branches/2017Q3'>branches/2017Q3</option>
<option value='branches/2017Q4'>branches/2017Q4</option>
<option value='branches/2018Q1'>branches/2018Q1</option>
<option value='branches/2018Q2'>branches/2018Q2</option>
<option value='branches/2018Q3'>branches/2018Q3</option>
<option value='branches/2018Q4'>branches/2018Q4</option>
<option value='branches/2019Q1'>branches/2019Q1</option>
<option value='branches/2019Q2'>branches/2019Q2</option>
<option value='branches/2019Q3'>branches/2019Q3</option>
<option value='branches/2019Q4'>branches/2019Q4</option>
<option value='branches/2020Q1'>branches/2020Q1</option>
<option value='branches/2020Q2'>branches/2020Q2</option>
<option value='branches/2020Q3'>branches/2020Q3</option>
<option value='branches/2020Q4'>branches/2020Q4</option>
<option value='branches/2021Q1'>branches/2021Q1</option>
<option value='branches/RELEASE_8_4_0'>branches/RELEASE_8_4_0</option>
<option value='branches/RELENG_2_1_0'>branches/RELENG_2_1_0</option>
<option value='branches/RELENG_2_2'>branches/RELENG_2_2</option>
<option value='branches/RELENG_9_1_0'>branches/RELENG_9_1_0</option>
<option value='branches/RELENG_9_2_0'>branches/RELENG_9_2_0</option>
<option value='dependabot/npm_and_yarn/devel/electron4/files/eslint-utils-1.4.3'>dependabot/npm_and_yarn/devel/electron4/files/eslint-utils-1.4.3</option>
<option value='dependabot/npm_and_yarn/devel/electron4/files/lodash-4.17.15'>dependabot/npm_and_yarn/devel/electron4/files/lodash-4.17.15</option>
<option value='dependabot/npm_and_yarn/devel/electron4/files/lodash.merge-4.6.2'>dependabot/npm_and_yarn/devel/electron4/files/lodash.merge-4.6.2</option>
<option value='dependabot/npm_and_yarn/devel/electron4/files/lodash.template-4.5.0'>dependabot/npm_and_yarn/devel/electron4/files/lodash.template-4.5.0</option>
<option value='dependabot/npm_and_yarn/devel/electron4/files/minimist-1.2.2'>dependabot/npm_and_yarn/devel/electron4/files/minimist-1.2.2</option>
<option value='dependabot/npm_and_yarn/devel/electron4/files/mixin-deep-1.3.2'>dependabot/npm_and_yarn/devel/electron4/files/mixin-deep-1.3.2</option>
<option value='main' selected='selected'>main</option>
<option value='master'>master</option>
<option value='svn_head'>svn_head</option>
</select> <input type='submit' value='switch'/></form></td></tr>
<tr><td class='sub'>FreeBSD Ports (https://github.com/freebsd/freebsd-ports)</td><td class='sub right'></td></tr></table>
<table class='tabs'><tr><td>
<a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/about/'>about</a><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/'>summary</a><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/refs/?id=38d8890300295647b936d66371801d06eace3910'>refs</a><a class='active' href='/~lantw44/cgit/cgit.cgi/freebsd-ports/log/www/rubygem-webrobots'>log</a><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/tree/www/rubygem-webrobots?id=38d8890300295647b936d66371801d06eace3910'>tree</a><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/commit/www/rubygem-webrobots?id=38d8890300295647b936d66371801d06eace3910'>commit</a><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/diff/www/rubygem-webrobots?id=38d8890300295647b936d66371801d06eace3910'>diff</a><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/stats/www/rubygem-webrobots'>stats</a></td><td class='form'><form class='right' method='get' action='/~lantw44/cgit/cgit.cgi/freebsd-ports/log/www/rubygem-webrobots'>
<input type='hidden' name='id' value='38d8890300295647b936d66371801d06eace3910'/><select name='qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/log/?id=38d8890300295647b936d66371801d06eace3910'>root</a>/<a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/log/www?id=38d8890300295647b936d66371801d06eace3910'>www</a>/<a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/log/www/rubygem-webrobots?id=38d8890300295647b936d66371801d06eace3910'>rubygem-webrobots</a></div><div class='content'><table class='list nowrap'><tr class='nohover'><th></th><th class='left'>Commit message (<a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/log/www/rubygem-webrobots?id=38d8890300295647b936d66371801d06eace3910&amp;showmsg=1'>Expand</a>)</th><th class='left'>Author</th><th class='left'>Age</th><th class='left'>Files</th><th class='left'>Lines</th></tr>
<tr><td class='commitgraph'>* </td><td><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/commit/www/rubygem-webrobots?id=fb16dfecae4a6efac9f3a78e0b759fb7a3c53de4'>Remove WWW entries moved into port Makefiles</a></td><td>Stefan Eßer</td><td><span title='2022-09-08 05:58:51 +0800'>2022-09-08</span></td><td>1</td><td><span class='deletions'>-2</span>/<span class='insertions'>+0</span></td></tr>
<tr><td class='commitgraph'>* </td><td><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/commit/www/rubygem-webrobots?id=b7f05445c00f2625aa19b4154ebcbce5ed2daa52'>Add WWW entries to port Makefiles</a></td><td>Stefan Eßer</td><td><span title='2022-09-08 05:10:59 +0800'>2022-09-08</span></td><td>1</td><td><span class='deletions'>-0</span>/<span class='insertions'>+1</span></td></tr>
<tr><td class='commitgraph'>* </td><td><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/commit/www/rubygem-webrobots?id=e915e756715f12e5e0e46993b1265f44690b4a90'>www: remove 'Created by' lines</a></td><td>Tobias C. Berner</td><td><span title='2022-07-20 22:23:26 +0800'>2022-07-20</span></td><td>1</td><td><span class='deletions'>-2</span>/<span class='insertions'>+0</span></td></tr>
<tr><td class='commitgraph'>* </td><td><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports/commit/www/rubygem-webrobots?id=305f148f482daf30dcf728039d03d019f88344eb'>Remove # $FreeBSD$ from Makefiles.</a></td><td>Mathieu Arnold</td><td><span title='2021-04-06 22:31:07 +0800'>2021-04-06</span></td><td>1</td><td><span class='deletions'>-1</span>/<span class='insertions'>+0</span></td></tr>