import { View, Text, TouchableOpacity } from 'react-native';
import React, { useContext } from 'react';
import { CometChatContext } from '../../CometChatContext';
import { SingleSelectStyle } from './SingleStyle';
const CometChatSingleSelect = (props) => {
    const { data, onChange, selectedOption, showError, style } = props;
    const { theme } = useContext(CometChatContext);
    const _style = new SingleSelectStyle({
        titleFont: theme.typography.subtitle1,
        titleColor: theme.palette.getAccent(),
        border: { borderWidth: 1, borderColor: theme.palette.getAccent200() },
        optionFont: theme.typography.subtitle1,
        optionColorActive: theme.palette.getAccent900(),
        optionColorInactive: theme.palette.getAccent300(),
        ...style,
    });
    const { titleFont, titleColor, border, optionFont, optionColorActive, optionColorInactive } = _style;
    return (<View style={{ marginBottom: 12 }}>
            <Text style={[titleFont, { color: titleColor, marginBottom: 4 }]}>{data.getLabel()}{!data.getOptional() && "*"}</Text>
            <View style={{ flex: 1, flexDirection: "row", flexWrap: "wrap" }}>
                {data.getOptions().map((option, index) => (<TouchableOpacity style={{
                width: data.getOptions().length > 2 ? "100%" : "50%",
                padding: 8, borderRadius: 5, marginTop: 2,
                alignItems: "center", justifyContent: "center",
                borderWidth: border.borderWidth, borderColor: showError ? theme.palette.getError() : border.borderColor,
            }} key={index} onPress={() => onChange(option.getValue())}>
                        <Text style={[optionFont, {
                    color: selectedOption === option.getValue() ? optionColorActive : optionColorInactive
                }]}>{option.getLabel()}</Text>
                    </TouchableOpacity>))}
            </View>
        </View>);
};
export default CometChatSingleSelect;
//# sourceMappingURL=CometChatSingleSelect.js.map