import React, { useState } from "react";
import { GlobalContext, setGLobalProperty } from "@/context/Global";
import { workflowConfig } from "@/utils/templates/api/workflow";
import { StringCaser } from "@/utils/utils";
import { Collapser } from "@/components/Collapser";

const WorkflowSection = ({ section, setCollapse, collapse }) => {
  const {
    dispatch: globalDispatch,
    state: { selectedRoute },
  } = React.useContext(GlobalContext);
  const [dragging, setDragging] = useState(false);

  const onDragStart = (e, workflow) => {
    // e.preventDefault();
    setGLobalProperty(
      globalDispatch,
      { ...JSON.parse(JSON.stringify(workflow)) },
      "selectedWorkflow"
    );
    // setDragging(true);
  };
  const onDrag = (e, workflow) => {
    e.preventDefault();
  };

  return (
    <Collapser title={section}>
      <div className="flex flex-wrap gap-2">
        {workflowConfig.map((workflow, workflowIndex) => {
          if ([section].includes(workflow?.type)) {
            return (
              <div
                draggable
                // onDrag={(e) => onDrag(e, workflow)}
                // onDragEnd={() => setDragging(false)}
                onDragStart={(e) => onDragStart(e, workflow)}
                className={` flex h-[1.75rem] w-fit min-w-[8.625rem] cursor-grab items-center rounded-md border border-solid bg-primaryBlue px-2 leading-snug tracking-widest text-white transition ease-in-out`}
                key={workflow?.name}
              >
                {StringCaser(workflow?.name, {
                  casetype: "lowercase",
                  separator: " ",
                })}
              </div>
            );
          }
        })}
      </div>
    </Collapser>
  );
};

export default WorkflowSection;
