import React from 'react';
import { Switch, Text, View } from 'react-native';
import PropTypes from 'prop-types';

import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors';
import styles from './styles';

const SwitchContainer = React.memo(
	({
		children,
		value,
		disabled,
		onValueChange,
		leftLabelPrimary,
		leftLabelSecondary,
		rightLabelPrimary,
		rightLabelSecondary,
		theme,
		testID,
		labelContainerStyle,
		leftLabelStyle
	}) => (
		<>
			<View key='switch-container' style={[styles.switchContainer, children && styles.switchMargin]}>
				{leftLabelPrimary && (
					<View style={[styles.switchLabelContainer, labelContainerStyle]}>
						<Text style={[styles.switchLabelPrimary, { color: themes[theme].titleText }, leftLabelStyle]}>
							{leftLabelPrimary}
						</Text>
						<Text style={[styles.switchLabelSecondary, { color: themes[theme].titleText }, leftLabelStyle]}>
							{leftLabelSecondary}
						</Text>
					</View>
				)}
				<Switch
					style={styles.switch}
					onValueChange={onValueChange}
					value={value}
					disabled={disabled}
					trackColor={SWITCH_TRACK_COLOR}
					testID={testID}
				/>
				{rightLabelPrimary && (
					<View style={[styles.switchLabelContainer, labelContainerStyle]}>
						<Text style={[styles.switchLabelPrimary, { color: themes[theme].titleText }, leftLabelStyle]}>
							{rightLabelPrimary}
						</Text>
						<Text style={[styles.switchLabelSecondary, { color: themes[theme].titleText }, leftLabelStyle]}>
							{rightLabelSecondary}
						</Text>
					</View>
				)}
			</View>
			{children}
			<View key='switch-divider' style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
		</>
	)
);

SwitchContainer.propTypes = {
	value: PropTypes.bool,
	disabled: PropTypes.bool,
	leftLabelPrimary: PropTypes.string,
	leftLabelSecondary: PropTypes.string,
	rightLabelPrimary: PropTypes.string,
	rightLabelSecondary: PropTypes.string,
	onValueChange: PropTypes.func,
	theme: PropTypes.string,
	testID: PropTypes.string,
	labelContainerStyle: PropTypes.object,
	leftLabelStyle: PropTypes.object,
	children: PropTypes.any
};

export default SwitchContainer;