import React, { useEffect, useState } from "react";
import { CodeEditor } from "@/components/CodeEditor";
import { DropdownVariables } from "@/components/DropdownVariables";

const DBQueryConfig = ({ workflow, variables, onSetData }) => {
  const [query, setQuery] = useState(``);

  useEffect(() => {
    onSetData("query", query);
  }, [query]);

  useEffect(() => {
    setQuery(workflow?.query);
  }, [workflow?.query]);

  return (
    <div className="mt-5 h-full items-center justify-between gap-2  ">
      <span className="">Query</span>
      <div
        className={`relative flex h-full max-h-full min-h-[25rem] grow flex-col border-2 border-primaryBlue bg-black `}
      >
        <CodeEditor
          code={query}
          onChange={setQuery}
          className={`min-h-full grow `}
          language={`SQL`}
        />
        <div className="absolute right-2 top-2 m-auto h-fit w-fit">
          <DropdownVariables
            variables={variables}
            onSelect={(value) => setQuery((prev) => `${prev} ${value}`)}
          />
        </div>
      </div>
    </div>
  );
};

export default DBQueryConfig;
