import { View, Text, ScrollView, Image } from 'react-native';
import React from 'react';
import { useStore } from '../store/store';
import OrderReceiptCard from '../components/OrderReceiptCard';




const OrderReceipt = ({navigation}: any) => {
  const ReceiptList = useStore((state: any) => state.ReceiptList);
  const navigationHandler = ({index, id, type}: any) => {
    navigation.push('detail', {
      index,
      id,
      type,
    });
  };
  

  return (
    <View style={{backgroundColor: 'white', flex: 1}}>
      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1, marginTop: 20, paddingHorizontal: 20, paddingVertical: 10}}>
        <View style={{flex: 1, justifyContent: 'space-between'}}>
          <Text style={{fontSize: 30, fontWeight: 500}}>Receipt</Text>
          {ReceiptList.length == 0 ? (
            <View>
              <Image source={require('../../assets/images/misc/receipt.png')} style={{ width: 200, height: 200, resizeMode: "contain"}}  />
            </View>
            ):(
            <View style={{marginTop: 20}}>
              {ReceiptList.map((data: any, index: any) => (
                  <OrderReceiptCard
                    key={index.toString()}
                    navigationHandler={navigationHandler}
                    CartList={data.CartList}
                    CartListPrice={data.CartListPrice}
                    OrderDate={data.OrderDate}
                  />
                ))}
            </View>
          )}
        </View>
      </ScrollView>
    </View>
  )
}

export default OrderReceipt