import React, {useState, useEffect} from 'react'
import { useParams } from 'react-router-dom';
import {OrderShowDetails} from 'components';
import { Order, Item } from 'Order';
import { useOrder } from 'hooks'
import { OrderService } from 'services'
import {
    Flex,
    Box
  } from "@chakra-ui/react"



const OrderShowPage = (props: any) => {
    // const { id } = useParams<any>();
    // const { order } = useOrder(id)
    const location = props.match.params.id;
    const apiUrl = 'http://localhost:8084/api/orders/' + location;
    const [order, setOrder] = useState<Order>();
    const [items, setItems] = useState<Item[]>()

    useEffect(() => {
        OrderService.orderById(apiUrl).then((data) => {
            setOrder(data)
            setItems(data.orderItems);
        })
    }, [apiUrl])


    if (!order) {
        return(<></>);
    }
    
    return (
        <>
            <div className="show-div">
                <Flex justify="space-around">
                    <Box><strong>Order Date:</strong> {new Date(order.orderCreatedAt).toLocaleDateString()}</Box>
                    <Box><strong>Order Number:</strong> {order.id}</Box>
                    <Box><strong>Order Status:</strong> {order.orderStatus}</Box>
                </Flex>
                <br/>
                <div className="show-table">
                    <OrderShowDetails items={order.orderItems}/>
                </div>
                
            </div>
        </>
    )
}

export default OrderShowPage