interface CustomCheckBoxProps {
    title?: string;
    value?: boolean | number;
    onClose?: () => void,
    closeContainerStyle?: ViewStyle,
    closeIconStyle?: ImageStyle,
    showCloseIcon?: boolean,
    titleStyle?: TextStyle,
    containerStyle?: ViewStyle,
    subTitle?: string,
    subTitleStyle?: TextStyle,
    inActiveIconStyle?: ViewStyle & ImageStyle,
    activeIconStyle?: ImageStyle,
    icon?: ImageSourcePropType,
    inActiveIcon?: ImageSourcePropType,
};

const CustomCheckBox = (props: CustomCheckBoxProps & TouchableOpacityProps) => {

    const GlobalStyle = useGlobalStyles();
    const Styles = useStyles();
    const { colors } = useAppSelector(state => state.CommonSlice)

    return (
        <TouchableOpacity {...props} activeOpacity={1} style={[Styles.checkBoxContainerStyle, props.containerStyle]} >
            <View style={[GlobalStyle.rowContainer, Styles.containerStyle]}>
                {props.value ?
                    <Image source={props.icon ?? Icons.CHECKBOX} style={[Styles.activeIconStyle, props.activeIconStyle]} />
                    :
                    props.inActiveIcon ? <Image source={props.inActiveIcon} style={[Styles.activeIconStyle, props.inActiveIconStyle]} /> :
                        <View style={[Styles.inActiveIconStyle, props.inActiveIconStyle]} />
                }
                <Text numberOfLines={1} style={[GlobalStyle.subTitleStyle, Styles.titleStyle, props.titleStyle]}>{props.title}</Text>
            </View>
            {props.subTitle ? <Text numberOfLines={1} style={[GlobalStyle.subTitleStyle, Styles.subTitleStyle, props.subTitleStyle]}>{props.subTitle}</Text> : null}
        </TouchableOpacity>
    );
};

export default memo(CustomCheckBox);