import React from 'react';
import {StyleProp, StyleSheet, View, ViewProps} from 'react-native';
import rpx from '@/utils/rpx';
import useColors from '@/hooks/useColors';
import {TouchableOpacity} from 'react-native-gesture-handler';
import Icon from '@/components/base/icon.tsx';

interface ICheckboxProps {
    checked?: boolean;
    onPress?: () => void;
    style?: StyleProp<ViewProps>;
}

const slop = rpx(24);

export default function Checkbox(props: ICheckboxProps) {
    const {checked, onPress, style} = props;
    const colors = useColors();

    const innerNode = (
        <View
            style={[
                styles.container,
                checked
                    ? {
                          backgroundColor: colors.primary,
                          borderColor: colors.primary,
                      }
                    : {
                          borderColor: colors.text,
                      },
                style,
            ]}>
            {checked ? (
                <Icon name="check" color={colors.appBarText} size={rpx(34)} />
            ) : null}
        </View>
    );

    return onPress ? (
        <TouchableOpacity
            hitSlop={{
                left: slop,
                right: slop,
                top: slop,
                bottom: slop,
            }}
            onPress={onPress}>
            {innerNode}
        </TouchableOpacity>
    ) : (
        innerNode
    );
}

const styles = StyleSheet.create({
    container: {
        width: rpx(36),
        height: rpx(36),
        borderRadius: rpx(2),
        borderWidth: rpx(1),
        alignItems: 'center',
        justifyContent: 'center',
    },
});