import React, { Component } from 'react';
import { View, Text, Image, TouchableOpacity, Picker, TextInput, FlatList } from 'react-native';
import AppImages from '../../../constants/styles/images';
import AppStyles from '../../../constants/styles/styles';
import { connect } from 'react-redux';
import { fetchSubProduct } from '../../data/actions/product';
import { fetchTransaction } from '../../data/actions/transaction';
import { sub } from 'react-native-reanimated';

class Pulsa_PrabayarScreen extends Component {

    constructor(props) {
        super(props)
        this.state = {
            subProduct: '',
            customerNumber: '',
            productCode: ''
        }
    }

    onPickerValueChange = async (item) => {
        await this.props.fetchSubProduct(this.props.credential, item)
        console.log(this.props.subproduct)
    }

    setUpLayanan(index) {
        const subProduct = (this.props.subProduct[index].item !== null) ? this.props.subProduct[index].item : ''
        const code = this.props.subProduct[index].code

        console.log(subProduct)
        this.setState((prevState) => (
            {
                ...prevState,
                subProduct: subProduct,
                productCode: code
            }
        ))
    }

    showSubProduct() {
        if (this.state.subproduct !== null) {
            return <FlatList
                data={this.props.subproduct}
                renderItem={({ item, index }) => {
                    return (
                        <View style={{ borderWidth: 1, paddingHorizontal: 16, paddingVertical: 8, borderRadius: 8, marginTop: 8, width: '90%' }}>
                            <TouchableOpacity onPress={() => this.setUpLayanan(index)}>
                                <Text style={{ marginTop: 8 }}>
                                    {(item.item == null) ? '' : item.item}
                                </Text>
                                <Text style={{ marginTop: 8 }}>
                                    {(item.price == null) ? '' : item.price}
                                </Text>
                            </TouchableOpacity>
                        </View>
                    )
                }}
                keyExtractor={(item, index) => index.toString()}
            />
        }
    }

    showPulsaprabayar() {
        // console.log('+++++++++++', this.props.pulsaprabayar)
        if (this.props.product !== null) {
            return this.props.product.map((item) => {
                return <Picker.Item label={item.code} value={item.code} />
            })
        }
    }

    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center' }}>
                <View style={{ flex: 7, backgroundColor: '#FFF', alignItems: 'center' }}>
                    <Picker
                        mode="dialog"
                        style={{ marginTop: '5%', width: '90%', height: '10%' }}
                        selectedValue={this.state.subProduct}
                        onValueChange={this.onPickerValueChange}>
                        <Picker.Item label="Pilih Provider" value="" />
                        {this.showPulsaprabayar()}
                    </Picker>
                    <TextInput
                        style={{
                            borderWidth: 1, paddingHorizontal: 16, paddingVertical: 8, borderRadius: 8, marginTop: 8, width: '90%'
                        }}
                        placeholder='No HP'
                        value={this.state.customerNumber}
                        onChangeText={(customerNumber) => this.setState({ customerNumber })}
                    />
                    {this.showSubProduct()}
                    <TouchableOpacity onPress={async () => {
                        {/* await this.props.createTransaction(this.props.credential, this.state.customerNumber, this.state.productCode);
                                if (this.props.transaction != null) */}
                        this.props.navigation.navigate('Checkout')
                    }} >
                        <Text style={{ fontSize: 20 }}>Lanjut </Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        credential: state.authReducer.credential,
        product: state.productReducer.product,
        subproduct: state.productReducer.subproduct
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        fetchSubProduct: (token, subProduct) => dispatch(fetchSubProduct(token, subProduct)),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Pulsa_PrabayarScreen);