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

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

  }, [])
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Image source={require('../assets/splash1.png')} style={styles.images}></Image>
      </View>
      <AppContainer>
        <Text style={styles.auctionHeading}>Auctions List</Text>
        <ScrollView>
          <View>
            {auctions.map((auction) => {
              return(
                <AppAuctionItem label={auction.name} expire={auction.expire_date} onPress = {() =>
                  navigation.navigate("AuctionDetailScreen", {
                  auctionObject: auction})
                }/>
              )
            })}
          </View>
      </ScrollView>
      </AppContainer>
      <AuctionBottomTab/>
    </View>
  );
};
export default HomeAuctionScreen;

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