const Component = require('react').Component
const { Switch, Route, matchPath } = require('react-router-dom')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const actions = require('../../../actions')
const { getCurrentViewContext } = require('../../../selectors')
const classnames = require('classnames')
const NewAccountCreateForm = require('./new-account')
const NewAccountImportForm = require('./import-account')
const { NEW_ACCOUNT_ROUTE, IMPORT_ACCOUNT_ROUTE } = require('../../../routes')

class CreateAccountPage extends Component {
  renderTabs () {
    const { history, location } = this.props

    return h('div.new-account__tabs', [
      h('div.new-account__tabs__tab', {
        className: classnames('new-account__tabs__tab', {
          'new-account__tabs__selected': matchPath(location.pathname, {
            path: NEW_ACCOUNT_ROUTE, exact: true,
          }),
        }),
        onClick: () => history.push(NEW_ACCOUNT_ROUTE),
      }, 'Create'),

      h('div.new-account__tabs__tab', {
        className: classnames('new-account__tabs__tab', {
          'new-account__tabs__selected': matchPath(location.pathname, {
            path: IMPORT_ACCOUNT_ROUTE, exact: true,
          }),
        }),
        onClick: () => history.push(IMPORT_ACCOUNT_ROUTE),
      }, 'Import'),
    ])
  }

  render () {
    return h('div.new-account', {}, [
      h('div.new-account__header', [
        h('div.new-account__title', 'New Account'),
        this.renderTabs(),
      ]),
      h('div.new-account__form', [
        h(Switch, [
          h(Route, {
            exact: true,
            path: NEW_ACCOUNT_ROUTE,
            component: NewAccountCreateForm,
          }),
          h(Route, {
            exact: true,
            path: IMPORT_ACCOUNT_ROUTE,
            component: NewAccountImportForm,
          }),
        ]),
      ]),
    ])
  }
}

CreateAccountPage.propTypes = {
  location: PropTypes.object,
  history: PropTypes.object,
}

const mapStateToProps = state => ({
  displayedForm: getCurrentViewContext(state),
})

const mapDispatchToProps = dispatch => ({
  displayForm: form => dispatch(actions.setNewAccountForm(form)),
  showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
  showExportPrivateKeyModal: () => {
    dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
  },
  hideModal: () => dispatch(actions.hideModal()),
  setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(address, label)),
})

module.exports = connect(mapStateToProps, mapDispatchToProps)(CreateAccountPage)