// Checkbox component
// props:
//   - label: string
//   - value: boolean
//   - onChange: function
//   - style: object
//   - labelStyle: object
//   - disabled: boolean
//   - disabledStyle: object
//   - disabledLabelStyle: object
//   - disabled: boolean

import React from 'react'
import { View, StyleSheet, TouchableOpacity } from 'react-native'
import { colors, spacing } from '../theme'
import Text from './Text'

const Checkbox = ({
  label,
  value,
  onChange,
  style,
  disabled,
  disabledStyle,
  disabledLabelStyle,
  labelStyle,
  checkedStyle,
  checkedColor,
}) => {
  const [checked, setChecked] = React.useState(value)
  const toggle = () => {
    setChecked(!checked)
    onChange(!checked)
  }
  return (
    <TouchableOpacity style={[styles.container, style]} onPress={toggle}>
      <View
        style={[
          styles.checkbox,
          checked && styles.checked,
          checked && checkedStyle,
          checked &&
            checkedColor && {
              backgroundColor: checkedColor,
            },
          disabled && styles.disabled,
          disabled && disabledStyle,
        ]}
      />
      <Text style={[styles.label, disabled && disabledLabelStyle, labelStyle]}>
        {label}
      </Text>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: spacing.s_1,
  },
  checkbox: {
    width: 20,
    height: 20,
    borderRadius: 5,
    borderWidth: 1,
    borderColor: colors.primary,
    marginRight: spacing.sm,
    marginRight: 8,
  },
  checked: {
    backgroundColor: colors.primary,
  },
  disabled: {
    backgroundColor: colors.disabled,
  },
  label: {
    fontSize: 16,
  },
})

export default Checkbox