import { View, Text, TouchableOpacity, Image } from 'react-native';
import React, { useContext } from 'react';
import { ICONS } from '../../assets/images';
import { CometChatContext } from '../../CometChatContext';
import { CheckBoxStyle } from './CheckBoxStyle';
const CometChatCheckBox = (props) => {
    const { onChange, data, showError, selectedOptions, style } = props;
    const { theme } = useContext(CometChatContext);
    const _style = new CheckBoxStyle({
        activeBackgroundColor: theme.palette.getPrimary(),
        inactiveBackgroundColor: theme.palette.getBackgroundColor(),
        titleFont: theme.typography.subtitle1,
        border: { borderWidth: 1, borderColor: theme.palette.getAccent200() },
        checkboxTintColor: theme.palette.getBackgroundColor(),
        titleColor: theme.palette.getAccent(),
        optionColor: theme.palette.getAccent(),
        optionFont: theme.typography.subtitle1,
        ...style,
    });
    const { activeBackgroundColor, checkboxTintColor, inactiveBackgroundColor, optionColor, optionFont, titleColor, titleFont, border, } = _style;
    function _checkSelectedOption(option) {
        return selectedOptions.find((selectedOption) => selectedOption === option.getValue()) ? true : false;
    }
    return (<View style={{ marginBottom: 12 }}>

            <Text style={[titleFont, { color: titleColor, marginBottom: 4 }]}>{data.getLabel()}{!data.getOptional() && "*"}</Text>

            {data.getOptions().map((option, index) => (<View key={index} style={{ flexDirection: "row", alignItems: "center", marginVertical: 1 }}>
                    <TouchableOpacity style={{
                height: 20, width: 20, backgroundColor: _checkSelectedOption(option) ? activeBackgroundColor : inactiveBackgroundColor,
                borderRadius: 5, marginRight: 5, alignItems: "center", justifyContent: "center",
                borderColor: showError ? theme.palette.getError() : border.borderColor,
                borderWidth: border.borderWidth,
            }} onPress={() => onChange(option)}>
                        {_checkSelectedOption(option) && <Image style={{
                    height: 15,
                    width: 15,
                    tintColor: checkboxTintColor,
                }} source={ICONS.CHECK_MARK}/>}
                    </TouchableOpacity>
                    <Text style={[optionFont, { color: optionColor }]}>{option.getLabel()}</Text>
                </View>))}

        </View>);
};
export default CometChatCheckBox;
//# sourceMappingURL=CometChatCheckBox.js.map