// @flow
import React from 'react'
import {View} from 'react-native'
import {Cell, Section} from 'react-native-tableview-simple'
import {version} from '../../../../package.json'
import type {TopLevelViewPropsType} from '../../types'
import {setFeedbackStatus} from '../../../flux/parts/settings'
import {connect} from 'react-redux'
import {CellToggle} from '../../components/cell-toggle'
import {PushButtonCell} from '../components/push-button'
import {trackedOpenUrl} from '../../components/open-url'

class OddsAndEndsSection extends React.Component {
  props: TopLevelViewPropsType & {
    onChangeFeedbackToggle: (feedbackDisabled: boolean) => any,
    feedbackDisabled: boolean,
  }

  onPressButton = (id: string, title: string) => {
    this.props.navigator.push({
      id: id,
      title: title,
      index: this.props.route.index + 1,
    })
  }

  onCreditsButton = () => this.onPressButton('CreditsView', 'Credits')
  onPrivacyButton = () => this.onPressButton('PrivacyView', 'Privacy Policy')
  onLegalButton = () => this.onPressButton('LegalView', 'Legal')
  onSnapshotsButton = () => this.onPressButton('SnapshotsView', 'Snapshot Time')
  onSourceButton = () =>
    trackedOpenUrl({
      url: 'https://github.com/StoDevX/AAO-React-Native',
      id: 'ContributingView',
    })

  render() {
    return (
      <View>
        <Section header="MISCELLANY">
          <PushButtonCell title="Credits" onPress={this.onCreditsButton} />
          <PushButtonCell
            title="Privacy Policy"
            onPress={this.onPrivacyButton}
          />
          <PushButtonCell title="Legal" onPress={this.onLegalButton} />
          <PushButtonCell title="Contributing" onPress={this.onSourceButton} />
        </Section>

        <Section header="ODDS &amp; ENDS">
          <Cell cellStyle="RightDetail" title="Version" detail={version} />

          <CellToggle
            label="Share Analytics"
            // These are both inverted because the toggle makes more sense as
            // optout/optin, but the code works better as optin/optout.
            value={!this.props.feedbackDisabled}
            onChange={val => this.props.onChangeFeedbackToggle(!val)}
          />
        </Section>

        {process.env.NODE_ENV === 'development'
          ? <Section header="UTILITIES">
              <PushButtonCell
                title="Snapshots"
                onPress={this.onSnapshotsButton}
              />
            </Section>
          : null}
      </View>
    )
  }
}

function mapStateToProps(state) {
  return {
    feedbackDisabled: state.settings.feedbackDisabled,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    onChangeFeedbackToggle: s => dispatch(setFeedbackStatus(s)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(OddsAndEndsSection)

@@ -62,16 +62,68 @@
 native'%0A
+import %7BgetVersion%7D from 'react-native-device-info'%0A
 import %7B
@@ -185,24 +185,38 @@
 ort %7Bversion
+, allaboutolaf
 %7D from '../.
@@ -1368,16 +1368,418 @@
 der() %7B%0A
+    // allows us to show %5Bdev%5D, %5Bbeta%5D, or nothing for release builds%0A    const versionMoniker = process.env.NODE_ENV === 'development'%0A      ? '%5Bdev%5D '%0A      : allaboutolaf.source%0A        ? %60%5B$%7Ballaboutolaf.source%7D%5D%60%0A        : ''%0A%0A    //    native (codepush)%0A    // eg, 2.1.2 (2.1.2+2957)%0A    const versionString = getVersion() === version%0A      ? getVersion()%0A      : %60$%7BgetVersion()%7D ($%7Bversion%7D)%60%0A%0A
     retu
@@ -2306,23 +2306,51 @@
 detail=%7B
+%60$%7B
 version
+Moniker%7D$%7BversionString%7D%60
 %7D /%3E%0A%0A  

fix up versions in a codepush world