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

const  AuctionDetailScreen =  ({route, navigation}) => {
  const [auction, setAuction] = useState({bids: []});
  const [bids, setBids] = useState([]);
  console.log(route.params.auctionObject.bids);
  useEffect(() => {
    setAuction(route.params.auctionObject);
  }, [])
  useEffect(() => {
    setBids(auction.bids)
  }, [auction])
  const handleAddBid = (bidPrice) => {
    const bidObj = {
        id: 0,
        name: auction.name,
        owner: auction.owner,
        bidprice: bidPrice
    }
    const url = "http://127.0.0.1:8085/bids/" + auction._id
    axios.post(url, bidObj)
    .then( async function (response) {
      console.log(response.data);
      if (response.data.message === 'Created') {
        const successMsg = Toast.show('Your bid has been placed successfully', {
          duration: Toast.durations.LONG,
        });
        setTimeout(function hideToast() {
          Toast.hide(successMsg);
        }, 1000);
        navigation.navigate('AuctionHomeScreen');
      } else {
        const errMsg = Toast.show('Bid Creation Failed', {
          duration: Toast.durations.LONG,
        });
        setTimeout(function hideToast() {
          Toast.hide(errMsg);
        }, 1000);
      }
    })
    .catch(function (error) {
      const errMsg = Toast.show('Bid Creation Failed', {
        duration: Toast.durations.LONG,
      });
      setTimeout(function hideToast() {
        Toast.hide(errMsg);
      }, 1000);
    });
  }
  return (
    <View style={styles.wrapper}>
      <View style={styles.header}>
        <AppCarousel/>
      </View>
      <View style={styles.container}>
        <AppContainer>
          <View style={styles.titleContent}>
            <Text style={styles.auctionHeading}>{auction.name}</Text>
            <View style={styles.lotContainer}>
              <Text style={styles.auctionText}>Starting Price : </Text>
              <View style={styles.lot}><Text style={styles.lotText}>{auction.starting_price}</Text></View>
            </View>
          </View>
          <Text style={styles.auctionText}>Last Stakes</Text>
          <ScrollView horizontal style={{height: 100}}>
            <View style={styles.stakesContainer}>
              {bids.map((bid) => {
                return(
                  <AppStakeItem bid={bid} />
                )
              })}
            </View>
        </ScrollView>
        <AppAddBid onPress={(bidPrice) => handleAddBid(bidPrice)}/>
        </AppContainer>
        <AuctionBottomTab/>
      </View>
    </View>
  );
};
export default AuctionDetailScreen;

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    backgroundColor: themeColors.WHITE
  },
  container: {
    flex: 1,
    backgroundColor: '#ffffff'
  },
  header: {
    height: '35%',
    marginBottom: 25,
    backgroundColor : themeColors.WHITE
  },
  auctionHeading: {
    fontSize: 24,
    fontWeight: '600',
    color: themeColors.PRIMARY_COLOR
  },
  lotContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  auctionText: {
    marginTop: 10,
    fontSize: 16,
    fontWeight: '400',
    color: themeColors.PRIMARY_COLOR
  },
  lotText: {
     fontSize: 16,
     fontWeight: '400',
     color: themeColors.WHITE
   },
  lot: {
    backgroundColor : themeColors.BLACK,
    borderRadius : 50,
    justifyContent: 'center',
    alignContent: 'center',
    paddingVertical: 8,
    paddingHorizontal: 20
  },
  stakesContainer: {
    height: 125,
    marginTop: 20,
    flexDirection: 'row'
  }
})