import React, { Component } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import Image from 'react-native-fast-image'
import ImageBackground from 'react-native-fast-image'
import Text from '../../components/Text';
import {getObjectMessageByID} from '../../api/UserApi'
import moment from 'moment';
import { t } from '../../utils/i18n'
import HTML from 'react-native-render-html';
//import 'moment/locale/th';
//moment.locale('th');

export default class MessageObjectDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      object_id: this.props.navigation.getParam('object_id','no-id'),
      object_data: {}
    };
    this.statusText = this.statusText.bind(this)
    this.statusColor = this.statusColor.bind(this)
  }

  componentDidMount() {
    this.getObjectDetail()
  }

  componentWillUnmount() {
    if(this.props && this.props.navigation && this.props.navigation.state && this.props.navigation.state.params && this.props.navigation.state.params.getNotification){
      this.props.navigation.state.params.getNotification()
    }
  }

  getObjectDetail(){
    getObjectMessageByID(this.state.object_id)
    .then(res => {
      console.log('check response ============> ',res)
      if(res.ok){
        this.setState({
          object_data: res.data.data
        })
      }
    })
  }

  statusColor(status){
    switch(status){
      case 'PENDING':
        return '#C4C4C4'
      case 'ERROR':
        return '#FF662E'
      case 'WAIT_PICKUP':
        return '#2C7C0B'
      case 'RECEIVE':
        return '#2C7C0B'
      default:
        return '#FF662E'
    }
  }

  statusText(status){
    switch(status){
      case 'PENDING':
        return t('waiting_for_pickup')
      case 'ERROR':
        return t('contact_front_desk')
      case 'WAIT_PICKUP':
        return t('awaiting_payment')
      case 'RECEIVE':
        return t('paid')
      default:
        return t('contact_front_desk')
    }
  }

  render() {
    return (
      <ImageBackground source={require('../../../assets/images/tree2.png')} style={{width: '100%', height: '100%', backgroundColor:'#EEFFD7'}}>
        <View style={{flex:1,padding:16}}>
          <View style={{borderRadius:5,backgroundColor:'black'}}>
            <Image source={{uri:this.state.object_data.image_past}} style={{height: 184,width: '100%'}} resizeMode={'contain'}/>
          </View>
          <View style={{marginTop:10,padding:16,borderRadius:5,backgroundColor:'white'}}>
            <HTML html={this.state.object_data.parcel_name} baseFontStyle={{fontFamily: 'Prompt-Regular', color: '#269A21'}} />
            {/* <Text style={styles.textTitle}>{this.state.object_data.parcel_name}</Text> */}
            <View style={{alignItems:'center',flexDirection:'row'}}>
              <Text style={styles.textGray}>{t('status')}</Text>
              <View style={{marginHorizontal:10,height: 10,width: 10,borderRadius:5,backgroundColor:this.statusColor(this.state.object_data.status)}}/>
              <Text>{this.statusText(this.state.object_data.status)}</Text>
            </View>
            <View style={{flexDirection:'row'}}>
              <Text style={styles.textGray}>{t('date')}</Text>
              <Text style={styles.textBaclk}>  {moment(this.state.object_data.updated_at).format('DD MMMM YYYY')}</Text>
              <Text style={styles.textGray}>  {t('times')}</Text>
              <Text style={styles.textBaclk}>  {moment(this.state.object_data.updated_at).format('HH:mm')}</Text>
            </View>
            <View style={{marginVertical:16,height: 1,backgroundColor:'silver',width: '100%'}}/>
            <Text style={styles.textTitle}>{t('consignee')}</Text>
            <Text style={styles.textBaclk}>{this.state.object_data.customer_name != null && this.state.object_data.customer_name}</Text>
            {/*<View style={{marginVertical:16,height: 1,backgroundColor:'silver',width: '100%'}}/>
            <View style={{flexDirection:'row',justifyContent:'space-between'}}>
              <View>
                <Text style={styles.textTitle}>รหัสยืนยัน</Text>
                <Text>* ใช้รหัสนี้เพื่อยืนยันการรับของ *</Text>
              </View>
              <View style={{height: 40,borderWidth:1,justifyContent:'center',alignItems:'center', borderColor:'#269A21',paddingHorizontal:10}}>
                <Text style={{color:'#269A21',fontSize:20}}>{this.state.object_data.code}</Text>
              </View>
            </View> */}
          </View>
          <TouchableOpacity style={{marginTop:16,height: 40,width: '100%',backgroundColor:'#145EB3',justifyContent:'center',alignItems:'center',borderRadius:5}}
                      onPress={() => {this.props.navigation.navigate('Signature',{object_id: this.state.object_id})}}>
            <Text style={{color:'white'}}> {t('receive_code')} </Text>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  textTitle:{
    fontSize:14,
    color: '#269A21'
  },
  textBaclk:{
    color: '#000000',
    fontSize: 14
  },
  textGray:{
    color: '#00000080'
    ,fontSize: 14
  }
})
