import * as React from 'react';
import { useEffect, useState } from 'react';
import { SafeAreaView, ScrollView, TouchableOpacity, Button, View, Text, Image, Alert, Linking, Platform } from 'react-native';
import { connect } from "react-redux";
import CustomHeader from '../../../components/header.js';
import Assets from '../../../components/assets.manager.js';
import Elements from '../../../components/elements.js';
import Theme from '../../../components/theme.style.js';
import Icon from '../../../components/icons.js';
import REQUEST from '../../../components/api';
import DB from '../../../components/storage';
import { openComposer } from 'react-native-email-link'
import CustomSafeArea from '../../../components/safeArea.component.js';


class TransactionDetails extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    loading: false,
    ratesubmitted: false,
    rating: 0,
    session: '',
    transaction: [],
    umail: "",
    cn: ""
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {

  }

  init = async () => {
    this.props.route.params.data.is_feedback_disabled = false
    let session = await DB.session()
    let user_profile = await DB.profile()
    this.setState({ cn: user_profile.data.card_number, transaction: this.props.route.params.data, session: session })
  }

  renderRatings = (rating, disabled) => {
    return [1, 2, 3, 4, 5].map((rate, i) => {
      return (
        <TouchableOpacity disabled={disabled} key={i} style={{flex: 1, alignSelf: 'center', padding: 1}} activeOpacity={rating > 0 || !this.state.ratesubmitted ? 0.5 : 1 } onPress={this.state.transaction.rating == 0 && !this.state.ratesubmitted ? () => this.setState({ rating: rate }) : null} >
          <Icon.AntDesign name={rating >= rate ? "star" : "staro"} color={rating > 0 || !this.state.ratesubmitted ? Theme.colors.yellow : Theme.colors.darkerGray} size={40} />
        </TouchableOpacity>
      )
    })
  }

  onSubmit = async () => {
    if (this.state.transaction.is_feedback_disabled) return false
    this.setState({ loading: true })
    REQUEST('transaction_rate', 'post', {
      Authorization: this.state.session.token,
      Accept: 'application/json',
      card_number: this.state.session.user.card_number
    }, {}, {
      trans_num: this.state.transaction.trans_num,
      rate: this.state.rating
    }, (result) => {
      this.setState({ loading: false, rating: 0, ratesubmitted: true })
      Platform.OS == 'ios' ? setTimeout(() => {
        Alert.alert(result.message, 'Rating has been submitted')
      }, 300) :
      Alert.alert(result.message, 'Rating has been submitted')
    }, (error) => {
      this.setState({ loading: false })
    })
  }

  checkPendingTransaction = () => {
    if(this.state.rating > 0) {
      Alert.alert(
        '',
        'You have an unsaved rating, are you sure you want to navigate back?',
        [
          {
            text: 'No',
            style: 'cancel',
          },
          {
            text: 'Yes',
            onPress: async () => {
              this.props.route.params?.onBackPress()
              this.props.navigation.goBack()
            },
          },
        ],
        {cancelable: true},
      );
    } else {
      this.props.route.params?.onBackPress()
      this.props.navigation.goBack()
    }
  }

  render() {
    return (
      <CustomSafeArea>
        <Elements.loader visible={this.state.loading} />
        <CustomHeader 
          title={this.state.transaction.date} 
          onBackPress={() => this.checkPendingTransaction()} 
          menu={false} 
          backscreen="MyProfile" 
          navigation={this.props.navigation} 
        />
        <View style={{flex: 1}}>
          <View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}>
            <View style={{flex: 2}}>
              <Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Sales Invoice Number</Text>
            </View>
            <View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
              <Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>{this.state.transaction.trans_num || 455826}</Text>
            </View>
          </View>
          <View style={{padding: 10, paddingLeft: 13,paddingRight: 13}}>
            <Text style={{fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text }}>{this.state.transaction.station || 'APP'}</Text>
          </View>
          <Elements.transactiontable 
            textColor={this.props.app_theme?.theme.colors.text}
            isDarkMode={this.props.app_theme?.theme.dark}
            data={this.state.transaction} />
          <View style={{alignItems: 'center'}}>
            <Text style={{padding: 20, color: Theme.colors.darkGray}}>Rate Your Experience</Text>
            <View style={{flexDirection: 'row', alignItems: 'center', width: '60%'}}>
              {this.renderRatings(this.state.rating ? this.state.rating : this.state.transaction.rating, this.state.transaction.is_feedback_disabled || this.state.transaction.is_disabled)}
            </View>
            <TouchableOpacity activeOpacity={1} onPress={() => this.state.transaction.is_feedback_disabled || this.state.transaction.is_disabled || this.state.ratesubmitted || this.state.rating == 0 ? null : this.onSubmit()} style={{width: '90%', padding: 12, alignItems: 'center', backgroundColor: this.state.rating == 0 || this.state.ratesubmitted ? "" : Theme.colors.primary, borderColor: Theme.colors.primary, borderWidth: 2, borderRadius: 10, marginTop: 15}}>
              <Text style={{color: this.state.rating == 0 ? Theme.colors.primary : "#fff", fontSize: 16, fontFamily: 'Arial'}}>Submit Rating</Text>
            </TouchableOpacity>
            {this.state.transaction.is_feedback_disabled ? null :
            <TouchableOpacity disabled={this.state.transaction.is_disabled} onPress={async () => {
              await REQUEST("contact_us", "get", {}, {}, {}, async (res) => {
                if(res.status == 1 && res.data){
                  openComposer({
                    to: res.data.contact_email_address_mobile,
                    subject: `Mobile App Feedback:\nCN${cn}`,
                    body: ''
                  })
                } else {
                  console.log(res.message, res.data)
                }
              }
              )   
            }} style={{width: '90%', padding: 12, alignItems: 'center', marginTop: 15}}>
              <Text style={{color: Theme.colors.primary, fontSize: 16, fontFamily: 'Arial'}}>Send Feedback</Text>
            </TouchableOpacity>}
          </View>
        </View>
      </CustomSafeArea>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(TransactionDetails)

// export default function TransactionDetails(navigation) {

//   const [loading, setloading] = useState(false)
//   const [ratesubmitted, setratesubmitted] = useState(false)
//   const [rating, setrating] = useState(0);
//   const [session, setsession] = useState('');
//   const [transaction, settransaction] = useState([]);
//   const [umail, setumail] = useState("")
//   const [cn, setcn] = useState("")

//   const init = async () => {
//     navigation.route.params.data.is_feedback_disabled = false
//     let session = await DB.session()
//     let user_profile = await DB.profile()
//     await setcn(user_profile.data.card_number)
//     await settransaction(navigation.route.params.data)
//     await setsession(session)
//     console.log("transaction", transaction, session)
//   }

//   useEffect(() => {
//     init()
//   }, [])

//   const renderRatings = (rating, disabled) => {
//     return [1, 2, 3, 4, 5].map((rate, i) => {
//       return (
//         <TouchableOpacity disabled={disabled} key={i} style={{flex: 1, alignSelf: 'center', padding: 1}} activeOpacity={rating > 0 || !ratesubmitted ? 0.5 : 1 } onPress={transaction.rating == 0 && !ratesubmitted ? () => setrating(rate) : null} >
//           <Icon.AntDesign name={rating >= rate ? "star" : "staro"} color={rating > 0 || !ratesubmitted ? Theme.colors.yellow : Theme.colors.darkerGray} size={40} />
//         </TouchableOpacity>
//       )
//     })
//   }

//   const onSubmit = async () => {
//     if (transaction.is_feedback_disabled) return false
//     setloading(true)
//     REQUEST('transaction_rate', 'post', {
//       Authorization: session.token,
//       Accept: 'application/json',
//       card_number: session.user.card_number
//     }, {}, {
//       trans_num: transaction.trans_num,
//       rate: rating
//     }, function(result){
//       console.log(result)
//       setloading(false)
//       setrating(0)
//       Platform.OS == 'ios' ? setTimeout(() => {
//         Alert.alert(result.message, 'Rating has been submitted')
//       }, 300) :
//       Alert.alert(result.message, 'Rating has been submitted')
//       setratesubmitted(true)
//     }, function(error){
//       setloading(false)
//       console.log(error)
//     })
//   }

//   const checkPendingTransaction = () => {
//     if(rating > 0) {
//       Alert.alert(
//         '',
//         'You have an unsaved rating, are you sure you want to navigate back?',
//         [
//           {
//             text: 'No',
//             style: 'cancel',
//           },
//           {
//             text: 'Yes',
//             onPress: async () => {
//               navigation.route.params?.onBackPress()
//               navigation.navigation.goBack()
//             },
//           },
//         ],
//         {cancelable: true},
//       );
//     } else {
//       navigation.route.params?.onBackPress()
//       navigation.navigation.goBack()
//     }
//   }

//   return (
//     <SafeAreaView style={{flex: 1}}>
//       <Elements.loader visible={loading} />
//       <CustomHeader 
//         title={transaction.date} 
//         onBackPress={() => checkPendingTransaction()} 
//         menu={false} 
//         backscreen="MyProfile" 
//         navigation={navigation} 
//       />
//       <View style={{flex: 1}}>
//         <View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}>
//           <View style={{flex: 2}}>
//             <Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Sales Invoice Number</Text>
//           </View>
//           <View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
//             <Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>{transaction.trans_num || 455826}</Text>
//           </View>
//         </View>
//         <View style={{padding: 10, paddingLeft: 13,paddingRight: 13}}>
//           <Text style={{fontFamily: 'Arial', color: "black"}}>{transaction.station || 'APP'}</Text>
//         </View>
//         <Elements.transactiontable data={transaction} />
//         <View style={{alignItems: 'center'}}>
//           <Text style={{padding: 20, color: Theme.colors.darkGray}}>Rate Your Experience</Text>
//           <View style={{flexDirection: 'row', alignItems: 'center', width: '60%'}}>
//             {renderRatings(rating ? rating : transaction.rating, transaction.is_feedback_disabled || transaction.is_disabled)}
//           </View>
//           <TouchableOpacity activeOpacity={1} onPress={() => transaction.is_feedback_disabled || transaction.is_disabled || ratesubmitted || rating == 0 ? null : onSubmit()} style={{width: '90%', padding: 12, alignItems: 'center', backgroundColor: rating == 0 || ratesubmitted ? "" : Theme.colors.primary, borderColor: Theme.colors.primary, borderWidth: 2, borderRadius: 10, marginTop: 15}}>
//             <Text style={{color: rating == 0 ? Theme.colors.primary : "#fff", fontSize: 16, fontFamily: 'Arial'}}>Submit Rating</Text>
//           </TouchableOpacity>
//           {transaction.is_feedback_disabled ? null :
//           <TouchableOpacity disabled={transaction.is_disabled} onPress={async () => {
//             await REQUEST("contact_us", "get", {}, {}, {}, async (res) => {

//               if(res.status == 1 && res.data){

//                 openComposer({
//                   to: res.data.contact_email_address_mobile,
//                   subject: `Mobile App Feedback:\nCN${cn}`,
//                   body: ''
//                 })
                
//               }else{
//                   console.log(res.message, res.data)
//               }
//             }
//             )   
//           }} style={{width: '90%', padding: 12, alignItems: 'center', marginTop: 15}}>
//             <Text style={{color: Theme.colors.primary, fontSize: 16, fontFamily: 'Arial'}}>Send Feedback</Text>
//           </TouchableOpacity>}
//         </View>
//       </View>
//     </SafeAreaView>
//   );
// }