import React, { Component } from 'react';
import { TouchableHighlight } from 'react-native';
import PropTypes from 'prop-types';
import { NixplayIcon } from 'nixplay-ui-kit';
import { color } from '~/styles/variables';

class Checkbox extends Component {
	constructor(props) {
		super(props);
		this.handleToggle = this.handleToggle.bind(this);
	}

	handleToggle() {
		this.props.onToggle(!this.props.checked);
	}

	render() {
		const { checked: isChecked, size } = this.props;
		return (
			<TouchableHighlight
				onPress={this.handleToggle}
				underlayColor="transparent"
				style={[{
					width: this.props.size,
					height: this.props.size,
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center',
				}, this.props.checkBoxStyle]}
				{...this.props}
			>
				<NixplayIcon
					name={isChecked ? 'checkbox-circle-on' : 'checkbox-circle-off'}
					testID={isChecked ? 'CheckboxCircleOn' : 'CheckboxCircleOff'}
					size={size}
					color={isChecked ? this.props.color : color.grayLighter}
					style={this.props.iconStyle}
					{...this.props.iconProps}
				/>
			</TouchableHighlight>
		);
	}
}

Checkbox.propTypes = {
	size: PropTypes.number,
	color: PropTypes.string,
	checkBoxStyle: PropTypes.object,
	iconStyle: PropTypes.object,
	iconProps: PropTypes.object,
	checked: PropTypes.bool,
	onToggle: PropTypes.func,
};

Checkbox.defaultProps = {
	size: 24,
	color: 'black',
	checkBoxStyle: {},
	iconStyle: {},
	iconProps: {},
	checked: false,
	onToggle: () => {},
};

export { Checkbox };
