path: root/src/components/FormBuilder/index.js

import { DragIndicator, Clear } from "@mui/icons-material";
import {
  Card,
  CardContent,
  CardHeader,
  IconButton,
  Stack,
  TextField,
} from "@mui/material";
import React, { useRef, useState } from "react";
import useForm from "../../hooks/useForm";

export default function FormBuilder({ formId }) {
  return (
    <Stack direction={"column"}>
      <h3>FormBuilder</h3>
      <Stack
        direction={"row"}
        justifyContent={"space-between"}
        alignItems={"flex-start"}
        spacing={2}
      >
        <Form initialForm={false} editable formId={formId} />
        <WidgetsLibrary />
      </Stack>
    </Stack>
  );
}

const availableWidgets = {
  label: {
    name: "Label",
    element: ({ id, name, setName, finalField }) =>
      finalField ? (
        <div>{name}</div>
      ) : (
        <TextField
          id={id}
          variant="standard"
          value={name}
          onChange={(e) => setName(e.target.value)}
          fullWidth
        />
      ),
  },
  number: {
    name: "Number",
    element: ({ id, value, setValue }) => (
      <TextField
        id={id}
        label={id ? `example field ${id}` : "Outlined"}
        variant="outlined"
        type={"number"}
        value={value || ""}
        onChange={(e) => {
          if (setValue) {
            setValue(e.target.value);
          }
        }}
        fullWidth
      />
    ),
  },
  text: {
    name: "Text",
    element: ({ id, setValue, value }) => (
      <TextField
        id={id}
        label={id ? `example field ${id}` : "Outlined"}
        variant="outlined"
        fullWidth
        value={value || ""}
        onChange={(e) => {
          if (setValue) {
            setValue(e.target.value);
          }
        }}
      />
    ),
  },
  multiline: {
    name: "Multiline",
    element: ({ id, setValue, value }) => (
      <TextField
        id={id}
        label={id ? `example field ${id}` : "Multiline"}
        placeholder="Placeholder"
        multiline
        minRows={4}
        fullWidth
        value={value || ""}
        onChange={(e) => {
          if (setValue) {
            setValue(e.target.value);
          }
        }}
      />
    ),
  },
};

function WidgetsLibrary() {
  return (
    <Stack
      direction={"column"}
      spacing={0.5}
      alignItems={"flex-start"}
      sx={{ maxHeight: "100vh", height: "100%", overflow: "scroll" }}
    >
      {Object.keys(availableWidgets).map((k) => {
        const props = availableWidgets[k];
        return <WidgetCard key={k} type={k} {...props} />;
      })}
    </Stack>
  );
}

function WidgetCard({ name, element, type, finalElement }) {
  function onDragStart(e) {
    e.dataTransfer.setData("application/formwidgettype", type);
    e.dataTransfer.effectAllowed = "copy";
  }

  const disabledFieldOverlay = {
    pointerEvents: "none",
    background: "#7773",
    zIndex: 10,
  };
  if (!element) {
    return;
  } else {
    return (
      <Card
        draggable
        onDragStart={onDragStart}
        sx={{ cursor: "grab", width: "100%" }}
      >
        <Stack
          direction={"row"}
          justifyContent={"start"}
          alignItems={"center"}
          alignContent={"center"}
        >
          <DragIndicator />
          <div>
            <CardHeader title={name} />
            <CardContent>
              <div style={disabledFieldOverlay}>
                {finalElement ? finalElement({}) : element({})}
              </div>
            </CardContent>
          </div>
        </Stack>
      </Card>
    );
  }
}

function FormField({
  formField,
  setFormField,
  deleteFormField,
  editable,
  setResult,
  result,
}) {
  const { id, type, name } = formField;

  function setName(name) {
    setFormField({ ...formField, name });
  }

  if (!type) {
    return;
  }
  const { element: Element } = availableWidgets[type];
  const dragHandleRef = useRef();
  const [target, setTarget] = useState();
  if (!editable) {
    return (
      <Element
        id={id}
        name={name}
        setName={setName}
        type={type}
        finalField={!editable}
        setValue={setResult}
        value={result?.result}
      />
    );
  } else {
    return (
      <Stack
        direction={"row"}
        sx={{ width: "100%" }}
        alignItems={"center"}
        justifyContent={"space-between"}
        draggable
        onMouseDown={(e) => {
          setTarget(e.target);
        }}
        onDragStart={(e) => {
          if (dragHandleRef.current.contains(target)) {
            e.dataTransfer.setData("application/formwidgetid", id);
          } else {
            e.preventDefault();
          }
        }}
      >
        <span ref={dragHandleRef} style={{ cursor: "grab" }}>
          <DragIndicator />
        </span>
        <Element id={id} name={name} setName={setName} type={type} />
        <IconButton onClick={deleteFormField}>
          <Clear />
        </IconButton>
      </Stack>
    );
  }
}

