import React, { Component } from 'react'
import { ScrollView, View, Platform, KeyboardAvoidingView } from 'react-native'
import Image from 'react-native-fast-image'
import Text from '../../components/Text'
import Icon from 'src/components/Icon'
import OptionButton from './SegmentReservation'
import PersonRoomReservationScreen from './PersonRoomReservation'
import CompanyRoomReservationScreen from './CompanyRoomReservation'
import LinearGradient from 'react-native-linear-gradient'
import { BackgroundImage_RegisterForm } from '../../components/BackgroundImage_RegisterForm'
import { BackgroundImage } from '../../components/BackgroundImage'
import { t } from '../../utils/i18n'

class RoomHeaderReservationScreen extends Component {

  constructor(props) {
    super(props)
    this.state = {
      room_detail: this.props.navigation.getParam('room_detail','NO-DETAIL'),
      room_image: this.props.navigation.getParam('room_image','NO-IMAGE'),
      activeIndex: 0,
    }
    this.onchange_activeIndex = this.onchange_activeIndex.bind(this)

  }

  onchange_activeIndex(index) {
    this.setState({
      activeIndex: index,
    })
  }

  render() {
    return (
      <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
      }}>
        <BackgroundImage>
        <KeyboardAvoidingView style={{flex:1}} keyboardVerticalOffset={Platform.OS == 'ios' ? 70 : 0} behavior={Platform.OS == 'ios' ? "padding" : ""} enabled>
          <ScrollView
            contentContainerStyle={{ flexDirection: 'column', flexGrow: 1, alignItems: 'stretch' }}>
            <View style={{ backgroundColor: '#269A21', flex: 0 }}>
              <View style={styles.box_detail_room}>
                <Image style={styles.image_style} source={{uri: this.state.room_image[0].url}} />
                <View style={{ flex:1,marginLeft: 15 }}>
                  <Text style={{ flex:1, color: 'white', fontSize: 16, borderBottomWidth: 1, borderBottomColor: 'white' }}>{this.state.room_detail.type_name}</Text>
                  <Text style={{ color: '#8BC34A', marginTop: 8, fontSize: 14 }}>{this.state.room_detail.price} / {t('month')}</Text>
                  <View style={{ flexDirection: 'row', marginTop: 8 }}>
                    <Icon name={'ic_location'} size={16} color={'rgba(255, 255, 255, 0.65)'} />
                    <Text style={{ color: 'rgba(255, 255, 255, 0.65)', marginLeft: 5, fontSize: 14 }}>{this.state.room_detail.project.name}</Text>
                  </View>
                </View>
              </View>
            </View>
            <View style={{ flex: 0.9, flexGrow: 1 }}>
              <View style={{ alignItems: 'center', marginTop: 10, flex: 0.1 }}>
                <OptionButton
                  activeIndex={this.state.activeIndex}
                  onchange_indax={this.onchange_activeIndex}
                />
              </View>
              <View style={{ marginTop: 5, flex: 0.9, flexGrow: 1 }}>
                {
                  this.state.activeIndex === 0 ?
                    <PersonRoomReservationScreen roomDetail={this.state.room_detail}/>
                    :
                    <CompanyRoomReservationScreen roomDetail={this.state.room_detail}/>
                }
              </View>
            </View>
          </ScrollView>
        </KeyboardAvoidingView>
        </BackgroundImage>
      </LinearGradient>
    )
  }
}

const styles = {
  image_style: {
    height: 80,
    width: 100,
    borderRadius: 3,
  },
  box_detail_room: {
    borderRadius: 5,
    padding: 15,
    backgroundColor: '#00420A',
    margin: 15,
    flexDirection: 'row',
  },
  contentContainer: {
    paddingVertical: 5
  }
}

export default RoomHeaderReservationScreen
