/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";
import { ErrorMessage, Field } from "formik";
import CustomSelect from "../../../TextField/CustomSelect";
import { BasicInformationProps, FormValues } from "@/Constant/types";
import { alternativeInformationFields } from "../../../../lib/Helper";

const AlternativeContactInfomation: React.FC<BasicInformationProps> = ({
  toggleSection,
  openSections,
  basicInfoDisabled,
  handleBasicInfoDisabled,
  getOptions,
  selectedBlock,
  selectedRoad,
  initialValues,
  setSelectedBlock,
  setSelectedRoad,
  setFieldValue,
  setRoads,
  setBuildings,
  fetchRoadsAndBuildings,
  allData,
}) => {
  return (
    <>
      <div className="accordion-section mb-4">
        <div
          className="accordion-header"
          onClick={() => toggleSection("altContactInfo")}
          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.altContactInfo
              ? "none"
              : "1px solid #eee",
            marginTop: "1rem",
          }}
        >
          <div className="d-float-center justify-content-start gap-lg-3">
            <h4>Alternative Contact Details</h4>
            {basicInfoDisabled ? (
              <a
                href="#"
                onClick={(e) => {
                  e.preventDefault();
                  if (openSections?.altContactInfo) e.stopPropagation();
                  handleBasicInfoDisabled(true);
                }}
              >
                <i className="fa fa-edit" aria-hidden="true"></i> Edit
              </a>
            ) : (
              <button
                type="submit"
                className="close-menu btn btn-m shadow-l rounded-s font-600 delybell-primary mt-0 font-16"
              >
                <i className="fa fa-save" aria-hidden="true"></i> Save
              </button>
            )}
          </div>
          <i
            className={`fa ${
              openSections?.altContactInfo ? "fa-chevron-up" : "fa-chevron-down"
            }`}
          ></i>
        </div>
        {openSections?.altContactInfo && (
          <div
            className="card card-style me-lg-0 basic-info-card"
            id="basic-info"
          >
            <div className="content mb-0">
              {/* <p>
                              Public information that shows on top of your card in
                              your profile page.
                            </p> */}
              <div
                className={`row mt-4 mb-0 ${
                  basicInfoDisabled ? "disabled-box" : "save-box"
                }`}
              >
                {/* disabled-box */}
                {/* save-box */}
                {alternativeInformationFields(allData?.userType?.id).map(
                  (field: any) => (
                    <div
                      key={field.name}
                      className="col-12 col-sm-6 col-md-6 col-lg-4 input-style has-borders no-icon input-style-always-active validate-field mb-4"
                    >
                      {field.select_box ? (
                        <CustomSelect
                          name={field.name}
                          label={field.label}
                          options={getOptions(field.name)}
                          icon="fa fa-road"
                          isCreatable={Boolean(
                            (field.name === "road_id" && selectedBlock) ||
                              (field.name === "building_id" &&
                                selectedBlock &&
                                selectedRoad)
                          )}
                          allowNewOption={Boolean(
                            (field.name === "road_id" && selectedBlock) ||
                              (field.name === "building_id" &&
                                selectedBlock &&
                                selectedRoad)
                          )}
                          defaultValue={
                            initialValues[
                              field.name as keyof FormValues
                            ]?.toString() || ""
                          }
                          disabled={
                            (field.name === "road_id" && !selectedBlock) ||
                            (field.name === "building_id" &&
                              (!selectedBlock || !selectedRoad))
                          }
                          onChange={(value: any) => {
                            if (field.name === "block_id") {
                              if (
                                !value ||
                                !value.value ||
                                value.value === ""
                              ) {
                                // Block was deselected (either by backspace or clear)
                                setSelectedBlock(null);
                                setSelectedRoad(null);
                                setFieldValue("block_id", "");
                                setFieldValue("road_id", "");
                                setFieldValue("building_id", "");
                                setRoads([]);
                                setBuildings([]);
                                fetchRoadsAndBuildings("");
                              } else {
                                setSelectedBlock(value.value);
                                setFieldValue("road_id", "");
                                setFieldValue("building_id", "");
                                setSelectedRoad(null);
                                setBuildings([]);
                              }
                            } else if (field.name === "road_id") {
                              if (
                                !value ||
                                !value.value ||
                                value.value === ""
                              ) {
                                setSelectedRoad(null);
                                setFieldValue("road_id", "");
                                setFieldValue("building_id", "");
                                setBuildings([]);
                                if (selectedBlock) {
                                  fetchRoadsAndBuildings(selectedBlock);
                                }
                              } else {
                                setSelectedRoad(value.value);
                                setFieldValue("building_id", "");
                                setBuildings([]);
                              }
                            }
                          }}
                        />
                      ) : (
                        <>
                          <Field
                            name={field.name}
                            className="form-control"
                            placeholder={field.placeholder}
                            disabled={field?.disabled}
                          />
                          <label
                            htmlFor={field.name}
                            className="color-highlight"
                          >
                            {field.label}
                          </label>
                          <ErrorMessage
                            name={field.name}
                            component="div"
                            className="text-danger small"
                          />
                        </>
                      )}
                    </div>
                  )
                )}
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
};

export default AlternativeContactInfomation;