'use strict';
import React from 'react';
import ReactNative from 'react-native';
import RadioButtons from './';

const {
  Text,
  TouchableWithoutFeedback,
  View,
  Platform
} = ReactNative;

class SegmentedControls extends React.Component {

  render(){
    const config = this.getConfig();

    return (
      <RadioButtons {...this.props}
        renderOption={ this.renderOption.bind(this, config) }
        renderContainer={ this.renderContainer.bind(this, config) }
      />
    );
  }

  getConfig(){
    const tint = this.props.tint || DEFAULTS.tint;
    const backTint = this.props.backTint || DEFAULTS.backTint;
    const colors = {
      tint: tint,
      selectedTint: backTint,
      backgroundColor: backTint,
      selectedBackgroundColor: tint,
      containerBorderTint: tint,
      separatorTint: tint,
    };

    return {
      ...DEFAULTS,
      ...colors,
      ...this.props,
    };
  }

  renderContainer(config, options){
    var containerStyle = {
      flexDirection: config.direction,
      backgroundColor: config.backgroundColor,
      borderColor: config.containerBorderTint,
      borderWidth: config.containerBorderWidth,
      overflow: 'hidden',
      ...this.props.containerStyle,
    };

    // overflow hidden does not clip subviews: https://github.com/facebook/react-native/issues/3198
    if (Platform.OS !== "android") {
      containerStyle.borderRadius = config.containerBorderRadius;
    }

    return <View style={ containerStyle }>{options}</View>;
  }

  renderOption(config, option, selected, onSelect, index){

    const baseStyle = {
      textAlign: config.textAlign,
    };

    const selectedStyle = [baseStyle, this.props.optionStyle, {
      color: config.selectedTint,
      backgroundColor: config.selectedBackgroundColor,
    }];

    const baseColor = selected? config.selectedBackgroundColor: config.backgroundColor;

    const baseOptionContainerStyle = {
      flex: 1,
      paddingTop: config.paddingTop,
      paddingBottom: config.paddingBottom,
      backgroundColor: baseColor,
    };

    const normalStyle = [baseStyle, this.props.optionStyle, {
      color: config.tint,
      backgroundColor: config.backgroundColor
    }];

    const borderStyles = config.direction === 'row' ?
      {
        borderLeftWidth: config.separatorWidth,
        borderLeftColor: config.separatorTint,
      } : {
        borderTopWidth: config.separatorWidth,
        borderTopColor: config.separatorTint,
      };

    const separatorStyle = [baseOptionContainerStyle, borderStyles];

    const style = selected ? selectedStyle : normalStyle;

    const label = this.props.extractText ? this.props.extractText(option) : option;

    // Default to true for undefined - like RN currently does
    const scaleFont = (this.props.allowFontScaling === false) ? false : true;

    return (
      <TouchableWithoutFeedback onPress={onSelect} key={index}>
        <View style={index > 0 ? separatorStyle : baseOptionContainerStyle}>
          {typeof this.props.renderOption === 'function' ? this.props.renderOption.call(this, option, selected) : (
            <Text allowFontScaling={scaleFont} style={style}>{label}</Text>
          )}
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const IOS_BLUE = '#007AFF';
const IOS_WHITE = '#ffffff';

const DEFAULTS = {
  direction: 'row',

  tint: IOS_BLUE,
  backTint: IOS_WHITE,

  paddingTop: 5,
  paddingBottom: 5,
  textAlign: 'center',

  selectedTint: IOS_WHITE,
  selectedBackgroundColor: IOS_WHITE,

  separatorTint: IOS_BLUE,
  separatorWidth: 1,

  containerBorderTint: IOS_BLUE,
  containerBorderWidth: 1,
  containerBorderRadius: 5,

};
export default SegmentedControls;

@@ -2917,16 +2917,17 @@
  style=%7B
+%5B
 index %3E 
@@ -2971,16 +2971,50 @@
 nerStyle
+, this.props.optionContainerStyle%5D
 %7D%3E%0A     

add optionContainerStyle