import React, { Component } from 'react';
import {StyleSheet, View, Text, TextInput, ActivityIndicator,FlatList, Image, ScrollView } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { Button, CardItem, Card, Left } from 'native-base'
import Axios from 'axios';



class Promotions extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            renders: [],
            id:'',
            treatment_id: '',
            title: '',
            desc: '',
            image:'',
            status:'',
            token: '',

        }
    }


      async componentDidMount(){
        const token = await AsyncStorage.getItem('token')
        headers = {'Authorization': 'Bearer ' + token }
        this.makeRemoteRequest();
  }
    makeRemoteRequest = () => {

        // api profile
        const url = 'http://192.168.56.1/vzuu/public/api/promotions'
        // headers = {'Authorization': 'Bearer ' + token }
        fetch(url, headers, {method:'GET'})
          .then(data=>data.json())
          .then(res=> {
              console.log(res.results.promotions);
            //  dari selesai fetching api profile

            setTimeout(()=>{this.setState({loading:false})},1000)
            this.setState({
                data: res.results.promotions,
                renders: res.results.promotions.data,
            })
            console.log(this.state);
          })
          .catch(err=>console.warn({err}))
      }


//      componentDidMount(){
//     const url = \'https://gist.githubusercontent.com/mahardika404/a48b4a2da23e2da0ecfe15c5979c91e8/raw/d3ce69eed5aab573c49e44acc20f7278a3fbc63a/test.json\'
//     fetch(url, {method:\'GET\'})
//       .then(data=>data.json())
//       .then(res=> {
//         //  dari selesai fetching api profile
//         const {id, name, profile, role} = res
//         setTimeout(()=>{this.setState({loading:false})},2000)
//         this.setState({id:id, name:name, profile:profile, role:role})
//       })
//       .catch(err=>console.warn({err}))
//   }



    render() {

        return(
                <ScrollView>
                    <View style={{ padding: 14, }}>
                        <Card>
                        <FlatList
                                    data={this.state.renders}
                                    renderItem={({ item }) => (
                            <Text>{item.image}</Text>
                                        // <Image style={styles.img} source={{uri:item.image}} />

                                    )}
                                />
                                 </Card>
                                                            {/* <Card>
                                        <Image style={styles.img} source={{uri:this.state.profile}} />
                                            <Text
                                                style={styles.text}>
                                                {`${this.state.name}`}
                                                        </Text>
                                                        <Text style={styles.text}>
                                                            {`${this.state.role}`}
                                                        </Text>
                                                            </Card> */}
                                            </View>
                                        </ScrollView>
        )
    }
}

export default Promotions;
const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    img: {width: 370, height: 200},
    text: { fontSize: 18, fontWeight:'bold', color: '#E91E63', alignItems: 'center', justifyContent: 'center' }
})