import React, { useState, useEffect } from 'react'
import useAuth from 'app/hooks/useAuth'
import { Link, Navigate, useParams } from 'react-router-dom'
import { useNavigate, useLocation } from 'react-router-dom'
import { MatxLoading, SimpleCard } from 'app/components'
import { styled } from '@mui/system'
import { Button } from '@mui/material'

const Container = styled('div')(({ theme }) => ({
    margin: '30px',
    [theme.breakpoints.down('sm')]: {
        margin: '16px',
    },
    '& .breadcrumb': {
        marginBottom: '30px',
        [theme.breakpoints.down('sm')]: {
            marginBottom: '16px',
        },
    },
}))

function OrderDetail(props) {
    const { id } = useParams()
    const navigate = useNavigate()
    const location = useLocation()
    console.log('LOCATIONS:', location)
    const [page, setPage] = useState(0)
    const [count, setCount] = useState(1)
    const [data, setData] = useState(location.state.data)
    const [isLoading, setIsLoading] = useState(false)
    const [openDialogue, setOpenDialogue] = React.useState(false)
    const [deleteId, setDeleteId] = React.useState('')

    if (isLoading) {
        return <MatxLoading />
    }

    return (
        <Container>
            <Button
                variant="outlined"
                onClick={() => {
                    console.log('LOCAION:', location)
                    navigate(location.state.prevPath)
                }}
            >
                Go Back
            </Button>
            {data && data.products && data.products.length > 0 && (
                <SimpleCard title={``}>
                    {data.products.map((da) => (
                        <div key={da._id} style={{ marginBottom: '1rem' }}>
                            <SimpleCard>
                                <p>
                                    Product Name: <b>{da.productId?.title}</b>
                                </p>
                                <p>
                                    Product Price: <b>{da.productId?.price}</b>
                                </p>
                                <p>
                                    Ordered Quantity: <b>{da.quantity}</b>
                                </p>
                            </SimpleCard>
                        </div>
                    ))}
                </SimpleCard>
            )}
        </Container>
    )
}
export default OrderDetail
