import { CustomSelect } from "@/components/CustomSelect";
import { APIRouteConfigTabs, HttpMethods } from "@/utils/constants";
import React, { useEffect, useState } from "react";
import { LazyLoad } from "@/components/LazyLoad";
import { MkdControlledInput } from "@/components/MkdControlledInput";
import { MkdPopover } from "@/components/MkdPopover";
import { StringCaser } from "@/utils/utils";

const RouteGeneralConfig = ({ updateRouteConfig, workflow }) => {
 

  const [method, setMethod] = useState("");
  const [name, setName] = useState("");
  const [folder, setFolder] = useState("");
  const [route, setRoute] = useState("");
  const [description, setDescription] = useState("");
  const [initialLoad, setInitialLoad] = useState(true);

  useEffect(() => {
    setName(workflow?.configurations[APIRouteConfigTabs?.General]?.name);
    setDescription(
      workflow?.configurations[APIRouteConfigTabs?.General]?.description
    );
    setRoute(workflow?.configurations[APIRouteConfigTabs?.General]?.route);
    setMethod(workflow?.configurations[APIRouteConfigTabs?.General]?.method);
    setFolder(workflow?.configurations[APIRouteConfigTabs?.General]?.folder);
    setInitialLoad(false);
  }, []);

  useEffect(() => {
    if (initialLoad) {
      return;
    }
    updateRouteConfig(APIRouteConfigTabs?.General, "name", name);
    updateRouteConfig(APIRouteConfigTabs?.General, "id", "_" + StringCaser(name, { casetype: "lowercase" }));
  }, [name]);
  useEffect(() => {
    if (initialLoad) {
      return;
    }
    updateRouteConfig(APIRouteConfigTabs?.General, "folder", folder);
  }, [folder]);
  useEffect(() => {
    if (initialLoad) {
      return;
    }
    updateRouteConfig(APIRouteConfigTabs?.General, "method", method);
  }, [method]);
  useEffect(() => {
    if (initialLoad) {
      return;
    }
    updateRouteConfig(APIRouteConfigTabs?.General, "route", route);
  }, [route]);
  useEffect(() => {
    if (initialLoad) {
      return;
    }
    updateRouteConfig(APIRouteConfigTabs?.General, "description", description);
  }, [description]);

  return (
    <>
      <div className="w-full grow text-left">
        <div className="w-full px-4">
          <div>
            <div className="py-2">
              <LazyLoad>
                <MkdControlledInput
                  className={`relative mb-3`}
                  label={
                    <div className="flex gap-2">
                      <span>
                        Route Name <sup className="text-red-600">*</sup>
                      </span>
                      <MkdPopover>
                        The Endpoint to be called for this api to work
                      </MkdPopover>
                    </div>
                  }
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder={`Route Name`}
                />
              </LazyLoad>
            </div>
            <div className="py-2">
              <LazyLoad>
                <MkdControlledInput
                  className={`relative mb-3`}
                  label={
                    <div className="flex gap-2">
                      <span>Route Folder (optional) </span>
                      <MkdPopover>
                        The Endpoint to be called for this api to work
                      </MkdPopover>
                    </div>
                  }
                  value={folder}
                  onChange={(e) => setFolder(e.target.value)}
                  placeholder={`Route Folder (optional)`}
                />
              </LazyLoad>
            </div>

            <div className="py-2">
              <LazyLoad>
                <MkdControlledInput
                  className={`relative mb-3`}
                  label={
                    <div className="flex gap-2">
                      <span>Description (optional) </span>
                      <MkdPopover>
                        The Endpoint to be called for this api to work
                      </MkdPopover>
                    </div>
                  }
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  placeholder={`Description (optional)`}
                />
              </LazyLoad>
            </div>
            <div className="py-4">
              <label className="mb-2 flex gap-2 text-sm font-bold text-gray-700">
                <div>
                  Method <sup className="text-red-600">*</sup>
                </div>
                <span className=" flex gap-2">
                  <MkdPopover>
                    The Endpoint to be called for this api to work
                  </MkdPopover>
                </span>
              </label>
              <CustomSelect
                className="w-full border p-2"
                initialValue={method}
                onSelectedChange={(value) => setMethod(value)}
                options={Object.keys(HttpMethods)}
                showBorder
              />
            </div>
            <div className="py-2">
              <LazyLoad>
                <MkdControlledInput
                  className={`relative mb-3`}
                  label={
                    <div className="flex gap-2">
                      <span>
                        URL Path <sup className="text-red-600">*</sup>
                      </span>
                      <MkdPopover>
                        The Endpoint to be called for this api to work
                      </MkdPopover>
                    </div>
                  }
                  value={route}
                  onChange={(e) => setRoute(e.target.value)}
                  placeholder={`/url`}
                />
              </LazyLoad>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default RouteGeneralConfig;
