import React, { PureComponent } from 'react';
import { Animated, Image, Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { style as S } from '../styles/SearchBar';
const kCancelButtonWidthDefault = 75;
const kCancelButtonAnimationDuration = 200;
const cancelIcon = require('../../assets/images/clear.png');
const isAndroid = Platform.OS === 'android';
const styles = StyleSheet.create({
    rightIcon: {
        width: 25
    }
});
export class SearchBar extends PureComponent {
    constructor(props) {
        super(props);
        this.saveContainerRef = (container) => (this.container = container);
        this.saveInputRef = (input) => (this.input = input);
        this.renderInput = () => {
            const { placeholder, clearButtonMode, searchIcon, inputProps, inputTextStyle, searchIconStyle, containerStyle, showSearchIcon } = this.props;
            const { isFocused } = this.state;
            const imageStyle = [
                S.searchIcon,
                isFocused && S.searchIconFocused,
                searchIconStyle
            ];
            return (<View style={[S.inputContainer, containerStyle]}>
        {showSearchIcon && searchIcon &&
                <Image source={searchIcon} style={imageStyle} resizeMode='contain'/>}
        <TextInput style={[S.input, inputTextStyle]} ref={this.saveInputRef} onChangeText={this.handleChangeText} value={this.state.value} onSubmitEditing={this.handleSubmit} placeholder={placeholder} clearButtonMode={clearButtonMode || 'never'} onFocus={this.handleFocus} onBlur={this.handleBlur} returnKeyType='search' accessibilityLabel={placeholder} underlineColorAndroid='transparent' {...inputProps}/>
        {this.renderAndroidClearButton()}
        {this.renderRightBtnIcon()}
      </View>);
        };
        this.renderAndroidClearButton = () => {
            if (this.props.clearButtonMode === 'never' ||
                !isAndroid ||
                !this.state.value ||
                this.state.value.length === 0 ||
                !this.props.clearButtonMode) {
                return null;
            }
            const icon = <Image source={cancelIcon} style={styles.rightIcon} resizeMode='contain'/>;
            return (<TouchableOpacity onPress={this.handleClear}>
        {icon}
      </TouchableOpacity>);
        };
        this.renderRightBtnIcon = () => {
            const { showRightBtnIcon, rightBtnIcon, onRightBtnPress, rightBtnIconStyle, rightBtnStyle } = this.props;
            if (!showRightBtnIcon || !rightBtnIcon) {
                return null;
            }
            const icon = <Image source={rightBtnIcon} style={rightBtnIconStyle} resizeMode='contain'/>;
            if (!onRightBtnPress) {
                return icon;
            }
            return (<TouchableOpacity style={rightBtnStyle} onPress={onRightBtnPress}>
        {icon}
      </TouchableOpacity>);
        };
        this.handleChangeText = (value) => {
            this.setState({ value });
            if (this.props.onChange) {
                this.props.onChange(value);
            }
        };
        this.handleSubmit = () => {
            const { onSubmit, shouldClearOnSubmit } = this.props;
            if (onSubmit) {
                onSubmit(this.state.value);
            }
            this.input.blur();
            if (shouldClearOnSubmit) {
                this.setState({ value: '' });
            }
        };
        this.handleCancel = () => {
            this.setState({ value: '' });
            this.input.blur();
            if (this.props.onCancel) {
                this.props.onCancel();
            }
        };
        this.handleClear = () => {
            this.input.blur();
            this.setState({ value: '' });
            if (this.props.onChange) {
                this.props.onChange('');
            }
        };
        this.handleFocus = () => {
            const { cancelButtonAlwaysVisible, cancelButtonWidth, onFocus } = this.props;
            this.setState({ isFocused: true });
            if (onFocus) {
                onFocus(this.input, this.container);
            }
            if (!cancelButtonAlwaysVisible) {
                Animated.timing(this.state.cancelButtonWidth, {
                    toValue: cancelButtonWidth || kCancelButtonWidthDefault,
                    duration: kCancelButtonAnimationDuration
                }).start();
            }
        };
        this.handleBlur = () => {
            const { cancelButtonAlwaysVisible, onBlur } = this.props;
            this.setState({ isFocused: false });
            if (onBlur) {
                onBlur(this.input, this.container);
            }
            if (!cancelButtonAlwaysVisible) {
                Animated.timing(this.state.cancelButtonWidth, {
                    toValue: 0,
                    duration: kCancelButtonAnimationDuration
                }).start();
            }
        };
        this.handleLocate = () => {
            const { onLocateButtonPress } = this.props;
            if (onLocateButtonPress) {
                onLocateButtonPress();
            }
        };
        this.focusInput = () => {
            this.input.focus();
        };
        this.renderCancelButton = () => {
            const { cancelContainerStyle, cancelImage, cancelImageBoxStyle, cancelImageStyle, cancelTitle, cancelTitleStyle, renderCancelButton } = this.props;
            const { cancelButtonWidth } = this.state;
            if (renderCancelButton) {
                return renderCancelButton();
            }
            const viewStyle = cancelButtonWidth ? { width: cancelButtonWidth } : null;
            const cancelStyle = cancelButtonWidth ? { flex: 1 } : { width: kCancelButtonWidthDefault };
            const cancelImageBoxStyleInput = cancelImageBoxStyle ? cancelImageBoxStyle : null;
            const touchableStyle = [S.rightButton, cancelStyle, cancelImageBoxStyleInput];
            return (<Animated.View style={[viewStyle, cancelContainerStyle]}>
        <TouchableOpacity style={touchableStyle} onPress={this.handleCancel} accessibilityLabel='Cancel search'>
          {cancelImage ? (<Image source={cancelImage} style={cancelImageStyle}/>) : (<Text style={cancelTitleStyle}>
              {cancelTitle || 'Cancel'}
            </Text>)}
        </TouchableOpacity>
      </Animated.View>);
        };
        this.renderLocateButton = () => {
            const { locateIcon, locateIconStyle } = this.props;
            if (!locateIcon) {
                console.warn('locateIcon is required to show locator');
                return null;
            }
            return (<TouchableOpacity style={S.locateButton} onPress={this.handleLocate} accessibilityLabel='Locate me'>
        <Image source={locateIcon} style={[S.locateIcon, locateIconStyle]} resizeMode='contain'/>
      </TouchableOpacity>);
        };
        let cancelButtonWidth;
        if (props.cancelButtonAlwaysVisible) {
            cancelButtonWidth = new Animated.Value(props.cancelButtonWidth || kCancelButtonWidthDefault);
        }
        else {
            cancelButtonWidth = new Animated.Value(0);
        }
        this.state = {
            value: '',
            cancelButtonWidth,
            isFocused: false
        };
    }
    render() {
        const { showCancel, style, showLocator } = this.props;
        return (<View ref={this.saveContainerRef} style={[S.container, style]}>
        <View style={S.searchBarContainer}>
          {showLocator && this.renderLocateButton()}
          {this.renderInput()}
          {showCancel && this.renderCancelButton()}
        </View>
      </View>);
    }
}
SearchBar.defaultProps = {
    shouldClearOnSubmit: true
};
//# sourceMappingURL=SearchBar.js.map