import React,{Component} from 'react'
import {
	TouchableOpacity,
    TextInput,
    StyleSheet,
    View,
    ScrollView,
    Alert,
    Image,
    ImageBackground,
    FlatList
} from 'react-native'
import Icon from "../../components/Icon";
import { CustomButton } from '../../components/CustomButton';
import {  Button, Card, Body, Badge, ListItem, Left, Right,CheckBox, } from 'native-base'
import { BackgroundImage } from '../../components/BackgroundImage'
import Text from '../../components/Text';
import LinearGradient from 'react-native-linear-gradient';
import Color from '../../color';
import GetWidthHeightDevice from '../../components/GetWidthHeightDevice'
import { t } from '../../utils/i18n'
import moment from 'moment';

export default class RepairSuccess extends Component {
	constructor(props) {
    super(props)
    this.state = {
      repair:{},
      room:'',
      project:'',
      order_list:[
        {
          title: 'น้ำรั่ว',
          price: '200'
        },
        {
          title: 'เปลี่ยนก๊อกน้ำ',
          price: '150'
        },
        {
          title: 'ไฟฟ้าช๊อต',
          price: '500'
        },
      ]
    }
    this.convertStatus = this.convertStatus.bind(this)
    this.convertColorStatus = this.convertColorStatus.bind(this)
  }

  componentDidMount = () => {

    const { navigation } = this.props
    const repair_state = navigation.getParam('repair', 'NO-DATA')

    this.setState({
      repair: repair_state,
    })




  };

  renderItem = ({item}) => {
    return <View style={{ flexDirection: 'row', marginVertical:3, justifyContent:'space-between'}}>
      <Text style={{ fontSize: 14, color: '#000000' }}>{item.name}</Text>
      <Text style={{ textAlign: 'right', fontSize: 14, color: '#7CBB33' }}>{item.service_fee} {t('baht')}</Text>
    </View>
  }

  _keyExtractor = (item, index) => 'order_'+index

  convertStatus(statusName){
    switch(statusName){
      case 'Pending':
        return t('request_repair')
      case 'InProgress':
        return 'ซ่อมแซม'
      case 'NewAppointment':
        return 'นัดหมายใหม่'
      case 'Cancel':
        return t('cancel')
      case 'Success':
        return 'สำเร็จ'
      default:
        return t('pending')
    }
  }

  convertColorStatus(statusName){
    switch(statusName){
      case 'Pending':
        return '#FF9500'
      case 'InProgress':
        return '#FFCC00'
      case 'NewAppointment':
        return '#145EB3'
      case 'Cancel':
        return '#FF2D55'
      case 'Success':
        return '#2C7C0B'
      default:
        return '#C4C4C4'
    }
  }

  render() {
    return (
      <ImageBackground source={require('../../../assets/images/tree2.png')} style={{width: '100%', flex: 1, backgroundColor:'#EEFFD7'}}>
        <View style={{alignItems:'center', paddingHorizontal: 16, marginTop: 16}}>
          <View style={{flexDirection: 'row',justifyContent: 'center',}}>
            <Image style={{height: 64, width: 64,}}  source={require('../../../assets/images/GroupCheck.png')} defaultSource={require('../../../assets/images/GroupCheck.png')} />
          </View>
          <Text style={{ fontSize: 18, color: Color.green_title,marginVertical: 16,}}>{t('request_sent')}</Text>
        </View>

        <View style={{ paddingHorizontal: 16, flex: 1 }}>
          <LinearGradient colors={['#4BAF3B', '#0E5E29']} style={{borderRadius:5, padding:16}}>
            <View style={{flexDirection:'row',justifyContent:'space-between'}}>
              <Text style={{ fontSize: 18, color: '#FFFFFF'}} >{t('room')} {this.state.repair.room_no}</Text>
              <Text style={{ textAlign:'right', fontSize: 18, color: '#FFFFFF', }} >#{this.state.repair.id}</Text>
            </View>
            <Text style={{ fontSize: 14, color: '#FFFFFF', }}>{this.state.repair.project_name}</Text>
          </LinearGradient>

          <View style={{backgroundColor: '#FFFFFF',borderRadius:5,padding:16, flex: 1}}>
            <View>
              <Text style={styles.textTitle}>{t('make_appoint')}</Text>
              <View style={{ flexDirection: 'row',}}>
                <Text style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.5)', }}>{t('date')}</Text>
                <Text style={{ fontSize: 14, color: '#000000', paddingHorizontal: 10,}}>{ moment(this.state.repair.date).format('DD-MM-YYYY') }</Text>
                <Text style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.5)', }}>เวลา</Text>
                <Text style={{ fontSize: 14, color: '#000000', paddingHorizontal: 10,}}>{this.state.repair.time == null ? '' : this.state.repair.time.slice(0,-3) + ' น.' }</Text>
              </View>

