import EditForm from "./EditOrder/EditForm";

/* eslint-disable @typescript-eslint/no-explicit-any */
type CustomizeOrderModalProps = {
  orderDetails: any;
  handleChange?: () => void;
};

const CustomizeOrderModal: React.FC<CustomizeOrderModalProps> = ({
  orderDetails,
  handleChange
}) => {
  const {
    customerInputOrderId,
    calculatedTotalShippingCharge,
    address,
    destinationMobileNumber,
      destinationCustomerName,
      orderType,
      totalWeight,
  } = orderDetails;
  console.log(orderDetails?.draft_order_package_list,'adsfasdf')
//   [
//     {
//         "id": 46,
//         "draftOrderId": 25,
//         "packageId": 1,
//         "weight": "2.00",
//         "packageDescription": "Electronics",
//         "customerInputPackageValue": "2.000",
//         "calculatedShippingCharge": null,
//         "createdAt": "2025-04-28T06:39:44.000+00:00",
//         "updatedAt": "2025-04-28T06:39:44.000+00:00",
//         "package_details": {
//             "id": 1,
//             "code": "PKG-0001",
//             "name": "PKG-123 Same day",
//             "length": "1.00",
//             "breadth": "2.00",
//             "height": "3.00",
//             "isActive": true,
//             "createdAt": "2025-04-23T19:53:26.000+00:00",
//             "updatedAt": "2025-04-23T19:53:26.000+00:00"
//         }
//     },
//     {
//         "id": 47,
//         "draftOrderId": 25,
//         "packageId": 1,
//         "weight": "2.00",
//         "packageDescription": "Electronics",
//         "customerInputPackageValue": "2.000",
//         "calculatedShippingCharge": null,
//         "createdAt": "2025-04-28T06:39:44.000+00:00",
//         "updatedAt": "2025-04-28T06:39:44.000+00:00",
//         "package_details": {
//             "id": 1,
//             "code": "PKG-0001",
//             "name": "PKG-123 Same day",
//             "length": "1.00",
//             "breadth": "2.00",
//             "height": "3.00",
//             "isActive": true,
//             "createdAt": "2025-04-23T19:53:26.000+00:00",
//             "updatedAt": "2025-04-23T19:53:26.000+00:00"
//         }
//     }
// ]
  return (
    <>
      <div
        id="order-quick-edit"
        // className="menu menu-box-bottom rounded-m bg-theme"
        // data-menu-height={360}
      >
        <div className="menu-title">
          <p className="color-red2">{customerInputOrderId}</p>
          <h1 className="font-22 font-800">Customize Order</h1>
          {/* <a href="#" className="close-menu">
            <i className="fa fa-times" />
          </a> */}
        </div>
        <div className="content mt-0">
          <div className="divider mt-n2 mb-3" />
          <div className="d-flex justify-content-between">
            <div className="w-100 mx-1">
              <h6 className="font-500 font-14 mb-2">
                {customerInputOrderId}
                <span className="opacity-50 mx-1">|</span>
                {/* <strong className="badge delybell-primary color-white">
                    Local
                  </strong> */}
                <strong className="badge bg-green2 color-white">
                  {orderType?.name}
                </strong>
                <span className="opacity-50 mx-1">|</span>
                {destinationCustomerName} ({destinationMobileNumber})
                <span className="opacity-50 mx-1">|</span>
                <span className="font-500 font-14 opacity-50">{address}</span>
              </h6>
              <div className="row align-items-center mb-0">
                <div className="col-md-2">
                  <p className="font-600 color-red2 mb-0 font-12 text-uppercase">
                    COD Order
                  </p>
                  <h1 className="mb-0 pb-0">
                    {totalWeight}&nbsp;<sup>KG</sup>
                  </h1>
                </div>
                <div className="col-md-10">
                  <h6 className="font-13 font-700">
                    Package Value<span className="float-end">BHD {calculatedTotalShippingCharge}</span>
                  </h6>
                  <div className="divider mb-2 mt-1" />
                  <h6 className="font-13 font-700 mb-0">
                    Shipping Charge
                    <span className="float-end color-red-dark">BHD 0.00</span>
                  </h6>
                </div>
              </div>
            </div>
          </div>
          <div className="divider mt-2 mb-3" />
                  <EditForm orderDetails={orderDetails}/>
          <a
            href="#"
            onClick={handleChange}
            className="close-menu btn btn-full delybell-primary font-13 btn-m font-600 mt-3 rounded-s"
          >
            Apply Changes
          </a>
        </div>
      </div>
    </>
  );
};

export default CustomizeOrderModal;