function capture(e) {
  e.stopPropagation();
  e.preventDefault();
}

function DropZone({ insertField, index, moveField }) {
  const [dragOver, setDragOver] = useState(false);
  return (
    <span
      style={{
        marginTop: "2px",
        marginBottom: "2px",
        width: "100%",
        color: "transparent",
        background: dragOver ? "#22a9" : "#2221",
        height: dragOver ? "2em" : "4px",
        borderRadius: 8,
      }}
      onDragOver={(e) => capture(e) || setDragOver(true)}
      onDragExit={() => setDragOver(false)}
      onDrop={(e) => {
        e.stopPropagation();
        e.preventDefault();
        setDragOver(false);
        if ([...e.dataTransfer.types].includes("application/formwidgettype")) {
          const type = e.dataTransfer.getData("application/formwidgettype");
          insertField({ index, type });
        } else if (
          [...e.dataTransfer.types].includes("application/formwidgetid")
        ) {
          const oldId = e.dataTransfer.getData("application/formwidgetid");
          moveField(oldId, index);
        }
      }}
    />
  );
}

export function Form({ editable, formId, setResults, results }) {
  // const [form, setForm] = useState({ fields: [], ...initialForm });
  const [form, setForm] = useForm(formId);

  function updateFormField(newField) {
    setForm({
      ...form,
      fields: form.fields.map((field) =>
        field?.id === newField.id ? newField : field,
      ),
    });
  }

  function deleteFormField(id) {
    const newForm = {
      ...form,
      fields: form.fields.filter((field) => id !== field?.id),
    };
    setForm({ ...newForm });
  }

  function insertField({ index, type }) {
    const id = crypto.randomUUID();
    const newField = {
      id,
      type,
    };
    form?.fields?.splice(index + 1, 0, newField);
    setForm({ ...form });
  }

  function moveField(oldId, newIndex) {
    const oldIndex = form.fields.findIndex(({ id }) => id === oldId);
    const [oldFormField] = form.fields.splice(oldIndex, 1);
    if (oldIndex > newIndex) {
      newIndex++;
    }
    form.fields.splice(newIndex, 0, oldFormField);
    setForm({ ...form });
  }

  function setResult(fieldId, result) {
    const fieldResult = {
      fieldId,
      result,
      fieldName: form?.fields?.find(({ id }) => id === fieldId)?.name,
    };
    setResults({ ...results, [fieldId]: fieldResult });
  }

  return (
    <Stack sx={{ width: "100%" }} spacing={editable ? 0 : 1}>
      <FormHeader form={form} />
      {editable && (
        <DropZone moveField={moveField} insertField={insertField} index={-1} />
      )}
      {form?.fields?.map((formField, i) => (
        <Grouping key={formField.id}>
          <FormField
            setFormField={(field) => updateFormField(field)}
            deleteFormField={() => deleteFormField(formField.id)}
            formField={formField}
            editable={editable}
            setResult={results && ((result) => setResult(formField.id, result))}
            result={results && results[formField.id]}
          />
          {editable && (
            <DropZone
              moveField={moveField}
              insertField={insertField}
              index={i}
            />
          )}
        </Grouping>
      ))}
    </Stack>
  );
}

function FormHeader() {
  return;
}

//function FormInitialPrompt() {
//  return (
//    <div
//      style={{
//        minWidth: "50vh",
//        minHeight: "50vh",
//        background: "#33333333",
//      }}
//    >
//      Drag and drop and field here to get started
//    </div>
//  );
//}
//
function Grouping({ children }) {
  return <>{children}</>;
}