// @flow
import * as React from 'react'
import {Cell, Section, CellToggle} from '@frogpond/tableview'
import {APP_VERSION} from '../../../../lib/constants'
import {setFeedbackStatus} from '../../../../redux/parts/settings'
import {connect} from 'react-redux'
import {sectionBgColor} from '@frogpond/colors'

type Props = {
	onChangeFeedbackToggle: (feedbackDisabled: boolean) => any,
	feedbackDisabled: boolean,
}

class OddsAndEndsSection extends React.Component<Props> {
	render() {
		return (
			<Section header="ODDS &amp; ENDS" sectionTintColor={sectionBgColor}>
				<Cell cellStyle="RightDetail" detail={APP_VERSION} title="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.
					onChange={val => this.props.onChangeFeedbackToggle(!val)}
					value={!this.props.feedbackDisabled}
				/>
			</Section>
		)
	}
}

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

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

export default connect(
	mapStateToProps,
	mapDispatchToProps,
)(OddsAndEndsSection)

@@ -478,16 +478,65 @@
 der() %7B%0A
+%09%09let %5Bversion, build%5D = APP_VERSION.split('+')%0A%0A
 %09%09return
@@ -538,16 +538,16 @@
 eturn (%0A
-
 %09%09%09%3CSect
@@ -652,27 +652,23 @@
 detail=%7B
-APP_VERSION
+version
 %7D title=
@@ -679,16 +679,113 @@
 sion%22 /%3E
+%0A%09%09%09%09%7Bbuild && (%0A%09%09%09%09%09%3CCell cellStyle=%22RightDetail%22 detail=%7Bbuild%7D title=%22Build Number%22 /%3E%0A%09%09%09%09)%7D
 %0A%0A%09%09%09%09%3CC

split Build and Version apart