import React from "react";
import {
  ImageBackground,
  Pressable,
  StyleProp,
  ViewStyle,
  GestureResponderEvent,
} from "react-native";

import theme from "mazlo-theme";

import { View } from "../View";
import styles from "./styles";

type Props = {
  children?: React.ReactNode;
  checkedColor?: string;
  checkedImage?: any;
  uncheckedImage?: any;
  disabled?: boolean;
  hitSlop?: { top: number; left: number; bottom: number; right: number };
  onChange?: (checked: boolean, event: GestureResponderEvent) => void;
  value?: boolean;
  style?: StyleProp<ViewStyle>;
};

const Checkbox = ({
  children,
  checkedColor,
  checkedImage = theme.images.checkmark,
  uncheckedImage = theme.images.fade,
  disabled,
  style,
  onChange,
  value: checked = false,
  ...props
}: Props) => {
  return (
    <Pressable
      accessibilityRole="checkbox"
      accessibilityState={{ checked }}
      disabled={disabled}
      onPress={onChange ? (e) => onChange(!checked, e) : undefined}
      style={[styles.container, style ? style : {}]}
      {...props}
    >
      <View
        style={[
          styles.checkbox,
          checked
            ? [
                styles.checked,
                checkedColor && { backgroundColor: checkedColor },
              ]
            : styles.unchecked,
        ]}
      >
        <ImageBackground
          source={checked ? checkedImage : uncheckedImage}
          style={
            checked
              ? styles.checkedImageBackground
              : styles.uncheckedImageBackground
          }
        />
      </View>
      {children}
    </Pressable>
  );
};

export default Checkbox;