import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet, Image } from 'react-native';
import { useAuth } from '../components/AuthContext';

const API_URL = 'https://bego-api.testmagna.com/api';

const OrderScreen = ({ navigation }) => {
  const [orders, setOrders] = useState([]);
  const { userId } = useAuth(); // Kullanıcı kimliğini al

  useEffect(() => {
    fetchOrders();
  }, []);

  const fetchOrders = async () => {
    try {
      if (!userId) {
        console.error('User ID not found.');
        return;
      }
      const response = await fetch(`${API_URL}/orders/${userId}`);
      const data = await response.json();
      console.log('Fetched orders:', data); // Verileri kontrol etmek için log ekle
      setOrders(data);
    } catch (error) {
      console.error('Error fetching orders:', error);
    }
  };

  // Tarihi gün, ay, yıl saat formatına dönüştüren fonksiyon
  const formatDate = (dateString) => {
    const options = { day: 'numeric', month: 'numeric', year: 'numeric' };
    const date = new Date(dateString);
    return date.toLocaleDateString('tr-TR', options); // Türkçe ay isimleri için 'tr-TR' kullanıldı
  };

  // Saati saat: dakika formatına dönüştüren fonksiyon
  const formatTime = (dateString) => {
    const options = { hour: '2-digit', minute: '2-digit' };
    const date = new Date(dateString);
    return date.toLocaleTimeString('tr-TR', options);
  };

  const handleOrderDetail = (orderId) => {
    navigation.navigate('OrderDetailScreen', { orderId });
  };

  return (
    <View style={styles.container}>
      <View style={styles.arrow}>
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Image source={require('../../assets/icons/arrow.png')} style={styles.backButton} />
        </TouchableOpacity>
      </View>
      <Text style={styles.header}>Siparişlerim</Text>
      <Text style={styles.headText}>Siparişinizin Durumu</Text>
      <FlatList
        data={orders}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.orderItem}>
                <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
                <Text style={styles.dateText}>{formatDate(item.created_at)}</Text>
              </View>
              <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
              <Text style={styles.timeText}>{formatTime(item.created_at)}</Text>
              </View>
            <Text style={styles.orderTextId}>Sipariş #{item.id}</Text>
            <Text style={styles.orderTextName}>{item.full_name}</Text>
            <Text style={styles.orderText}>{item.email}</Text>
            <Text style={styles.orderText}>Adet: {item.quantity}</Text>
            <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
            <TouchableOpacity style={styles.detailButton} onPress={() => handleOrderDetail(item.id)}>
              <Text style={styles.detailButtonText}>Detaylar</Text>
            </TouchableOpacity>
          </View>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  orderItem: {
    backgroundColor: '#F6F6F6',
    borderRadius: 10,
    padding: 15,
    marginBottom: 20,
    width: '100%',
    flexDirection: 'column',
  },
  orderText: {
    fontSize: 16,
  },
  orderTextName: {
    fontSize: 17,
    fontWeight: 'bold'
  },
  orderTextId: {
    fontSize: 17,
    fontWeight: 'bold'
  },
  detailButton: {
    marginTop: 10,
    backgroundColor: '#DDA726',
    paddingVertical: 12,
    paddingHorizontal: 20,
    margin: 2,
    borderRadius: 20,
  },
  detailButtonText: {
    color: 'white',
    fontSize: 13,
    fontWeight: '400',
    textAlign: 'center',
  },
  arrow: {
    backgroundColor: 'white',
    paddingHorizontal: 10,
    paddingVertical: 10,
    flexDirection: 'row',
    justifyContent: 'flex-start',
  },
  backButton: {
    width: 25,
    height: 25,
  },
  headText: {
    fontSize: 18,
    lineHeight: 20,
    fontWeight: '400',
    paddingBottom: 30,
  },
  dateText: {
    fontSize: 14,
  },
  timeText: {
    fontSize: 12,
  },
});

export default OrderScreen;