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



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


      async componentDidMount(){
        const token = await AsyncStorage.getItem('token')
        // 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
            const {id, title, image, desc} = res
            setTimeout(()=>{this.setState({loading:false})},1000)
            this.setState({id:id, title:title, desc:desc, image:image})
          })
          .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>
                            <Image style={styles.img} source={{uri:this.state.image}} />
                                <Text
                                    style={styles.text}>
                                       {`${this.state.title}`}
                                            </Text>
                                            <Text style={styles.text}>
                                                {`${this.state.desc}`}
                                            </Text>
                                                </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' }
})