/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";

const CommonFilter = ({ filters, clearFilter, clearAllFilters, type }: any) => {
  return (
    <>
      {type === "orders" ? (
        <div className="clear-filter-badge d-float-center justify-content-end">
          {/* Service Type Filter */}
          {filters.serviceTypes?.id && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("serviceTypes")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Service: {filters.serviceTypes.name}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}
          
          {/* Order Flow Type Filter */}
          {filters.orderFlowType?.id && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("orderFlowType")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Flow: {filters.orderFlowType.name}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* Order ID Filter */}
          {filters.orderId && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("orderId")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Order ID: {filters.orderId}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* Customer Order ID Filter */}
          {filters.customerOrderId && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("customerOrderId")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Customer ID: {filters.customerOrderId}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* Delivery Mobile Filter */}
          {filters.deliveryMobile && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("deliveryMobile")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Mobile: {filters.deliveryMobile}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* Order Status Filter */}
          {filters.orderStatus?.id && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("orderStatus")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Status: {filters.orderStatus.name}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* Package ID Filter */}
          {filters.packageId && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("packageId")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Package ID: {filters.packageId}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* No of Packages Filter */}
          {filters.noOfPackages && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("noOfPackages")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Packages: {filters.noOfPackages}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* Package Weight Filter */}
          {filters.packageWeight && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("packageWeight")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Weight: {filters.packageWeight}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* Package Value Filter */}
          {filters.packageValue && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("packageValue")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Value: {filters.packageValue}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* Package Status Filter */}
          {filters.packageStatus?.id && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("packageStatus")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Package Status: {filters.packageStatus.name}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* Flat Number Filter */}
          {filters.flatNumber && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("flatNumber")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Flat: {filters.flatNumber}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* Block Number Filter */}
          {filters.blockNumber?.id && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("blockNumber")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Block: {filters.blockNumber.name}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* Road Number Filter */}
          {filters.roadNumber?.id && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("roadNumber")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Road: {filters.roadNumber.name}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* Building Number Filter */}
          {filters.buildingNumber?.id && (
            <div
              className="badge rounded-s d-float-center bg-blue-dark me-2"
              role="clear"
              onClick={() => clearFilter("buildingNumber")}
              style={{ cursor: "pointer" }}
            >
              <strong className="alert-icon-text color-white ps-1">
                Building: {filters.buildingNumber.name}
              </strong>
              &nbsp;|&nbsp;
              <i className="fa fa-times font-14"></i>
            </div>
          )}

          {/* Clear All Button */}
          <div
            className="badge rounded-s d-float-center bg-red-dark ms-2"
            role="clear"
            onClick={clearAllFilters}
            style={{ cursor: "pointer" }}
          >
            <i className="fa fa-times font-14"></i>&nbsp;|&nbsp;
            <strong className="alert-icon-text color-white ps-0">
              Clear All
            </strong>
          </div>
        </div>
      ) : (
        ""
      )}
    </>
  );
};

export default CommonFilter;