import React, { useCallback, useEffect, useRef, useState } from "react";
import { LazyLoad } from "@/components/LazyLoad";
import { generateUUID } from "@/utils/utils";
import { MkdButton } from "@/components/MkdButton";
import { MkdControlledInput } from "@/components/MkdControlledInput";
import { TrashIcon } from "@/assets/svgs";
import { DropdownVariables } from "@/components/DropdownVariables";

const VariableConfig = ({ workflow, variables, onSetData }) => {
  const [localVariables, setLocalVariables] = useState([
    { id: generateUUID(), name: "", value: "" },
  ]);

  const addRow = useCallback(() => {
    const tempLocalVariables = localVariables;
    setLocalVariables((prev) => [
      ...prev,
      { id: generateUUID(), name: "", value: "" },
    ]);
  }, [localVariables]);

  const deleteRow = useCallback(
    (id) => {
      const tempLocalVariables = localVariables;
      const filteredLocalVariables = tempLocalVariables.filter(
        (tempLocalVariable) => tempLocalVariable?.id !== id
      );
      setLocalVariables(() => [...filteredLocalVariables]);
    },
    [localVariables]
  );

  const editVariable = useCallback(
    (value, field, id) => {
      const tempLocalVariables = localVariables;
      const position = tempLocalVariables.findIndex(
        (tempLocalVariable) => tempLocalVariable?.id === id
      );
      const actualVariable = tempLocalVariables[position];

      actualVariable[field] = value;
      tempLocalVariables.splice(position, 1, actualVariable);

      setLocalVariables(() => [...tempLocalVariables]);
    },
    [localVariables]
  );

  useEffect(() => {
    if (workflow?.variables?.length) {
      setLocalVariables(() => [...workflow?.variables]);
    }
  }, []);

  useEffect(() => {
    onSetData("variables", localVariables);
  }, [localVariables?.length, localVariables]);

  return (
    <div className={``}>
      {localVariables.map((localVariable) => (
        <div
          key={localVariable?.id}
          className={`group mt-2 flex h-fit w-full items-end  gap-2`}
        >
          <div className="flex h-fit grow gap-2">
            <div className="w-1/2">
              <LazyLoad>
                <MkdControlledInput
                  label={"Variable Name"}
                  onChange={(e) =>
                    editVariable(e.target.value, "name", localVariable?.id)
                  }
                  value={localVariable?.name}
                  placeholder={`Variable Name`}
                >
                  {" "}
                  <DropdownVariables
                    className={`bg-transparent text-sm`}
                    variables={variables}
                    onSelect={(value) =>
                      editVariable(
                        `${localVariable?.name}${value}`,
                        "name",
                        localVariable?.id
                      )
                    }
                  />
                </MkdControlledInput>
              </LazyLoad>
            </div>
            <span className="self-end">=</span>
            <div className="w-1/2">
              <LazyLoad>
                <MkdControlledInput
                  label={"Variable Value"}
                  onChange={(e) =>
                    editVariable(e.target.value, "value", localVariable?.id)
                  }
                  value={localVariable?.value}
                  placeholder={`Variable Value`}
                >
                  {" "}
                  <DropdownVariables
                    className={`bg-transparent text-sm`}
                    variables={variables}
                    onSelect={(value) =>
                      editVariable(
                        `${localVariable?.value}${value}`,
                        "value",
                        localVariable?.id
                      )
                    }
                  />
                </MkdControlledInput>
              </LazyLoad>
            </div>
          </div>
          {localVariables?.length > 1 ? (
            <button
              onClick={() => deleteRow(localVariable?.id)}
              className={`w-fit`}
            >
              <TrashIcon />
            </button>
          ) : null}
        </div>
      ))}
      <div className="mt-5 flex w-full gap-3">
        <MkdButton onClick={addRow}>Add Variable</MkdButton>
      </div>
    </div>
  );
};

export default VariableConfig;
