import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  Left,
  right,
  ScrollView,
  AsyncStorage,
  TouchableOpacity,
  View,
  ToastAndroid,
} from 'react-native';
import axios from 'axios';
import DeviceInfo from 'react-native-device-info';
import { StackActions, NavigationActions } from 'react-navigation';
import jsSHA512 from 'js-sha512';
import moment from 'moment';
import { BASE_URL, COLOR } from 'app/src/config/variable.js';

// Relative Path
// import BeritaItem from '../components/BeritaItem.js';
// Absolute Path
import OprItem from 'app/src/components/OprItem.js';

export default class Transaksi extends Component {
  constructor(props) {
    super(props);

    this.state = {
      ApiType: 'GetVoc',
      DeviceId: DeviceInfo.getUniqueID(),
      UserName: '',
      Password: '',
      DateTime: moment().format("YYYYMMDDHHmmss"),
      Signature: jsSHA512.hmac(DeviceInfo.getUniqueID(), moment().format("YYYYMMDDHHmmss") + 'GetVoc'),
      Opr: this.props.navigation.state.params.opr,
      pricelist: [],
      Msisdn: '',
    }
  }

  detailBerita() {
    alert('detail berita');
  }

  getMovies() {
    const movies = axios.get('https://facebook.github.io/react-native/movies.json');
    console.error('test')
  }

  async componentDidMount() {

    const hmac = jsSHA512.hmac(this.state.DeviceId, this.state.DateTime + this.state.ApiType);
    this.setState({Signature: hmac});

    const getList = await axios.post(BASE_URL, this.state);

    if (getList.data.ResponseCode == '000') {
      this.setState({pricelist: getList.data.Data})
    }else {
      alert(getList.data.Messages);
    }

    console.warn(JSON.stringify(getList.data));
  }

  async beliPulsa(vtype) {
    if (this.state.Msisdn === ""){
      ToastAndroid.show("No. HP wajib di isi", ToastAndroid.SHORT);
      return false;
    }

    this.setState({
      ApiType: 'TOPUP',
      Product: vtype,
    })

  //  const token = await AsyncStorage.getItem("token");
    const hmac = jsSHA512.hmac(this.state.DeviceId, this.state.DateTime + this.state.ApiType);
    this.setState({Signature: hmac});

    const postBeliPulsa = await axios.post(BASE_URL,this.state);
    if (postBeliPulsa.data.ResponseCode == '000'){

    }else{
      ToastAndroid.show(postBeliPulsa.data.Messages, ToastAndroid.SHORT);
    }

    console.warn(JSON.stringify(postBeliPulsa.data));
  }

  render() {
    const that = this;
    const {navigate} = this.props.navigation;
    return (
      <View style={{flex: 1, backgroundColor: 'blue'}}>
        <View style={{flexDirection: 'row', flex: 0.10, alignSelf: 'center'}}>
            <Text style={{fontSize: 20, fontWeight: 'bold', paddingLeft: 10, paddingTop:5}}></Text>
            <Text style={{fontSize: 20, fontWeight: 'bold', paddingTop:5}}>{this.state.Opr}</Text>
        </View>
        <View style={{flexDirection: 'row', flex: 0.10}}>
              <TextInput
                style={{width: '100%', fontSize:20, height: 50, backgroundColor: '#F5FCFF'}}
                placeholder="Masukkan Nomor Yang Diisi"
                keyboardType='numeric'
                value={this.state.Msisdn}
                onChangeText={(text) => this.setState({Msisdn: text})}
              />
        </View>
        <View style={{flex: 0.80, backgroundColor: 'white'}}>
          <ScrollView>
              {this.state.pricelist.map(function(value, index) {
              return (
                <TouchableOpacity
                  key={index}
                  style={styles.priceItem}
                  onPress={() => navigate('DetilPage', {vtype: value.vtype, opr: this.state.Opr, msisdn: this.state.Msisdn, ket: value.ket})}
                  >

                 <Text style={{fontSize: 15, fontWeight: 'bold', paddingLeft: 10, paddingTop:5, color:'blue'}}>{value.ket}</Text>
                 <Text style={{fontSize: 15, fontWeight: 'bold', paddingLeft: 10, paddingTop:5, color:'green', textAlign: 'right'}}>Rp. {value.harga1}</Text>
                </TouchableOpacity>
              )
            })}
          </ScrollView>
         </View>
        </View>
    );
  }
}

Transaksi.navigationOptions = {
  //header: null
  title: "PILIH NOMINAL"
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  kolom_menu: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  priceItem:{
    borderBottomWidth : 2,
    borderBottomColor : '#ccc',
    padding : 10,
  }
});