              <View style={{ flexDirection: 'row',alignItems:'center',marginVertical:3}}>
                <Text style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.5)'}}>{t('status')}</Text>
                <View style={{backgroundColor: this.convertColorStatus(this.state.repair.status),height: 10,width: 10,borderRadius:5, marginHorizontal:10}}/>
                <Text style={{ fontSize: 14, color: this.convertColorStatus(this.state.repair.status)}}>{this.convertStatus(this.state.repair.status)}</Text>
              </View>
            </View>

            <View style={{borderWidth:1,marginVertical:16,borderColor:'silver'}}></View>

            <View style={{flex: 1}}>
              <Text style={styles.textTitle} >{t('information')}</Text>
              <ScrollView>
                <FlatList
                  data={this.state.repair.services}
                  renderItem={this.renderItem}
                  pagingEnabled={true}
                  extraData={this.state}
                  keyExtractor={this._keyExtractor}
                />
              </ScrollView>
            </View>

            <View style={{borderWidth:1,marginVertical:16,borderColor:'silver'}}></View>

            <View style={{ flexDirection:'row',justifyContent:'space-between'}}>
              <Text style={{ fontSize: 14, color: Color.green_title }}>{t('estimate_charge')}</Text>
              <Text style={{ textAlign: 'right', fontSize: 14, color: '#7CBB33'}}>{this.state.repair.total} {t('baht')}</Text>
            </View>
          </View>
        </View>

        <View style={{margin: 16}}>
          <CustomButton style={[styles.button_style]}
                        onPress={() => {this.props.navigation.popToTop()}}
                        title={t('back_home')} />
        </View>

        {/*<View style={{padding:16}}>
          <View style={{alignItems:'center'}}>
            <View style={{flexDirection: 'row',justifyContent: 'center',}}>
              <Image style={{height: 64, width: 64,}}  source={require('../../../assets/images/GroupCheck.png')} defaultSource={require('../../../assets/images/GroupCheck.png')} />
            </View>
            <Text style={{ fontSize: 18, color: Color.green_title,marginVertical: 16,}}>{t('request_sent')}</Text>
          </View>
          <View>
            <LinearGradient colors={['#4BAF3B', '#0E5E29']} style={{borderRadius:5, padding:16}}>
              <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                <Text style={{ fontSize: 18, color: '#FFFFFF'}} >{t('room')} {this.state.repair.room_no}</Text>
                <Text style={{ textAlign:'right', fontSize: 18, color: '#FFFFFF', }} >#{this.state.repair.id}</Text>
              </View>
              <Text style={{ fontSize: 14, color: '#FFFFFF', }}>{this.state.repair.project_name}</Text>
            </LinearGradient>
            <View style={{backgroundColor: '#FFFFFF',borderRadius:5,padding:16}}>
              <Text style={styles.textTitle}>{t('make_appoint')}</Text>
              <View style={{ flexDirection: 'row',}}>
                <Text style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.5)', }}>{t('date')}</Text>
                <Text style={{ fontSize: 14, color: '#000000', paddingHorizontal: 10,}}>{ moment(this.state.repair.date).format('DD-MM-YYYY') }</Text>
                <Text style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.5)', }}>เวลา</Text>


                <Text style={{ fontSize: 14, color: '#000000', paddingHorizontal: 10,}}>{this.state.repair.time == null ? '' : this.state.repair.time.slice(0,-3) + ' น.' }</Text>




              </View>
              <View style={{ flexDirection: 'row',alignItems:'center',marginVertical:3}}>
                <Text style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.5)'}}>{t('status')}</Text>
                <View style={{backgroundColor: this.convertColorStatus(this.state.repair.status),height: 10,width: 10,borderRadius:5, marginHorizontal:10}}/>
                <Text style={{ fontSize: 14, color: this.convertColorStatus(this.state.repair.status)}}>{this.convertStatus(this.state.repair.status)}</Text>
              </View>
              <View style={{borderWidth:1,marginVertical:16,borderColor:'silver'}}></View>
              <Text style={styles.textTitle} >{t('information')}</Text>
              <FlatList
                data={this.state.repair.services}
                renderItem={this.renderItem}
                pagingEnabled={true}
                extraData={this.state}
                keyExtractor={this._keyExtractor}
              />
              <View style={{borderWidth:1,marginVertical:16,borderColor:'silver'}}></View>
              <View style={{ flexDirection:'row',justifyContent:'space-between'}}>
                <Text style={{ fontSize: 14, color: Color.green_title }}>{t('estimate_charge')}</Text>
                <Text style={{ textAlign: 'right', fontSize: 14, color: '#7CBB33'}}>{this.state.repair.total} {t('baht')}</Text>
              </View>
            </View>
          </View>
          <View style={{marginTop:16}}>
            <CustomButton style={[styles.button_style]}
              onPress={() => {this.props.navigation.popToTop()}}
                title={t('back_home')} />
          </View>
        </View>*/}
      </ImageBackground>
    )
  }
}

const styles = {
  textTitle:{
    fontSize: 14,
    color: Color.green_title,
    marginBottom: 10
  },
  button_style: {
    backgroundColor: '#269A21',
    height: 40,
    borderRadius: 5,
    justifyContent:'center',
  }
}