import React, { Component } from 'react'
import { View } from 'react-native'
import { Button } from 'native-base'
import Text from '../../components/Text';
import { t  , locale} from '../../utils/i18n';

class OptionButton extends Component {

  constructor(props) {
    super(props)
    this.state = {
      activeIndex: 0,
    }
    this.onPressButton = this.onPressButton.bind(this)
  }

  onPressButton(index) {
    this.setState({
      activeIndex: index
    },()=>{
      this.props.onchange_indax(index)
    })
  }

  render() {
    const active = this.state.activeIndex
    return (
      <View style={styles.button_container}>
        <Button small block rounded transparent
                disabled={this.props.disableButton}
                onPress={() => this.onPressButton(0)}
                style={[styles.button_normal, { left: 0 }, active === 0 ? styles.button_active : null]}>
          <Text style={{color: active === 0 ? 'white' : '#0000008C',fontSize: 14}}>{t('individual')}</Text></Button>
        <Button small block rounded transparent
                disabled={this.props.disableButton}
                onPress={() => this.onPressButton(1)}
                style={[styles.button_normal, { right: 0 }, active === 1 ? styles.button_active : null]}>
          <Text style={locale() == "my" ? {color: active === 1 ? 'white' : '#0000008C', fontSize: 12} : {color: active === 1 ? 'white' : '#0000008C', fontSize: 14}}>{t('corporate')}</Text></Button>
      </View>
    )
  }
}

export default OptionButton

const styles = {
  button_container: {
    marginTop: 10,
    height: 32, maxWidth: 239,
    width: '100%',
    borderRadius: 16,
    borderColor: 'rgba(0,0,0,0.25)',
    position: 'relative',
    backgroundColor: 'white'
  },
  button_active: {
    backgroundColor: '#145EB3',
    zIndex: 2,
    color: 'white',
    overflow: 'hidden'
  },
  button_normal: {
    lineHeight: 18,
    height: 32,
    width: '53%',
    position: 'absolute',
    color: 'rgba(0, 0, 0, 0.55)',
    zIndex: 1,
    textAlign: 'center'
  },
}

// export default SegmentReservationScreen
