import React from 'react';
import { Pressable } from 'react-native';
import { Path, Svg } from 'react-native-svg';
import themedStyles from './styles';
import { useTheme } from '../../branding';

interface CheckboxProps {
    checked: boolean;
    onChange?: () => void;
    color?: string;
    checkedColor?: string;
    checkedBackgroundColor?: string;
}

export const Checkbox = ({
    checked,
    onChange,
    color,
    checkedColor,
    checkedBackgroundColor
}: CheckboxProps) => {
    const { colors, theme } = useTheme();
    const styles = themedStyles[theme];

    const checkedBackgroundStyle =
        checked && checkedBackgroundColor
            ? [{ backgroundColor: checkedBackgroundColor }]
            : [];

    return (
        <Pressable
            style={[
                styles.checkbox,
                checked && styles.checkedBox,
                ...checkedBackgroundStyle
            ]}
            onPress={onChange}
            testID="checkbox"
        >
            {checked ? (
                <Svg width={12} height={12} viewBox="0 0 12 12" fill="none">
                    <Path
                        fillRule="evenodd"
                        clipRule="evenodd"
                        d="M10.74 2.82733C11.1115 3.23599 11.0813 3.86844 10.6727 4.23995L5.17269 9.23995C4.97401 9.42056 4.71104 9.5137 4.44297 9.49838C4.1749 9.48306 3.92425 9.36058 3.74744 9.15851L1.24744 6.30137C0.883755 5.88573 0.925872 5.25397 1.34151 4.89029C1.75715 4.52661 2.38891 4.56872 2.75259 4.98436L4.58146 7.0745L9.32734 2.76007C9.736 2.38856 10.3684 2.41868 10.74 2.82733Z"
                        fill={checkedColor || colors.gray0}
                    />
                </Svg>
            ) : (
                <Svg width={16} height={16} viewBox="0 0 16 16" fill="none">
                    <Path
                        d="M0.5 2C0.5 1.17157 1.17157 0.5 2 0.5H14C14.8284 0.5 15.5 1.17157 15.5 2V14C15.5 14.8284 14.8284 15.5 14 15.5H2C1.17157 15.5 0.5 14.8284 0.5 14V2Z"
                        stroke={color || colors.gray0}
                    />
                </Svg>
            )}
        </Pressable>
    );
};

export default Checkbox;