import React, { useEffect, useRef, useState } from "react";
import { LazyLoad } from "@/components/LazyLoad";
import { APIRouteConfigTabs } from "@/utils/constants";
import { InputEntries } from "@/components/InputEntries";
import { ApiResponseModelEntries } from "@/components/ApiResponseModelEntries";

const RouteValidationConfig = ({ updateRouteConfig, workflow }) => {
  const [inputs, setInputs] = useState([]);
  const [responseModel, setResponseModel] = useState([]);
  const saveRef = useRef(null);

  useEffect(() => {
    if (
      workflow?.configurations[APIRouteConfigTabs?.Api_Input]?.inputs &&
      workflow?.configurations[APIRouteConfigTabs?.Api_Input]?.inputs.length
    ) {
      setInputs(
        workflow?.configurations[APIRouteConfigTabs?.Api_Input]?.inputs
      );
    }

    if (
      workflow?.configurations[APIRouteConfigTabs?.Api_Input]?.response_model &&
      workflow?.configurations[APIRouteConfigTabs?.Api_Input]?.response_model.length
    ) {
      setResponseModel(
        workflow?.configurations[APIRouteConfigTabs?.Api_Input]?.response_model
      );
    }
  }, []);

  useEffect(() => {
    updateRouteConfig(APIRouteConfigTabs?.Api_Input, "inputs", inputs);
  }, [inputs, inputs?.length]);

  useEffect(() => {
    updateRouteConfig(APIRouteConfigTabs?.Api_Input, "response_model", responseModel);
  }, [responseModel, responseModel?.length]);

  return (
    <div className="w-full px-4 pb-5 text-left gap-y-2">
      <LazyLoad>
        <InputEntries
          entries={inputs}
          setEntries={setInputs}
          saveRef={saveRef}
        />
        <hr className="my-8" />
        {/* <ApiResponseModelEntries
          entries={responseModel}
          setEntries={setResponseModel}
          saveRef={saveRef}
        /> */}
      </LazyLoad>
    </div>
  );
};

export default RouteValidationConfig;
