/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";
import SettlementSection from "./SettlementSection";
import { SettlementServiceProps } from "@/Constant/types";

const SettlementService: React.FC<SettlementServiceProps> = ({
  toggleSection,
  openSections,
  orderFlowTypesLoading,
  orderFlowTypes,
  selectedOrderFlowTypes,
  handleOrderFlowTypeChange,
  allData,
  UserTypes,
  SettlementInterval,
}) => {
  return (
    <>
      {/* Order Flow Types Accordion */}
      {/* {allData?.userType?.id === UserTypes?.NormalCustomer && ( */}
      {false && (
        <div className="accordion-section mb-4">
          <div
            className="accordion-header"
            onClick={() => toggleSection("orderFlowTypes")}
            style={{
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              padding: "1rem",
              background: "#fff",
              borderRadius: "10px 10px 0 0",
              border: "1px solid #eee",
              borderBottom: openSections.orderFlowTypes
                ? "none"
                : "1px solid #eee",
              marginTop: "1rem",
            }}
          >
            <div className="d-float-center justify-content-start gap-lg-5">
              <h4>Order Flow Types</h4>
            </div>
            <i
              className={`fa ${
                openSections.orderFlowTypes
                  ? "fa-chevron-up"
                  : "fa-chevron-down"
              }`}
            ></i>
          </div>
          {openSections.orderFlowTypes && (
            <div className="card card-style ms-lg-0" id="order-flow-types">
              <div className="content mb-3">
                <p className="mb-0">
                  Select your preferred order flow types for placing orders.
                </p>
                <div className="row mt-2 mb-0">
                  <div className="col-12">
                    {orderFlowTypesLoading && (
                      <div className="text-center my-2">
                        <span className="spinner-border spinner-border-sm" />{" "}
                        Loading...
                      </div>
                    )}
                    {/* {orderFlowTypesError && (
                                  <div className="alert alert-danger py-2 small">
                                    {orderFlowTypesError}
                                  </div>
                                )}
                                {orderFlowTypesSuccess && (
                                  <div className="alert alert-success py-2 small">
                                    {orderFlowTypesSuccess}
                                  </div>
                                )} */}
                    {!orderFlowTypesLoading && orderFlowTypes.length > 0 && (
                      <div className="d-flex flex-wrap gap-3 mb-3">
                        {orderFlowTypes
                          .filter((type: any) => type.name !== "Externel API")
                          .map((type: any) => (
                            <label
                              key={type.id}
                              className="form-check-label"
                              style={{ minWidth: 150 }}
                            >
                              <input
                                type="checkbox"
                                className="form-check-input me-2"
                                checked={selectedOrderFlowTypes.includes(
                                  String(type.id)
                                )}
                                onChange={() =>
                                  handleOrderFlowTypeChange(String(type.id))
                                }
                                disabled={orderFlowTypesLoading}
                              />
                              {type.name}
                            </label>
                          ))}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      )}
      {/* Settlement Intervals Accordion */}
      {(allData?.userType?.id !== UserTypes?.NormalCustomer ? true : false) ? (
        <>
          <SettlementSection
            open={openSections.settlementIntervals}
            toggle={() => toggleSection("settlementIntervals")}
            SettlementInterval={SettlementInterval}
            disabled={true}
          />{" "}
        </>
      ) : (
        ""
      )}
      {/* <div className="accordion-section mb-4">
                      <div
                        className="accordion-header"
                        onClick={() => toggleSection("settlementIntervals")}
                        style={{
                          cursor: "pointer",
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "space-between",
                          padding: "1rem",
                          background: "#fff",
                          borderRadius: "10px 10px 0 0",
                          border: "1px solid #eee",
                          borderBottom: openSections.settlementIntervals
                            ? "none"
                            : "1px solid #eee",
                          marginTop: "1rem",
                        }}
                      >
                        <span>Settlement Intervals</span>
                        <i
                          className={`fa ${
                            openSections.settlementIntervals
                              ? "fa-chevron-up"
                              : "fa-chevron-down"
                          }`}
                        ></i>
                      </div>
                      {openSections.settlementIntervals && (
                        <div
                          className="card card-style ms-lg-0"
                          id="settlement-intervals"
                        >
                          <div className="content mb-3">
                            <div className="row">
                              <div className="col-md-6 mb-3">
                                <label
                                  htmlFor="cod_settlement_interval"
                                  className="form-label"
                                >
                                  COD Settlement Interval{" "}
                                  <span className="text-danger">*</span>
                                </label>
                                <Field
                                  as="select"
                                  name="cod_settlement_interval"
                                  className="form-select"
                                >
                                  <option value="">Select Interval</option>
                                  {(
                                    Object.entries(SettlementInterval) as [
                                      string,
                                      string | number
                                    ][]
                                  )
                                    .filter(
                                      ([, value]) => !isNaN(Number(value))
                                    )
                                    .map(([key, value]) => (
                                      <option key={value} value={value}>
                                        {key.replace(/([A-Z])/g, " $1").trim()}
                                      </option>
                                    ))}
                                </Field>
                                <ErrorMessage
                                  name="cod_settlement_interval"
                                  component="div"
                                  className="text-danger small"
                                />
                              </div>
                              <div className="col-md-6 mb-3">
                                <label
                                  htmlFor="invoice_settlement_interval"
                                  className="form-label"
                                >
                                  Invoice Settlement Interval{" "}
                                  <span className="text-danger">*</span>
                                </label>
                                <Field
                                  as="select"
                                  name="invoice_settlement_interval"
                                  className="form-select"
                                >
                                  <option value="">Select Interval</option>
                                  {(
                                    Object.entries(SettlementInterval) as [
                                      string,
                                      string | number
                                    ][]
                                  )
                                    .filter(
                                      ([, value]) => !isNaN(Number(value))
                                    )
                                    .map(([key, value]) => (
                                      <option key={value} value={value}>
                                        {key.replace(/([A-Z])/g, " $1").trim()}
                                      </option>
                                    ))}
                                </Field>
                                <ErrorMessage
                                  name="invoice_settlement_interval"
                                  component="div"
                                  className="text-danger small"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      )}
                    </div> */}
    </>
  );
};

export default SettlementService;