import React, { PureComponent } from 'react';
import { Image, Text, TouchableOpacity, View } from 'react-native';
import { TextInputMask } from 'react-native-masked-text';
import { style as S } from '../styles/Stepper';
const icons = {
    increase: require('../../assets/images/increaseImage.png'),
    decrease: require('../../assets/images/decreaseImage.png')
};
export class Stepper extends PureComponent {
    constructor(props) {
        super(props);
        this.kButtonTouchabilityOpacity = 0.5;
        this.handleDecreasePress = () => {
            const newCount = this.state.count - 1;
            this.setState({ count: newCount });
            if (this.props.onDecreaseButtonPress) {
                this.props.onDecreaseButtonPress(newCount);
            }
            if (this.props.onChange) {
                this.props.onChange(newCount);
            }
        };
        this.handleIncreasePress = () => {
            const newCount = this.state.count + 1;
            this.setState({ count: newCount });
            if (this.props.onIncreaseButtonPress) {
                this.props.onIncreaseButtonPress(newCount);
            }
            if (this.props.onChange) {
                this.props.onChange(newCount);
            }
        };
        this.renderDecreaseButton = (style = {}) => {
            const { decreaseButtonImage = icons.decrease, renderDecreaseButton } = this.props;
            if (renderDecreaseButton) {
                return renderDecreaseButton(this.state.count, this.handleDecreasePress);
            }
            return (<TouchableOpacity accessibilityLabel='Decrease' activeOpacity={this.kButtonTouchabilityOpacity} disabled={this.state.count <= 0} onPress={this.handleDecreasePress}>
        <Image resizeMode='contain' source={decreaseButtonImage} style={[S.buttonImage, style]}/>
      </TouchableOpacity>);
        };
        this.renderIncreaseButton = (style = {}) => {
            const { countUpperLimit, increaseButtonImage = icons.increase, renderIncreaseButton } = this.props;
            if (renderIncreaseButton) {
                return renderIncreaseButton(this.state.count, this.handleIncreasePress);
            }
            return (<TouchableOpacity accessibilityLabel='Increase' activeOpacity={this.kButtonTouchabilityOpacity} disabled={!countUpperLimit || this.state.count >= countUpperLimit} onPress={this.handleIncreasePress}>
        <Image resizeMode='contain' source={increaseButtonImage} style={[S.buttonImage, style]}/>
      </TouchableOpacity>);
        };
        this.renderHorizontalCenter = (counterText, counterStyle, stepperStyle) => {
            return (<View style={stepperStyle ? stepperStyle : S.stepperHorizontalContainer}>
        {this.renderDecreaseButton()}
        {this.renderText(counterStyle ? counterStyle : S.counterHorizontalCenter, counterText)}
        {this.renderIncreaseButton()}
      </View>);
        };
        this.renderHorizontalLeft = (counterText, counterStyle, stepperStyle) => {
            return (<View style={stepperStyle ? stepperStyle : S.stepperHorizontalContainer}>
        {this.renderText(counterStyle ? counterStyle : S.counterHorizontalLeft, counterText)}
        {this.renderDecreaseButton()}
        {this.renderIncreaseButton(S.buttonIncreaseHorizontalLeft)}
      </View>);
        };
        this.renderVertical = (counterText, counterStyle, stepperStyle) => {
            return (<View style={stepperStyle ? stepperStyle : S.stepperVerticalContainer}>
        {this.renderIncreaseButton()}
        {this.renderText(counterStyle ? counterStyle : S.counterVertical, counterText)}
        {this.renderDecreaseButton()}
      </View>);
        };
        this.renderText = (counterStyle, counterText) => {
            if (this.props.renderText) {
                return this.props.renderText(counterText, counterStyle, this.state.count);
            }
            if (this.props.editable) {
                return (<TextInputMask keyboardType={'phone-pad'} onChangeText={this.onTextChange} style={counterStyle} type='only-numbers' value={counterText}/>);
            }
            return (<Text style={counterStyle}>{counterText}</Text>);
        };
        this.onTextChange = (text) => {
            let value = parseInt(text, 10);
            if (!isNaN(value)) {
                if (this.props.countUpperLimit && value > this.props.countUpperLimit) {
                    value = this.props.countUpperLimit;
                }
                this.setState({ count: value });
                if (this.props.onChange) {
                    this.props.onChange(value);
                }
            }
        };
        this.state = {
            count: props.count || 0
        };
    }
    render() {
        const { counterStyle, format, prefix, stepperStyle } = this.props;
        const { count } = this.state;
        const counterText = prefix ? `${prefix} ${count}` : `${count}`;
        switch (format) {
            case 'horizontalCenter':
                return this.renderHorizontalCenter(counterText, counterStyle, stepperStyle);
            case 'horizontalLeft':
                return this.renderHorizontalLeft(counterText, counterStyle, stepperStyle);
            case 'vertical':
                return this.renderVertical(counterText, counterStyle, stepperStyle);
            default:
                return this.renderHorizontalCenter(counterText, counterStyle, stepperStyle);
        }
    }
}
Stepper.defaultProps = {
    increaseButtonImage: icons.increase,
    decreaseButtonImage: icons.decrease
};
//# sourceMappingURL=Stepper.js.map