import React, { useState } from 'react'
import "./OrderCard.css";
import { faAngleRight, faArrowRight } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Button } from 'react-bootstrap';
import OrderTrackModal from '../common_modal/order_track_modal/OrderTrackModal';
import { useNavigate } from 'react-router-dom';
import { formatDate } from '../../../utils/common';

const OrderCard = (props) => {

    const [showCouponModal, setShowCouponModal] = useState(false)

    const navigate = useNavigate()

    return (
        <section className='OrderCard'>
            <div className='card_main_holder'>
                <div className='card_holder' >
                    <div className='right_side_part' >

                        <div className='order_details_div' >

                            <div className='first_div' onClick={() => { navigate(props?.navigate) }}>
                                <p className='order_id'>{props?.order?.invoice_no}</p>
                                <div className='date_holder'>
                                    <p>{formatDate(props?.order?.createdAt)}</p>
                                </div>
                            </div>


                            <div className='order_id_div'>
                                <div className='left_detail_holder'>
                                    <p className='item'>{props?.order?.no_of_item}</p>
                                </div>
                                {props?.showtracking && (
                                    <div className='track_order_status' onClick={() => { setShowCouponModal(true) }}>
                                        Track Order
                                    </div>
                                )}

                            </div>

                            <div className='footer_text'>
                                <div className='delivery_text'>
                                    <p className='amount_text'>{props?.order?.total_amount}</p>
                                    <p style={{ color: props?.footer_text_color }} className='status_text'>{props?.order?.Order_status?.name}</p>
                                </div>

                                {!props?.showViewDetails && (
                                    <p className='view_details_text' onClick={() => { navigate(props?.navigate) }}>
                                        View Details
                                    </p>
                                )}


                            </div>

                        </div>

                    </div>
                </div>
            </div>

            <OrderTrackModal
                show={showCouponModal}
                onHide={() => { setShowCouponModal(false) }}
            />

        </section >
    )
}

export default OrderCard


{
                                                orders?.data?.map((order) => (
                                                    (order?.Order_status?.id === 6) ?

                                                        <OrderCard navigate={`/delivered-order/${order?.id}`} title="ScanMart Grocery" showtracking footer_text_color="#0073DB"
                                                            img={order?.Product_Order_Details?.Product?.image} orderId="Order ID #675843" items="2 Items" kwd="Rs.: 200"
                                                            footer_text="Delivering in 10 mins" date="27th Oct. | 03:28 pm" order={order} />
                                                        : <>
                                                            {console.log(order, 'delivered-order')}</>
                                                ))
                                            }