ComponentProfilOrder

import React, { Component } from 'react'
import { Text, View, Image, Linking, Platform, TouchableOpacity } from 'react-native'
import { Grid, Section, Block } from 'react-native-responsive-layout'
import { Avatar } from 'react-native-paper'
import Icon from 'react-native-vector-icons/FontAwesome'
import { withNavigation } from 'react-navigation'
import styles from '../styles/StyleProfilOrder'
import {
  responsiveFontSize
} from 'react-native-responsive-dimensions'
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
import API from '../../../../services/api'
import AsyncStorage from '@react-native-community/async-storage'
import Config from 'react-native-config'

class ComponentProfilOrder extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  //  Linking call
  makeCall = (vendor_phone_number) => {
    let phoneNumber = ''
    let num = vendor_phone_number

    if (Platform.OS === 'android') {
      phoneNumber = `tel:${num}`
    } else {
      phoneNumber = `telprompt:${vendor_phone_number}`
    }

    Linking.openURL(phoneNumber)
  }

  // SMS
  sms(vendor_phone_number) {
    const phoneNumber = vendor_phone_number
    const url =
      Platform.OS === 'android'
        ? `sms:${phoneNumber}?body=Hi Ditunggu Orderannya ya`
        : `sms:${phoneNumber}`
    Linking.canOpenURL(url)
      .then((supported) => {
        if (!supported) {
          console.log('Unsupported url: ' + url)
        } else {
          return Linking.openURL(url)
        }
      })
      .catch((err) => console.error('An error occurred', err))
  }

  /**
   * Add Tracking for customer when customer press button call or chat
   * @param {*} action
   */
  async addTracking(action) {
    API.post('order/customer-actions/customeraction',
      {
        orderId: this.props.orderDataDetail.id,
        action: action
      },
      {
        headers: {
          Authorization:
            'Bearer ' + (await AsyncStorage.getItem(Config.ACCESS_TOKEN))
        }
      }
    )
      .then((response) => {
        console.log('Response from tracking ', response)
      })
      .catch((error) => {
        console.log('Error from tracking ', error.response)
      })
  }

  render() {
    const { orderDataDetail } = this.props
    return (
      <Grid>
        <Section>
          <Block size="100%">
            <View style={styles.viewRow}>

              <Avatar.Image
                size={64}
                style={styles.avatarImage}
                source={{
                  uri: `https://storage.googleapis.com/halojasa-content-production/${this.props.orderDataDetail.user_vendor_profile_picture}`
                }}
              />
              <View style={styles.viewColumn}>
                <Text style={styles.textName}>
                  {' '}
                  {orderDataDetail.user_vendor_full_name}{' '}
                </Text>
                <View style={styles.viewRow}>
                  <Icon
                    name="star"
                    style={{
                      fontSize: responsiveFontSize(2),
                      color: 'orange',
                      marginLeft: 18
                    }}
                  />
                  <Text style={styles.textRate}>
                    {!orderDataDetail.vendor_data ? 'Loading' : orderDataDetail.vendor_data.vendor_rating.toPrecision(2)}
                  </Text>
                </View>
              </View>
              <View style={styles.viewRowButton}>
                <TouchableWithoutFeedback
                  onPress={() => {
                    this.addTracking('chat')
                    this.props.navigation.navigate('ChatScreen', {
                      orderDataDetail: orderDataDetail,
                      imageChat: `https://storage.googleapis.com/halojasa-content-production/${this.props.orderDataDetail.user_vendor_profile_picture}`
                    })
                  }
                  }
                >
                  <View style={styles.viewButtonContact}>
                    <Image
                      source={require('assets_dir/images/chat.png')}
                      style={styles.imgChat}
                      resizeMode={'contain'}
                    />
                    <Text style={styles.textContact}>Chat</Text>
                  </View>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback
                  onPress={() => {
                    this.addTracking('call')
                    this.makeCall(this.props.vendorData.phoneNumber)
                  }}
                >
                  <View style={styles.viewButtonContactGreen}>
                    <Image
                      source={require('assets_dir/images/ic_call2.png')}
                      style={styles.imgChat}
                      resizeMode={'contain'}
                    />
                    <Text style={styles.textContact}>CALL</Text>
                  </View>
                </TouchableWithoutFeedback>
              </View>
            </View>
          </Block>
        </Section>
        <View style={styles.line}/>
        <View style={styles.viewRowTemp}>
          <View style={styles.viewContent}>
            <View>
              <Image
                resizeMode={'contain'}
                source={require('assets_dir/images/icon_termometer.png')}
                style={styles.imageIcon}
              />
            </View>
            <View>
              <View>
                <Text style={styles.textTemp}>Suhu Badan Hari Ini</Text>
              </View>
              <View style={styles.viewPurpleBadge}>
                <Text style={styles.textBadge}>{this.props.orderDataDetail.BodyTemperature ? this.props.orderDataDetail.BodyTemperature.temperature: 'Loading ..' } °C</Text>
              </View>
            </View>
            <View>
              <TouchableOpacity
                onPress={() => this.props.navigation.navigate('TemperatureScreen', {bodyTemperature: this.props.orderDataDetail.BodyTemperature})}
                disabled={this.props.orderDataDetail.BodyTemperature ? false : true}
                activeOpacity={0,6}>
                <View style={styles.viewButtonPurple}>
                  <Text style={styles.textShow}>
                    {this.props.orderDataDetail.BodyTemperature ? 'Show' : 'Loading'}
                  </Text>
                  <Icon
                    name="angle-right"
                    style={styles.iconAngle}
                  />
                </View>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <View style={styles.separate} />
      </Grid>
    )
  }
}


export default withNavigation(ComponentProfilOrder)