import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {View, StyleSheet, Text, ScrollView} from 'react-native';
import { AppContainer } from '../container/container';
import themeColors from '../assets/colors';
import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
import { AppStakeItem } from '../components/auction.stake.component';

const  UserBidScreen =  ({navigation}) => {
  const [bids, setBids] = useState([]);
  useEffect(() => {
    axios.get("http://127.0.0.1:8085/bids")
      .then( async function (response) {
        setBids(response.data);
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      })

  }, [])
  return (
    <View style={styles.container}>
      <AppContainer>
        <Text style={styles.auctionHeading}>My Bids</Text>
        <ScrollView>
        {bids.map((bid) => {
          return(
            <AppStakeItem bid={bid} />
          )
        })}
      </ScrollView>
      </AppContainer>
      <AuctionBottomTab/>
    </View>
  );
};
export default UserBidScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff'
  },
  header: {
    height: '35%',
    marginBottom: 25,
    backgroundColor : themeColors.PRIMARY_COLOR
  },
  btnRowContainer: {
    maxHeight: 100
  },
  contentContainer: {
    flex: 1,
    flexDirection: 'row',
    margin: 20
  },
  auctionHeading: {
    fontSize: 24,
    fontWeight: 'bold',
    color: themeColors.SECONDARY_COLOR
  }
})