/* eslint-disable @typescript-eslint/no-explicit-any */
import Link from "next/link";
import React, { useCallback, useState } from "react";
import OrderCard from "./Containers/OrderCard";
import { useSearchParams } from "next/navigation";
import Modal from "../../Modal/Modal";
import AddModal from "./Containers/AddModal";
import HourGlassLoader from "../../Loader/Loader";
import { getBulkOrderDetails, getBulkOrders } from "../../../Api/OrderApi";

export default function NotificationsIndex() {
  const searchParams: any = useSearchParams();
  const [isLoading, setIsLoading] = useState<boolean>(false)
  const defaultTab = searchParams.get("_") || "draft";
  const [defaultDetails, setDefaultDetails] = useState<object>({})
  const [tab, setTab] = React.useState<string>(defaultTab);
  const [openModal, setOpenModal] = React.useState<boolean>(false);
  const [refreshList, setRefreshList] = useState(false)
  const [orders, setOrders] = React.useState<any[]>([]);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const fetchOrders = useCallback(async () => {
    try {
      setIsLoading(true);
      const orderList: any = await getBulkOrders();
      setOrders(orderList?.data?.data);
      setIsLoading(false);
    } catch (error) {
      console.error("Failed to fetch orders:", error);
    } finally {
      setIsLoading(false);
    }
  }, []);
  const toggleOpenModal = () => {
    setOpenModal(!openModal);
    setDefaultDetails({})
    setRefreshList(true)
  }
  const onSubmit = () => {
    setOpenModal(!openModal);
    setDefaultDetails({})
    setRefreshList(true)
  }
  React.useEffect(() => {
    setTab(defaultTab);
  }, [defaultTab]);
  const [filters,] = React.useState<any>({});
  const [dashboard, setDashboard] = React.useState<any>(null);
  const handleEdit = async (bulkOrderDetails: any) => {
    try {
      setOpenModal(!openModal);
      setIsLoading(true)
      const response: any = await getBulkOrderDetails(bulkOrderDetails?.id ?? null)
      setDefaultDetails(response ?? {})
    } catch (error) {
      console.log(error, 'ERROR>>>>>>>>>>>>>>')
    } finally {
      setIsLoading(false)
    }
  }
  console.log(refreshList, 'refreshList')
  return (
    <>
      <style>
        {`
          /* Smartphones (portrait and landscape) */
          @media only screen and (min-device-width : 990px) and (max-device-width : 2000px) {
            html, body, .az-body.az-light, .az-content-dashboard-six, .az-content-body { height: 100%; }
            .draft-orders-row {
                min-height: 32rem;
            }
          }
            // .rounded-xl { border-radius: 5px !important; }
            // .orders-list .content.collapse a { color: #752f8a !important; }
            .tab-controls a ( border-left: 0 solid !important; )

            .tab-controls {
              width: 100%;
              overflow: hidden;
              overflow-x: auto;
            }
            .tab-controls a {
              width: -webkit-fill-available;
              white-space: nowrap;
              padding: 0 15px;
            }
              .oder-list-page .my-orders-row .order-list-box .card-style.order-list-heightSame { height: 213px; }
        `}
      </style>
      {isLoading && <HourGlassLoader />}
      <div className="page-content innerPageWrap ordersPageWrap oder-list-page">
        <div className="header header-fixed header-logo-app innerHeader">
          <Link href="my-orders" className="header-title header-subtitle">
            Bulk Orders
          </Link>
          <Link href="/dashboard" className="header-icon header-icon-1">
            <i className="fas fa-arrow-left" />
          </Link>
          <div
            className="d-float-center justify-content-end"
            style={{ marginTop: "6px" }}
          >
            <button
              type="button"
              className="btn btn-s bg-blue-dark rounded-s me-2"
              onClick={toggleOpenModal}
            >
              <i className="fas fa-plus" />
              {` `}Create Bulk Order
            </button>
          </div>
          {tab === "draft" ? (
            <a
              href="#"
              // onClick={toggleFilter}
              className="color-theme show-on-theme-light header-icon header-icon-2 font-16"
            >
              {/* <i className="fa fa-filter-circle-dollar" /> */}
            </a>
          ) : (
            <a
              href="#"
              onClick={toggleOpenModal}
              className="color-theme show-on-theme-light header-icon header-icon-2 font-16"
            >
              {/* <i className="fa fa-filter" /> */}
            </a>
          )}
        </div>
        <div className="innerContentWrap orders-list">
          <div className="card card-style bg-transparent pb-0 m-0 rounded-0">
            <div className="content m-0" id="tab-group-1">
              <div
                data-bs-parent="#tab-group-1"
                className="content draft mx-0 bg-transparent px-0 collapse show"
                id="tab-1"
              >
                <div className="row my-orders-row">
                  {/* <div class="col-lg-12 my-orders-box">
                   <h5 class="font-15 pb-1">Saved Orders</h5>
               </div> */}
                  <OrderCard
                    tab={tab}
                    edit={false}
                    filters={filters}
                    setDashboard={setDashboard}
                    dashboard={dashboard}
                    refreshList={refreshList}
                    setRefreshList={setRefreshList}
                    handleEdit={handleEdit}
                    orders={orders}
                    setOrders={setOrders}
                  />
                  {tab === "draft" && dashboard?.draft_orders > 0 ? (
                    <div className="draft-order-btns card-bottom my-3 d-flex justify-content-between gap-2 px-0">
                      <button
                        className="btn btn-m rounded-m delybell-primary font-700 text-uppercase flex-fill text-center"
                        onClick={() => {
                          const url = `/create-order`;
                          window.location.href = url;
                        }}
                      >
                        <i className="fa fa-plus me-1" /> Add More
                      </button>
                      <button
                        className="btn btn-m rounded-m bg-green2 font-700 text-uppercase flex-fill text-center"
                        onClick={() => {
                          const url = `/create-order?_=draft`;
                          window.location.href = url;
                        }}
                      >
                        <i className="fa fa-check me-1" /> Place Order
                      </button>
                    </div>
                  ) : null}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {openModal && (
        <Modal
          show={openModal}
          onHide={toggleOpenModal}
          header={false}
          title=""
          fullscreen={"xl"}
          centered={true}
          classname="custom-center-modal"
          position={"top"}
        >
          <AddModal onHide={toggleOpenModal} onSaveFilter={toggleOpenModal} onSubmit={onSubmit} setRefreshList={setRefreshList} refreshList={refreshList} defaultDetails={defaultDetails} />
        </Modal>
      )}
    </>
  );
}