import React from 'react';
import {Heading, Separator, DataList, Stack, Center, Box, Image, Badge, Text} from "@chakra-ui/react"

const OrderSummary = ({ orderData, loading, order }) => {
    const formatCurrency = (amount, currency = 'USD') => {
        return new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: currency,
        }).format(parseFloat(amount));
    };

    if (loading) {
        return (
            <div className="order-summary">
                <div className="loading-spinner">
                    <div className="spinner-border" role="status">
                        <span className="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <Center>
        <div className="order-summary">
            <Box maxW="sm" borderWidth="1px" mb={5}>
                <Box p="4" spaceY="2">
                    <Heading as="h2" fontSize="xl" fontWeight="bold" size="lg">Order Summary</Heading>
                    <Box>
                        <DataList.Root orientation="horizontal" divideY="1px" maxW="md">
                            <DataList.Item pt="4">
                                <DataList.ItemLabel>Order #</DataList.ItemLabel>
                                <DataList.ItemValue>{orderData.wc_order_id}</DataList.ItemValue>
                            </DataList.Item>
                            { order.billing !== undefined && <>
                                {/*<DataList.Item pt="4">*/}
                                {/*    <DataList.ItemLabel>First Name</DataList.ItemLabel>*/}
                                {/*    <DataList.ItemValue>{order.billing.first_name}</DataList.ItemValue>*/}
                                {/*</DataList.Item>*/}
                                {/*<DataList.Item pt="4">*/}
                                {/*    <DataList.ItemLabel>Last Name</DataList.ItemLabel>*/}
                                {/*    <DataList.ItemValue>{order.billing.last_name}</DataList.ItemValue>*/}
                                {/*</DataList.Item>*/}
                                <DataList.Item pt="4">
                                    <DataList.ItemLabel>Shipping details</DataList.ItemLabel>
                                    <DataList.ItemValue>
                                        {order.shipping.first_name} {order.shipping.last_name}<br />
                                        {order.shipping.address_1}
                                        {order.shipping.address_2 && `, ${order.shipping.address_2}`}
                                        {`, ${order.shipping.city}`}
                                        {`, ${order.shipping.postcode}`}
                                        {order.shipping.state && `, ${order.shipping.state}`}
                                        {`, ${order.shipping.country}`}
                                    </DataList.ItemValue>
                                </DataList.Item>
                                <DataList.Item pt="4">
                                    <DataList.ItemLabel>E-mail</DataList.ItemLabel>
                                    <DataList.ItemValue>{order.billing.email}</DataList.ItemValue>
                                </DataList.Item>

                                {/*{orderData.customer_email && (
                    <DataList.Item>
                        <DataList.ItemLabel>E-mail</DataList.ItemLabel>
                        <DataList.ItemValue>{orderData.customer_email}</DataList.ItemValue>
                    </DataList.Item>
                )}*/}
                                {order.shipping.method &&
                                <DataList.Item pt="4">
                                    <DataList.ItemLabel>
                                        <Badge colorPalette="teal" variant="solid">
                                            {order.shipping.method}
                                        </Badge>
                                    </DataList.ItemLabel>
                                    <DataList.ItemValue>{formatCurrency(order.shipping.total, orderData.currency)}</DataList.ItemValue>
                                </DataList.Item> }
                            </> }
                            <DataList.Item pt="4" textStyle="xl">
                                <DataList.ItemLabel><strong>Total Amount:</strong></DataList.ItemLabel>
                                <DataList.ItemValue><strong>{formatCurrency(orderData.total, orderData.currency)}</strong></DataList.ItemValue>
                            </DataList.Item>
                        </DataList.Root>
                    </Box>
                </Box>
            </Box>
            <Box maxW="sm" borderWidth="1px" mb={5}>
                <Box p="4" spaceY="2">
                    <Heading as="h4" fontSize="xl" fontWeight="bold" size="lg">Ordered Items</Heading>
                    <Box>
                        {order.line_items !== undefined && order.line_items.map((item, index) => (
                            <Box key={index} className="order-item">
                                <Stack direction="row" gap={5} mb={3}>
                                    {item.image && <Image
                                        width="75px"
                                        src={item.image}
                                        alt={item.name}
                                    />}
                                    <Center>
                                        <Heading size="sm" as="h6">{item.name}</Heading>
                                    </Center>
                                </Stack>
                                <Stack direction="row" gap={5} mb={2}>
                                    <Text w="75px" textStyle="sm">Qty: {item.quantity}</Text>
                                    <Text textStyle="sm">${item.total}</Text>
                                </Stack>
                                <Separator />
                            </Box>
                        ))}

                    </Box>
                </Box>
            </Box>
        </div>
        </Center>
    );
};

export default OrderSummary;