import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {View, StyleSheet, Text, ScrollView, TouchableOpacity} 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';
import { MaterialIcons } from '@expo/vector-icons';
import Toast from 'react-native-root-toast';

const  UserAuctionListScreen =  ({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);
      })

  }, [])
  const handleDelete = (auctionId) => {
    const url = "http://127.0.0.1:8085/auctions/" + auctionId
    axios.delete(url)
    .then( async function (response) {
      if (response.data.message === 'Deleted!!') {
        const successMsg = Toast.show('Your auction has been deleted successfully', {
          duration: Toast.durations.LONG,
        });
        setTimeout(function hideToast() {
          Toast.hide(successMsg);
        }, 1000);
        navigation.navigate('AuctionHomeScreen');
      } else {
        const errMsg = Toast.show('Auction Deletion Failed', {
          duration: Toast.durations.LONG,
        });
        setTimeout(function hideToast() {
          Toast.hide(errMsg);
        }, 1000);
      }
    }).catch(function (error) {
      const errMsg = Toast.show('Auction Deletion Failed', {
        duration: Toast.durations.LONG,
      });
      setTimeout(function hideToast() {
        Toast.hide(errMsg);
      }, 1000);
    })
  }
  return (
    <View style={styles.container}>
      <AppContainer>
        <View style={styles.header}>
          <Text style={styles.auctionHeading}>Auctions List</Text>
          <TouchableOpacity onPress={() => navigation.navigate("AuctionCreateScreen")} style={styles.addBtn}>
            <MaterialIcons name="add" size={16} color={themeColors.WHITE} />
          </TouchableOpacity>
        </View>
        <ScrollView>
        {auctions.map((auction) => {
          return(
            <AppAuctionItem delete label={auction.name} expire={auction.expire_date}
              onPress={() =>
                navigation.navigate("AuctionDetailScreen", {
                auctionObject: auction})
              }
              onDelete={() => handleDelete(auction._id)}/>
          )
        })}
      </ScrollView>
      </AppContainer>
      <AuctionBottomTab/>
    </View>
  );
};
export default UserAuctionListScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    backgroundColor: '#ffffff'
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: 50
  },
  auctionHeading: {
    fontSize: 24,
    fontWeight: 'bold',
    color: themeColors.BLACK,
  },
  addBtn:{
    alignItems: "center",
    padding: 8,
    backgroundColor: themeColors.BLACK,
    borderRadius: 20,
    shadowColor: 'rgba(0,0,0, .4)',
    shadowOffset: { height: 2, width: 1 },
    shadowOpacity: 1,
    shadowRadius: 1,
    elevation: 2,
    height: 33
  },
})