text: /**
   * @flow
   */
  'use strict';
  import React, { Component, PropTypes } from 'react';
  import { View, StyleSheet, TouchableOpacity, Text, Dimensions } from 'react-native';
  
  export default class F8SegmentedControl extends Component {
  
    render() {
      var segments = this.props.values.map(
        (value, index) => (
          <Segment
            key={value}
            value={value}
            isSelected={index === this.props.selectedIndex}
            selectionColor={this.props.selectionColor || 'white'}
            onPress={() => this.props.onChange(index)}
          />
        )
      );
      return (
        <View style={[styles.container, this.props.style]}>
          {segments}
        </View>
      );
    }
  }
  
  class Segment extends Component {
  
    render() {
      var selectedButtonStyle;
      if (this.props.isSelected) {
        selectedButtonStyle = { borderColor: this.props.selectionColor };
      }
      var deselectedLabelStyle;
  
      var title = this.props.value && this.props.value.toUpperCase();
  
      var accessibilityTraits = ['button'];
      if (this.props.isSelected) {
        accessibilityTraits.push('selected');
      }
  
      return (
        <TouchableOpacity
          accessibilityTraits={accessibilityTraits}
          activeOpacity={0.8}
          onPress={this.props.onPress}
          style={[styles.button, selectedButtonStyle]}>
          <Text style={[styles.label, deselectedLabelStyle]}>
            {title}
          </Text>
        </TouchableOpacity>
      );
    }
  }
  
  const HEIGHT = 32;
  
  var styles = StyleSheet.create({
    container: {
      flex:1,
      flexDirection: 'row',
      backgroundColor: 'transparent',
      paddingBottom: 6,
      justifyContent: 'center',
      alignItems: 'center',
    },
    button: {
      borderColor: 'transparent',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'transparent',
      height: HEIGHT,
      paddingHorizontal: 20,
      borderRadius: HEIGHT / 2,
      borderWidth: 1,
    },
    label: {
      letterSpacing: 1,
      fontSize: 12,
      color: 'white',
    },
    deselectedLabel: {
      color: 'rgba(255, 255, 255, 0.7)',
    },
  });