"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Searchbar = void 0;
const tslib_1 = require("tslib");
const components_1 = require("@bluebase/components");
const react_native_1 = require("react-native");
const core_1 = require("@bluebase/core");
const react_1 = tslib_1.__importDefault(require("react"));
const defaultStyles = (theme) => ({
    root: Object.assign({ backgroundColor: theme.palette.background.card, borderRadius: theme.shape.borderRadius, flexDirection: 'row' }, theme.elevation(4)),
    input: {
        flex: 1,
        outlineWidth: 0,
        paddingLeft: theme.spacing.unit * 2,
    },
    iconWrapper: {
        alignItems: 'center',
        flexDirection: 'row',
        paddingHorizontal: theme.spacing.unit,
        paddingVertical: theme.spacing.unit / 2,
    },
    searchIcon: {
        padding: theme.spacing.unit / 2,
        width: 31,
    },
    clearIcon: {
        padding: theme.spacing.unit / 2,
        width: 31,
    },
});
exports.Searchbar = (props) => {
    const { theme } = core_1.useTheme();
    const { clearAccessibilityLabel, clearIcon, icon, iconColor = theme.palette.text.secondary, inputStyle, onIconPress, searchAccessibilityLabel, style, value, onChangeText } = props, rest = tslib_1.__rest(props, ["clearAccessibilityLabel", "clearIcon", "icon", "iconColor", "inputStyle", "onIconPress", "searchAccessibilityLabel", "style", "value", "onChangeText"]);
    const styles = core_1.useStyles('Searchbar', props, defaultStyles);
    function handleClearPress() {
        if (onChangeText) {
            onChangeText('');
        }
    }
    return (react_1.default.createElement(components_1.View, { style: [styles.root, style], testID: "searchbar-root" },
        react_1.default.createElement(react_native_1.TextInput, Object.assign({ style: [styles.input, inputStyle], returnKeyType: "search", 
            // keyboardAppearance={dark ? 'dark' : 'light'}
            accessibilityTraits: "search", accessibilityRole: "search", value: value }, rest)),
        react_1.default.createElement(components_1.View, { style: styles.iconWrapper },
            value && (react_1.default.createElement(components_1.IconButton, Object.assign({ accessibilityLabel: clearAccessibilityLabel, color: iconColor, onPress: handleClearPress, name: "close", size: 20, style: styles.clearIcon }, clearIcon))),
            react_1.default.createElement(components_1.IconButton, Object.assign({ onPress: onIconPress, color: iconColor, name: "magnify", size: 20, style: styles.searchIcon }, icon)))));
};
