/* 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 { BasicInfoFields } from "../../../../lib/Helper";

const BasicInformation: 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("basicInfo")}
          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.basicInfo ? "none" : "1px solid #eee",
            marginTop: "1rem",
          }}
        >
          <div className="d-float-center justify-content-start gap-lg-3">
            <h4>Basic Information</h4>
            {basicInfoDisabled ? (
              <a
                href="#"
                onClick={(e) => {
                  e.preventDefault();
                  if (openSections?.basicInfo) e.stopPropagation();
                  handleBasicInfoDisabled();
                }}
              >
                <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.basicInfo ? "fa-chevron-up" : "fa-chevron-down"
            }`}
          ></i>
        </div>
        {openSections.basicInfo && (
          <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 */}
                {BasicInfoFields(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"
                  // >
                  <div
                    key={field.name}
                    className={`input-style has-borders no-icon input-style-always-active validate-field mb-4 ${
                      (field.name === "address_line_one" && !field?.col_lg)
                        ? "col-12"
                        : "col-12 col-sm-6 col-md-6 col-lg-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}
                          readOnly={field?.disabled}
                        />
                        <label htmlFor={field.name} className="color-highlight">
                          {field.label}
                        </label>
                        <ErrorMessage
                          name={field.name}
                          component="div"
                          className="text-danger small"
                        />
                      </>
                    )}
                  </div>
                ))}
                {/* <Field
                    as="textarea"
                    name="package_description"
                    className="form-control validate-text"
                    placeholder="Enter Package Description"
                    disabled={'packageDescriptionDisabled'}
                    rows={3}
                    maxLength={255}
                  /> */}
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
};

export default BasicInformation;
