import React, { Component } from 'react'
import {
  View,
  Image,
  StyleSheet,
} from 'react-native'

import ClearText from './text'

export default class CheckBox extends Component {
  render() {
    const image = this.props.checked ? (
      <Image source={require('../../img/checkbox-on.png')} style={styles.image} />
    ) : (
      <Image source={require('../../img/checkbox-off.png')} style={styles.image} />
    )
    return (
      <View style={[styles.row, this.props.containerStyle]} onClick={() => this.props.onChange(this.props.checked)}>
        {image}
        <ClearText style={this.props.labelStyle}>{this.props.label}</ClearText>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
  },
  image: {
    width: 30,
    height: 30,
    marginRight: 5,
  }
})