import React, { PureComponent } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { TouchableOpacityLink } from './TouchableOpacityLink';
const BREADCRUMBS_SEPARATOR_DEFAULT = '>';
const BreadcrumbsStyles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    breadcrumbContainer: {
        paddingTop: 3,
        paddingRight: 10,
        paddingBottom: 3,
        flexDirection: 'row'
    },
    separator: {
        paddingLeft: 10
    }
});
export class Breadcrumbs extends PureComponent {
    render() {
        const numItems = this.props.items.length;
        return (<View style={[BreadcrumbsStyles.container, this.props.style]}>
        {this.props.items.map((item, index) => this.renderBreadcrumb(item, index, (index === numItems - 1)))}
      </View>);
    }
    renderBreadcrumb(item, index, isLast) {
        let title;
        if (item.onPress) {
            title = (<TouchableOpacityLink onPress={item.onPress} href={item.href}>
          <Text style={[this.props.titleStyle, this.props.titleClickableStyle]}>{item.title}</Text>
        </TouchableOpacityLink>);
        }
        else {
            title = (<Text style={[this.props.titleStyle, this.props.titleDisabledStyle]}>{item.title}</Text>);
        }
        return (<View key={index} style={[
            BreadcrumbsStyles.breadcrumbContainer,
            this.props.breadcrumbContainerStyle
        ]}>
        {title}
        {(this.props.showTrailingSeparator || !isLast) && (<Text style={[BreadcrumbsStyles.separator, this.props.separatorStyle]}>
            {this.props.separator}
          </Text>)}
      </View>);
    }
}
Breadcrumbs.defaultProps = {
    separator: BREADCRUMBS_SEPARATOR_DEFAULT
};
//# sourceMappingURL=Breadcrumbs.js.map