/* eslint-disable @typescript-eslint/no-explicit-any */
import Image from "next/image";
import React from "react";
import OrderCard from "../../../MyOrders/Containers/OrderCard";
import HourGlassLoader from "../../../../Loader/Loader";
import moment from "moment-timezone";
import Link from "next/link";
import { checkPrimaryAddressAvailable } from "../../../../../lib/Helper";
import { useRouter } from "next/navigation";
import Swal from "sweetalert2";

const Orders = ({ orderCardDetails }: any) => {
  const router = useRouter();
  const [isLoading] = React.useState<boolean>(false);
  const filters = {
    filter_by_order_place_date: moment().format("YYYY-MM-DD"),
  };

  const handleCreateOrderClick = (e: React.MouseEvent) => {
    e.preventDefault();
    if (checkPrimaryAddressAvailable()) {
      router.push("/create-order");
    } else {
      Swal.fire({
        icon: "error",
        title: "Profile Incomplete",
        text: "Please complete your profile by adding an pickup address before creating an order.",
        customClass: {
          confirmButton: "delybell-primary px-4",
          cancelButton: "delybell-dark",
        },
        buttonsStyling: true,
        showCancelButton: true,
        reverseButtons: true,
        cancelButtonText: "Cancel",
        confirmButtonText: "Go to Profile",
      }).then((result) => {
        if (result.isConfirmed) {
          router.push("/my-profile");
        }
      });
    }
  };

  return (
    <>
      {isLoading && <HourGlassLoader />}
      <div>
        <div className="row mb-0 mt-2">          
          <div className="col-lg-6">
            <div className="card card-style mb-3">
              <div className="content choose-order-type">
                {/* <p className="color-highlight font-600 mb-n1">15% off for</p> */}
                <h1 className="font-24 font-700 mb-2 domestic">
                  Place Domestic Order
                  <Link
                    href="/create-order"
                    data-menu="menu-wizard-step-1"
                    className="shareToFacebook external-link icon icon-l rounded-s float-end"
                    onClick={handleCreateOrderClick}
                  >
                    <Image
                      className="order-icons img-fluid"
                      src="/images/icons/domestic-truck-p1.svg"
                      alt="Domestic Truck Icon"
                      width={24}
                      height={24}
                    />
                    {/* <br /> */}
                  </Link>
                </h1>
                <p className="mb-1 pe-2 pe-lg-0 me-5 me-lg-0">
                  Orders placed and delivered within Bahrain
                </p>
                <a className="font-14 font-500" href="/create-order">Click to Order &nbsp;<i className="ri-arrow-right-long-line"></i></a>
              </div>
            </div>
          </div>
          <div className="col-lg-6">
            <div className="card card-style mb-3">
              <div className="content choose-order-type">
                {/* <p className="color-highlight font-600 mb-n1">
                  A short term offer for
                </p> */}
                <h1 className="font-24 font-700 mb-2">
                  Place International Order
                  <Link
                    href="/create-international-order"
                    className="shareToTwitter external-link icon icon-l rounded-s float-end"
                  >
                    <Image
                      src="/images/icons/international-flight-s1.svg"
                      alt="International Flight Icon"
                      width={24}
                      height={24}
                      className="order-icons img-fluid"
                    />                    
                    {/* <br /> */}
                  </Link>
                </h1>
                <p className="mb-1 pe-2 pe-lg-0 me-5 me-lg-0">
                  Orders sent to countries other than Bahrain
                </p>
                <a className="font-14 font-500" href="/create-international-order">Click to Order &nbsp;<i className="ri-arrow-right-long-line"></i></a>
              </div>
            </div>
          </div>
        </div>
        <div className="content dashboard mt-2">
          <div className="row my-orders-row mb-0">
            {/* <div className="col-lg-12 my-orders-box">
              <h5 className="font-15 pb-1">Today Orders (3)</h5>
            </div> */}
            {orderCardDetails?.orders_placed_today ? (
              <OrderCard
                tab="in_progress"
                edit={false}
                page="dashboard-today_orders"
                filters={filters}
                orderCardDetails={orderCardDetails}
              />
            ) : ''}
          </div>
          <div className="row my-orders-row mb-0">
          {orderCardDetails?.orders_placed_today ? (
              <OrderCard
                tab="live"
                edit={false}
                page="dashboard-live_orders"
                filters={filters}
                orderCardDetails={orderCardDetails}
              />
            ) : ''}
            {/* <div className="col-lg-12 my-orders-box">
              <h5 className="font-15 pb-1">Draft Orders (4)</h5>
            </div> */}
            <OrderCard tab="draft" edit={false} page="dashboard-draft_orders" />
          </div>
        </div>
      </div>
    </>
  );
};

export default Orders;