import Reac  from 'react'
import { useNavigate, useParams } from 'react-router-dom';
import { Button, Card, CardBody, CardFooter, CardHeader, CardTitle } from 'reactstrap';
import OrderForm from './OrderForm';
import DataTable from 'react-data-table-component';
import useTableColumns from './useTableColumns';
import { useTranslation } from 'react-i18next';
import { useGetOneOrder } from '../../../api/order';
import LoadingPage from '../../../Layout/app/LoadingPage';
import { history } from '../../../ProviderContainer';
import StatusOrderController from './StatusOrderController';






export default function Order() {
    const { id } = useParams();
    const [t] = useTranslation();



    const navigate  = useNavigate()
   

    const { data, isLoading, notFound } = useGetOneOrder({id: id })

   
    const order = data?.data || {};


    const columns = useTableColumns();
    const items = order?.products ;

   
    if (isLoading) {
        return (<LoadingPage />)
    }

    return (
        <Card style={{paddingBottom:"2.5rem"}}>
             <CardHeader style={{display:"flex" , justifyContent:"space-between" , margin:"20px"}}> 
                <CardTitle>

                    <p>{t("order_id")} : {order?.id}</p>
                </CardTitle>

              <span style={{display:"flex" , height:37, marginRight:7,justifyContent:"space-between" }}>
         
                <Button
                    onClick={() => navigate(-1)}
                    color="danger"
                >
                    {t("back")}
                </Button>
              </span>
                

            </CardHeader>
            {/* <div style={{padding:"1.5rem",display:"flex",alignItems:"center",justifyContent:"space-between"}}>

  
            

          <div>
   
          </div>
            </div> */}

            <CardBody style={{padding:" 1.5rem"}}>

                <OrderForm order={order} />
                <DataTable
                    columns={columns}
                    data={items}
                    progressPending={isLoading}
               
                    // noDataComponent={<h6 className="my-4">{("no_records")}</h6>}
                    // noHeader
                
                /> 

            </CardBody>
   
        </Card>


    )
}
