import React, { Component } from 'react'
import {ScrollView, StyleSheet, Image, TouchableOpacity, Alert, PermissionsAndroid, ImageBackground, Platform} from "react-native";
import CameraRoll from "@react-native-community/cameraroll";
import {View} from "native-base";
import Text from '../../components/Text';
import { payment_detail } from '../../api/UserApi';
import ViewShot, { captureRef } from "react-native-view-shot";
import IndicatorLoading from '../../components/IndicatorLoading';
import QRCode from 'react-native-qrcode-svg';
import { t } from '../../utils/i18n';

class PaymentScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      text: '',
      payment_data: {},
      payment_id: this.props.navigation.getParam('payment_id', 'NO ITEM')
    }
    this.snapScreen = this.snapScreen.bind(this)
  }

  componentDidMount(){
    console.log('payment id ---------> ',this.state.payment_id);
    this.setState({isLoading:true})
    payment_detail(this.state.payment_id)
    .then( res => {
      this.setState({
        payment_data: res.data
      },() => {
        this.setState({isLoading: false})
      })
    })
  };

  async snapScreen() {
    try {
      if(Platform.OS == 'android'){
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
          {
            title: 'Cool Photo App Camera Permission',
            message:
              'Cool Photo App needs access to your camera ' +
              'so you can take awesome pictures.',
            buttonNeutral: 'Ask Me Later',
            buttonNegative: 'Cancel',
            buttonPositive: 'OK',
          },
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          console.log('You can use the camera');
          this.viewshot.capture()
          .then(
            uri => {
              console.log('------------> ',uri)
              return CameraRoll.saveToCameraRoll(uri,'photo')
              .then(Alert.alert(null, 'บันทึกรูปสำเร็จ',[{text: t('ok')}]))
            }
          )
        } else {
          console.log('Camera permission denied');
        }
      }else{
        this.viewshot.capture()
          .then(
            uri => {
              console.log('------------> ',uri)
              return CameraRoll.saveToCameraRoll(uri,'photo')
              .then(Alert.alert(null, 'บันทึกรูปสำเร็จ',[{text: t('ok')}]))
            }
          )
      }
    } catch (err) {
      console.warn(err);
    }

  }

  render(){
    return(
      <ImageBackground source={require('../../../assets/images/tree2.png')} style={{width: '100%', height: '100%', backgroundColor:'#EEFFD7'}}>
        <ScrollView contentContainerStyle={styles.contentContainer}>
          <View style={{flex: 1}}>
            <View style={{ alignItems: 'center', padding:20}}>
              <ViewShot style={{width: '100%',alignItems:'center'}} options={{format: "jpg", quality: 1}} ref={ref => this.viewshot = ref}>
                <View style={{backgroundColor:'white', borderRadius:10,width: '90%',alignItems:'center'}}>
                  <View style={{width: '100%',backgroundColor:'#29558D',height: 55,borderTopLeftRadius:10,borderTopEndRadius:10,alignItems:'center',justifyContent:'center'}}>
                    <Image source={require('../../../assets/images/icon_payment.png')} style={{height: 40}} resizeMode={'contain'}/>
                  </View>
                  <Image source={require('../../../assets/images/icon_promptpay.png')} style={{height: 24,marginVertical: 18}} resizeMode={'contain'}/>
                  <Text style={{fontSize: 18,color:'#00420A'}}>{t('scan_to_pay')}</Text>
                  <View style={{paddingVertical:10}}>
                    <QRCode
                      value={this.state.payment_data.qr}
                      size={140}
                      color='black'
                      backgroundColor='white'/>
                  </View>
                  <Text style={{fontSize: 12,color:'#000000'}}>ชื่อบัญชี : {this.state.payment_data.receiver_name}</Text>
                  <Text style={{fontSize: 12,color:'#000000'}}>{t('account')} : {this.state.payment_data.receiver_account}</Text>
                  <Text style={{fontSize: 10,color:'#00000080'}}>{t('ref_no')}: { this.state.payment_data.payment != null && this.state.payment_data.payment.reference}</Text>
                  <Text style={{fontSize: 10,color:'#00000080'}}>{t('ref_no')} 2 : { this.state.payment_data.payment != null && this.state.payment_data.ref2}</Text>
                  <View style={{margin: 10,height:1,width: '90%',backgroundColor:'#D7D7D7'}}/>
                  <Text style={{fontSize: 13,color:'#000000'}}>{t('account_name')}</Text>
                  <Text style={{fontSize: 24,color:'#000000'}}>{this.state.payment_data != {} && Intl.NumberFormat().format(this.state.payment_data.total_cost)} {t('baht')}</Text>
                  <View style={{margin: 10,height:1,width: '100%',backgroundColor:'#D7D7D7'}}/>
                  <Text style={{fontSize: 10,color:'#00000080',marginBottom: 10}}>Accepts all banks | {t('support_all_bank')}</Text>
                </View>
              </ViewShot>
            </View>
            <View style={{alignItems: 'center', paddingHorizontal:20}}>
              <TouchableOpacity style={{backgroundColor:'#269A21',width: '90%',height: 40,justifyContent:'center',alignItems:'center',borderRadius:5}} onPress={this.snapScreen}>
                <Text style={{color:'white',fontSize:14}}>{t('save')}</Text>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
      </ImageBackground>
    )
  }
}


const styles = StyleSheet.create({
  circleShapeView: {
    width: 32,
    height: 32,
    borderRadius: 100,
    justifyContent: 'center',
    alignItems: 'center'
  },
  contentContainer: {
    paddingVertical: 0,
    flex:1
  },
  colorTextPayment: {
    color: '#7CBB33'
  }
})

export default PaymentScreen
