// @flow
import * as React from 'react'
import {Switch} from 'react-native'
import {Cell} from 'react-native-tableview-simple'
import {type AppTheme} from '@frogpond/app-theme'
import {withTheme} from '@callstack/react-theme-provider'

type PropsType = {
	label: string,
	value: boolean,
	onChange: (val: boolean) => any,
	theme: AppTheme,
	detail?: string,
	disabled?: boolean,
}

function CellToggle(props: PropsType) {
	let {value, onChange, label, detail, theme, disabled} = props

	let toggle = (
		<Switch
			disabled={disabled}
			onTintColor={theme.switchTintOn}
			onValueChange={onChange}
			tintColor={theme.switchTintOff}
			value={value}
		/>
	)

	return (
		<Cell
			cellAccessoryView={toggle}
			cellStyle={detail ? 'Subtitle' : 'Basic'}
			detail={detail}
			title={label}
		/>
	)
}

export const RawCellToggle = CellToggle

const ThemedCellToggle = withTheme(CellToggle)

export {ThemedCellToggle as CellToggle}

@@ -532,44 +532,8 @@
 ed%7D%0A
-%09%09%09onTintColor=%7Btheme.switchTintOn%7D%0A
 %09%09%09o
@@ -564,18 +564,26 @@
 %09%09%09t
-int
+rack
 Color=%7B
+%7B
+true: 
 them
@@ -599,10 +599,38 @@
 intO
-ff
+n, false: theme.switchTintOff%7D
 %7D%0A%09%09

fix up ToggleCell for rn@0.57