import React, { PureComponent } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { style as S } from '../styles/MoreText';
export class MoreText extends PureComponent {
    constructor(props) {
        super(props);
        this.kButtonTouchabilityOpacity = 0.5;
        this.kTextMore = 'Read more';
        this.kTextLess = 'Read less';
        this.handlePress = () => {
            const { text, numberOfCharacters } = this.props;
            if (this.state.shouldShowMore) {
                this.setState({
                    shouldShowMore: false,
                    visibleText: text
                });
            }
            else {
                this.setState({
                    shouldShowMore: true,
                    visibleText: text.length > numberOfCharacters ?
                        text.substring(0, numberOfCharacters) : text
                });
            }
        };
        this.renderMoreLessOutwardSection = () => {
            const { shouldShowMore } = this.state;
            const { textMore, textLess, textMoreLessStyle, renderMoreLessOutwardSection } = this.props;
            if (renderMoreLessOutwardSection) {
                return renderMoreLessOutwardSection(shouldShowMore, this.handlePress);
            }
            const titleMore = textMore ? textMore : this.kTextMore;
            const titleLess = textLess ? textLess : this.kTextLess;
            return (<TouchableOpacity accessibilityLabel={shouldShowMore ? titleMore : titleLess} activeOpacity={this.kButtonTouchabilityOpacity} onPress={this.handlePress}>
        <Text style={textMoreLessStyle ? textMoreLessStyle : S.textMoreLess}>
          {shouldShowMore ? titleMore : titleLess}
        </Text>
      </TouchableOpacity>);
        };
        this.renderOutward = () => {
            const { visibleText } = this.state;
            const { containerStyle, textStyle } = this.props;
            return (<View style={containerStyle ? containerStyle : S.container}>
        <Text style={textStyle ? textStyle : S.text}>
          {visibleText}
        </Text>

        {this.renderMoreLessOutwardSection()}
      </View>);
        };
        this.renderInward = () => {
            const { shouldShowMore, visibleText } = this.state;
            const { containerStyle, textLess, textMore, textMoreLessStyle, textStyle } = this.props;
            const titleMore = textMore ? textMore : this.kTextMore;
            const titleLess = textLess ? textLess : this.kTextLess;
            return (<View style={containerStyle ? containerStyle : S.container}>
        <TouchableOpacity accessibilityLabel={shouldShowMore ? titleMore : titleLess} activeOpacity={this.kButtonTouchabilityOpacity} onPress={this.handlePress}>
          <Text style={textStyle ? textStyle : S.text}>
            {visibleText}
            {' '}
            <Text style={textMoreLessStyle ? textMoreLessStyle : S.textMoreLess}>
              {shouldShowMore ? titleMore : titleLess}
            </Text>
          </Text>
        </TouchableOpacity>
      </View>);
        };
        this.state = {
            shouldShowMore: props.text.length > props.numberOfCharacters,
            visibleText: props.text.length > props.numberOfCharacters ?
                props.text.substring(0, props.numberOfCharacters) : props.text
        };
    }
    render() {
        const { text, textStyle, numberOfCharacters } = this.props;
        if (text.length <= numberOfCharacters) {
            return (<Text style={textStyle ? textStyle : S.text}>
        {text}
      </Text>);
        }
        switch (this.props.format) {
            case 'outward':
                return this.renderOutward();
            case 'inward':
                return this.renderInward();
            default:
                return this.renderOutward();
        }
    }
}
//# sourceMappingURL=MoreText.js.map