import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Order } from '@/constants/types';
import Animated, {useAnimatedStyle,useSharedValue,withTiming,Easing} from 'react-native-reanimated';
import COLORS  from '@/constants/colors'; 

interface OrderItemProps {
  order: Order;
}

export default function OrderItem({ order }: OrderItemProps) {
  const scale = useSharedValue(1);
  
  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: scale.value }],
    };
  });
  
  const handlePressIn = () => {
    scale.value = withTiming(0.98, {
      duration: 100,
      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
    });
  };
  
  const handlePressOut = () => {
    scale.value = withTiming(1, {
      duration: 200,
      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
    });
  };

  const statusBackgroundColor = order.status === "Confirmée" ? "#4C7C54" : COLORS.primary;
  const statusText = order.status === "Confirmée" ? "Terminée" : order.status;

  return (
    <TouchableOpacity
      activeOpacity={0.9}
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
    >
      <Animated.View style={[styles.container, animatedStyle]}>
        <View style={styles.header}>
          {/* Show the orderId */}
          <Text style={styles.orderId}>Commande #{order.orderId}</Text> 
          <View style={[styles.statusContainer, { backgroundColor: statusBackgroundColor }]}>
            <Text style={styles.statusText}>{statusText}</Text>
          </View>
        </View>
        <View style={styles.itemsContainer}>
          {order.items.map((item, index) => (
            <Text key={index} style={styles.item}>
              {item.name} x {item.quantity}
            </Text>
          ))}
        </View>
        <Text style={styles.time}>{order.timeAgo}</Text>
      </Animated.View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F2F2F2',
    borderRadius: 12,
    padding: 25,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.05,
    shadowRadius: 3,
    elevation: 2,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  orderId: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333333',
  },
  statusContainer: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
  },
  statusText: {
    color: '#FFFFFF',
    fontSize: 12,
    fontWeight: '500',
  },
  itemsContainer: {
    marginBottom: 8,
  },
  item: {
    fontSize: 14,
    color: '#666666',
    lineHeight: 20,
  },
  time: {
    fontSize: 12,
    color: '#999999',
    alignSelf: 'flex-end',
  },
});