import {
  FieldTypeIcon
} from "./chunk-CD3FLTLL.js";
import {
  ComponentIcon
} from "./chunk-NAZM6EA4.js";
import {
  ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD,
  ItemTypes,
  useDragAndDrop,
  useGetInitialDataQuery
} from "./chunk-UATNJIHQ.js";
import {
  capitalise
} from "./chunk-P4VL3IHZ.js";
import {
  getTranslation
} from "./chunk-HIZVCZYI.js";
import {
  getEmptyImage
} from "./chunk-SYWYLB7I.js";
import {
  BackButton
} from "./chunk-IY256CNP.js";
import {
  create3 as create,
  create4 as create2,
  create5 as create3,
  create6 as create4
} from "./chunk-XLSIZGJF.js";
import {
  MemoizedInputRenderer
} from "./chunk-6AXVGFVQ.js";
import {
  Form,
  generateNKeysBetween,
  useField,
  useForm
} from "./chunk-BFLP6DBI.js";
import {
  Layouts
} from "./chunk-TIVRAWTC.js";
import {
  require_pipe
} from "./chunk-LCL5TIBZ.js";
import {
  useNotification
} from "./chunk-N55RVBRV.js";
import {
  Box,
  Button,
  Divider,
  Flex,
  Grid,
  IconButton,
  Link,
  Main,
  Menu,
  Modal,
  Typography,
  useComposedRefs,
  useIntl
} from "./chunk-7XB6XSWQ.js";
import {
  NavLink
} from "./chunk-TUXTO2Z5.js";
import {
  ForwardRef$1h,
  ForwardRef$1v,
  ForwardRef$3T,
  ForwardRef$45,
  ForwardRef$4d
} from "./chunk-WRD5KPDH.js";
import {
  require_jsx_runtime
} from "./chunk-NIAJZ5MX.js";
import {
  dt
} from "./chunk-ACIMPXWY.js";
import {
  require_react
} from "./chunk-MADUDGYZ.js";
import {
  __toESM
} from "./chunk-PLDDJCW6.js";

// node_modules/@strapi/content-manager/dist/admin/components/ConfigurationForm/Fields.mjs
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
var React = __toESM(require_react(), 1);

// node_modules/@strapi/content-manager/dist/admin/components/ConfigurationForm/EditFieldForm.mjs
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
var FIELD_SCHEMA = create4().shape({
  label: create2().required().nullable(),
  description: create2(),
  editable: create(),
  size: create3().required()
});
var EditFieldForm = ({ attribute, name, onClose }) => {
  const { formatMessage } = useIntl();
  const { toggleNotification } = useNotification();
  const { value, onChange } = useField(name);
  const { data: mainFieldOptions } = useGetInitialDataQuery(void 0, {
    selectFromResult: (res) => {
      if ((attribute == null ? void 0 : attribute.type) !== "relation" || !res.data) {
        return {
          data: []
        };
      }
      if ("targetModel" in attribute && typeof attribute.targetModel === "string") {
        const targetSchema = res.data.contentTypes.find((schema) => schema.uid === attribute.targetModel);
        if (targetSchema) {
          return {
            data: Object.entries(targetSchema.attributes).reduce((acc, [key, attribute2]) => {
              if (!ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD.includes(attribute2.type)) {
                acc.push({
                  label: key,
                  value: key
                });
              }
              return acc;
            }, [])
          };
        }
      }
      return {
        data: []
      };
    },
    skip: (attribute == null ? void 0 : attribute.type) !== "relation"
  });
  if (!value || value.name === TEMP_FIELD_NAME || !attribute) {
    console.error("You've opened a field to edit without it being part of the form, this is likely a bug with Strapi. Please open an issue.");
    toggleNotification({
      message: formatMessage({
        id: "content-manager.containers.edit-settings.modal-form.error",
        defaultMessage: "An error occurred while trying to open the form."
      }),
      type: "danger"
    });
    return null;
  }
  return (0, import_jsx_runtime.jsx)(Modal.Content, {
    children: (0, import_jsx_runtime.jsxs)(Form, {
      method: "PUT",
      initialValues: value,
      validationSchema: FIELD_SCHEMA,
      onSubmit: (data) => {
        onChange(name, data);
        onClose();
      },
      children: [
        (0, import_jsx_runtime.jsx)(Modal.Header, {
          children: (0, import_jsx_runtime.jsxs)(Flex, {
            gap: 3,
            children: [
              (0, import_jsx_runtime.jsx)(FieldTypeIcon, {
                type: attribute.type
              }),
              (0, import_jsx_runtime.jsx)(Modal.Title, {
                children: formatMessage({
                  id: "content-manager.containers.edit-settings.modal-form.label",
                  defaultMessage: "Edit {fieldName}"
                }, {
                  fieldName: capitalise(value.name)
                })
              })
            ]
          })
        }),
        (0, import_jsx_runtime.jsx)(Modal.Body, {
          children: (0, import_jsx_runtime.jsx)(Grid.Root, {
            gap: 4,
            children: [
              {
                name: "label",
                label: formatMessage({
                  id: getTranslation("containers.edit-settings.modal-form.label"),
                  defaultMessage: "Label"
                }),
                size: 6,
                type: "string"
              },
              {
                name: "description",
                label: formatMessage({
                  id: getTranslation("containers.edit-settings.modal-form.description"),
                  defaultMessage: "Description"
                }),
                size: 6,
                type: "string"
              },
              {
                name: "placeholder",
                label: formatMessage({
                  id: getTranslation("containers.edit-settings.modal-form.placeholder"),
                  defaultMessage: "Placeholder"
                }),
                size: 6,
                type: "string"
              },
              {
                name: "editable",
                label: formatMessage({
                  id: getTranslation("containers.edit-settings.modal-form.editable"),
                  defaultMessage: "Editable"
                }),
                size: 6,
                type: "boolean"
              },
              {
                name: "mainField",
                label: formatMessage({
                  id: getTranslation("containers.edit-settings.modal-form.mainField"),
                  defaultMessage: "Entry title"
                }),
                hint: formatMessage({
                  id: getTranslation("containers.SettingPage.edit-settings.modal-form.mainField.hint"),
                  defaultMessage: "Set the displayed field"
                }),
                size: 6,
                options: mainFieldOptions,
                type: "enumeration"
              },
              {
                name: "size",
                label: formatMessage({
                  id: getTranslation("containers.ListSettingsView.modal-form.size"),
                  defaultMessage: "Size"
                }),
                size: 6,
                options: [
                  {
                    value: "4",
                    label: "33%"
                  },
                  {
                    value: "6",
                    label: "50%"
                  },
                  {
                    value: "8",
                    label: "66%"
                  },
                  {
                    value: "12",
                    label: "100%"
                  }
                ],
                type: "enumeration"
              }
            ].filter(filterFieldsBasedOnAttributeType(attribute.type)).map(({ size, ...field }) => (0, import_jsx_runtime.jsx)(Grid.Item, {
              col: size,
              direction: "column",
              alignItems: "stretch",
              children: (0, import_jsx_runtime.jsx)(MemoizedInputRenderer, {
                ...field
              })
            }, field.name))
          })
        }),
        (0, import_jsx_runtime.jsxs)(Modal.Footer, {
          children: [
            (0, import_jsx_runtime.jsx)(Modal.Close, {
              children: (0, import_jsx_runtime.jsx)(Button, {
                variant: "tertiary",
                children: formatMessage({
                  id: "app.components.Button.cancel",
                  defaultMessage: "Cancel"
                })
              })
            }),
            (0, import_jsx_runtime.jsx)(Button, {
              type: "submit",
              children: formatMessage({
                id: "global.finish",
                defaultMessage: "Finish"
              })
            })
          ]
        })
      ]
    })
  });
};
var filterFieldsBasedOnAttributeType = (type) => (field) => {
  switch (type) {
    case "blocks":
    case "richtext":
      return field.name !== "size" && field.name !== "mainField";
    case "boolean":
    case "media":
      return field.name !== "placeholder" && field.name !== "mainField";
    case "component":
    case "dynamiczone":
      return field.name === "label" || field.name === "editable";
    case "json":
      return field.name !== "placeholder" && field.name !== "mainField" && field.name !== "size";
    case "relation":
      return true;
    default:
      return field.name !== "mainField";
  }
};

// node_modules/@strapi/content-manager/dist/admin/components/ConfigurationForm/Fields.mjs
var Fields = ({ attributes, fieldSizes, components, metadatas = {} }) => {
  const { formatMessage } = useIntl();
  const layout = useForm("Fields", (state) => state.values.layout ?? []);
  const onChange = useForm("Fields", (state) => state.onChange);
  const addFieldRow = useForm("Fields", (state) => state.addFieldRow);
  const removeFieldRow = useForm("Fields", (state) => state.removeFieldRow);
  const existingFields = layout.map((row) => row.children.map((field) => field.name)).flat();
  const remainingFields = Object.entries(metadatas).reduce((acc, current) => {
    var _a;
    const [name, { visible, ...field }] = current;
    if (!existingFields.includes(name) && visible === true) {
      const type = (_a = attributes[name]) == null ? void 0 : _a.type;
      const size = type ? fieldSizes[type] : 12;
      acc.push({
        ...field,
        label: field.label ?? name,
        name,
        size
      });
    }
    return acc;
  }, []);
  const handleMoveField = ([newRowIndex, newFieldIndex], [currentRowIndex, currentFieldIndex]) => {
    const newLayout = structuredClone(layout);
    const [field] = newLayout[currentRowIndex].children.splice(currentFieldIndex, 1);
    if (!field || field.name === TEMP_FIELD_NAME) {
      return;
    }
    const newRow = newLayout[newRowIndex].children;
    const [newFieldKey] = generateNKeysBetween2(newRow, 1, currentFieldIndex, newFieldIndex);
    newRow.splice(newFieldIndex, 0, {
      ...field,
      __temp_key__: newFieldKey
    });
    if (newLayout[newRowIndex].children.reduce((acc, curr) => acc + curr.size, 0) > 12) {
      const recalculatedRows = chunkArray(newLayout[newRowIndex].children.filter((field2) => field2.name !== TEMP_FIELD_NAME));
      const rowKeys = generateNKeysBetween2(newLayout, recalculatedRows.length, currentRowIndex, newRowIndex);
      newLayout.splice(newRowIndex, 1, ...recalculatedRows.map((row, index) => ({
        __temp_key__: rowKeys[index],
        children: row
      })));
    }
    const newLayoutWithSpacers = newLayout.map((row) => ({
      ...row,
      children: row.children.filter((field2) => field2.name !== TEMP_FIELD_NAME)
    })).filter((row) => row.children.length > 0).map((row) => {
      var _a;
      const totalSpaceTaken = row.children.reduce((acc, curr) => acc + curr.size, 0);
      if (totalSpaceTaken < 12) {
        const [spacerKey] = generateNKeysBetween((_a = row.children.at(-1)) == null ? void 0 : _a.__temp_key__, void 0, 1);
        return {
          ...row,
          children: [
            ...row.children,
            {
              name: TEMP_FIELD_NAME,
              size: 12 - totalSpaceTaken,
              __temp_key__: spacerKey
            }
          ]
        };
      }
      return row;
    });
    onChange("layout", newLayoutWithSpacers);
  };
  const handleRemoveField = (rowIndex, fieldIndex) => () => {
    if (layout[rowIndex].children.length === 1) {
      removeFieldRow(`layout`, rowIndex);
    } else {
      onChange(`layout.${rowIndex}.children`, [
        ...layout[rowIndex].children.slice(0, fieldIndex),
        ...layout[rowIndex].children.slice(fieldIndex + 1)
      ]);
    }
  };
  const handleAddField = (field) => () => {
    addFieldRow("layout", {
      children: [
        field
      ]
    });
  };
  return (0, import_jsx_runtime2.jsxs)(Flex, {
    paddingTop: 6,
    direction: "column",
    alignItems: "stretch",
    gap: 4,
    children: [
      (0, import_jsx_runtime2.jsxs)(Flex, {
        alignItems: "flex-start",
        direction: "column",
        justifyContent: "space-between",
        children: [
          (0, import_jsx_runtime2.jsx)(Typography, {
            fontWeight: "bold",
            children: formatMessage({
              id: getTranslation("containers.list.displayedFields"),
              defaultMessage: "Displayed fields"
            })
          }),
          (0, import_jsx_runtime2.jsx)(Typography, {
            variant: "pi",
            textColor: "neutral600",
            children: formatMessage({
              id: "containers.SettingPage.editSettings.description",
              defaultMessage: "Drag & drop the fields to build the layout"
            })
          })
        ]
      }),
      (0, import_jsx_runtime2.jsx)(Box, {
        padding: 4,
        hasRadius: true,
        borderStyle: "dashed",
        borderWidth: "1px",
        borderColor: "neutral300",
        children: (0, import_jsx_runtime2.jsxs)(Flex, {
          direction: "column",
          alignItems: "stretch",
          gap: 2,
          children: [
            layout.map((row, rowIndex) => (0, import_jsx_runtime2.jsx)(Grid.Root, {
              gap: 2,
              children: row.children.map(({ size, ...field }, fieldIndex) => (0, import_jsx_runtime2.jsx)(Grid.Item, {
                col: size,
                direction: "column",
                alignItems: "stretch",
                children: (0, import_jsx_runtime2.jsx)(Field, {
                  attribute: attributes[field.name],
                  components,
                  index: [
                    rowIndex,
                    fieldIndex
                  ],
                  name: `layout.${rowIndex}.children.${fieldIndex}`,
                  onMoveField: handleMoveField,
                  onRemoveField: handleRemoveField(rowIndex, fieldIndex)
                })
              }, field.name))
            }, row.__temp_key__)),
            (0, import_jsx_runtime2.jsxs)(Menu.Root, {
              children: [
                (0, import_jsx_runtime2.jsx)(Menu.Trigger, {
                  startIcon: (0, import_jsx_runtime2.jsx)(ForwardRef$1h, {}),
                  endIcon: null,
                  disabled: remainingFields.length === 0,
                  fullWidth: true,
                  variant: "secondary",
                  children: formatMessage({
                    id: getTranslation("containers.SettingPage.add.field"),
                    defaultMessage: "Insert another field"
                  })
                }),
                (0, import_jsx_runtime2.jsx)(Menu.Content, {
                  children: remainingFields.map((field) => (0, import_jsx_runtime2.jsx)(Menu.Item, {
                    onSelect: handleAddField(field),
                    children: field.label
                  }, field.name))
                })
              ]
            })
          ]
        })
      })
    ]
  });
};
var generateNKeysBetween2 = (field, count, currInd, newInd) => {
  var _a, _b, _c, _d;
  const startKey = currInd > newInd ? (_a = field[newInd - 1]) == null ? void 0 : _a.__temp_key__ : (_b = field[newInd]) == null ? void 0 : _b.__temp_key__;
  const endKey = currInd > newInd ? (_c = field[newInd]) == null ? void 0 : _c.__temp_key__ : (_d = field[newInd + 1]) == null ? void 0 : _d.__temp_key__;
  return generateNKeysBetween(startKey, endKey, count);
};
var chunkArray = (array) => {
  const result = [];
  let temp = [];
  array.reduce((acc, field) => {
    if (acc + field.size > 12) {
      result.push(temp);
      temp = [
        field
      ];
      return field.size;
    } else {
      temp.push(field);
      return acc + field.size;
    }
  }, 0);
  if (temp.length > 0) {
    result.push(temp);
  }
  return result;
};
var TEMP_FIELD_NAME = "_TEMP_";
var Field = ({ attribute, components, name, index, onMoveField, onRemoveField }) => {
  const [isModalOpen, setIsModalOpen] = React.useState(false);
  const { formatMessage } = useIntl();
  const { value } = useField(name);
  const [{ isDragging }, objectRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(true, {
    dropSensitivity: "immediate",
    type: ItemTypes.EDIT_FIELD,
    item: {
      index,
      label: value == null ? void 0 : value.label,
      name
    },
    index,
    onMoveItem: onMoveField
  });
  React.useEffect(() => {
    dragPreviewRef(getEmptyImage(), {
      captureDraggingState: false
    });
  }, [
    dragPreviewRef
  ]);
  const composedRefs = useComposedRefs(dragRef, objectRef);
  const handleRemoveField = (e) => {
    e.preventDefault();
    e.stopPropagation();
    onRemoveField(e);
  };
  const onEditFieldMeta = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setIsModalOpen(true);
  };
  const tempRefs = useComposedRefs(dropRef, objectRef);
  if (!value) {
    return null;
  }
  if (value.name === TEMP_FIELD_NAME) {
    return (0, import_jsx_runtime2.jsx)(Flex, {
      tag: "span",
      height: "100%",
      style: {
        opacity: 0
      },
      ref: tempRefs
    });
  }
  return (0, import_jsx_runtime2.jsxs)(Modal.Root, {
    open: isModalOpen,
    onOpenChange: setIsModalOpen,
    children: [
      (0, import_jsx_runtime2.jsxs)(Flex, {
        borderColor: "neutral150",
        background: "neutral100",
        hasRadius: true,
        style: {
          opacity: isDragging ? 0.5 : 1
        },
        ref: dropRef,
        gap: 3,
        cursor: "pointer",
        onClick: () => {
          setIsModalOpen(true);
        },
        children: [
          (0, import_jsx_runtime2.jsx)(DragButton, {
            tag: "span",
            withTooltip: false,
            label: formatMessage({
              id: getTranslation("components.DraggableCard.move.field"),
              defaultMessage: "Move {item}"
            }, {
              item: value.label
            }),
            onClick: (e) => e.stopPropagation(),
            ref: composedRefs,
            children: (0, import_jsx_runtime2.jsx)(ForwardRef$3T, {})
          }),
          (0, import_jsx_runtime2.jsxs)(Flex, {
            direction: "column",
            alignItems: "flex-start",
            grow: 1,
            overflow: "hidden",
            children: [
              (0, import_jsx_runtime2.jsxs)(Flex, {
                gap: 3,
                justifyContent: "space-between",
                width: "100%",
                children: [
                  (0, import_jsx_runtime2.jsx)(Typography, {
                    ellipsis: true,
                    fontWeight: "bold",
                    children: value.label
                  }),
                  (0, import_jsx_runtime2.jsxs)(Flex, {
                    children: [
                      (0, import_jsx_runtime2.jsx)(IconButton, {
                        type: "button",
                        variant: "ghost",
                        background: "transparent",
                        onClick: onEditFieldMeta,
                        withTooltip: false,
                        label: formatMessage({
                          id: getTranslation("components.DraggableCard.edit.field"),
                          defaultMessage: "Edit {item}"
                        }, {
                          item: value.label
                        }),
                        children: (0, import_jsx_runtime2.jsx)(ForwardRef$1v, {})
                      }),
                      (0, import_jsx_runtime2.jsx)(IconButton, {
                        type: "button",
                        variant: "ghost",
                        onClick: handleRemoveField,
                        background: "transparent",
                        withTooltip: false,
                        label: formatMessage({
                          id: getTranslation("components.DraggableCard.delete.field"),
                          defaultMessage: "Delete {item}"
                        }, {
                          item: value.label
                        }),
                        children: (0, import_jsx_runtime2.jsx)(ForwardRef$45, {})
                      })
                    ]
                  })
                ]
              }),
              (attribute == null ? void 0 : attribute.type) === "component" ? (0, import_jsx_runtime2.jsxs)(Flex, {
                paddingTop: 3,
                paddingRight: 3,
                paddingBottom: 3,
                paddingLeft: 0,
                alignItems: "flex-start",
                direction: "column",
                gap: 2,
                width: "100%",
                children: [
                  (0, import_jsx_runtime2.jsx)(Grid.Root, {
                    gap: 4,
                    width: "100%",
                    children: components[attribute.component].layout.map((row) => row.map(({ size, ...field }) => (0, import_jsx_runtime2.jsx)(Grid.Item, {
                      col: size,
                      direction: "column",
                      alignItems: "stretch",
                      children: (0, import_jsx_runtime2.jsx)(Flex, {
                        alignItems: "center",
                        background: "neutral0",
                        paddingTop: 2,
                        paddingBottom: 2,
                        paddingLeft: 3,
                        paddingRight: 3,
                        hasRadius: true,
                        borderColor: "neutral200",
                        children: (0, import_jsx_runtime2.jsx)(Typography, {
                          textColor: "neutral800",
                          children: field.name
                        })
                      })
                    }, field.name)))
                  }),
                  (0, import_jsx_runtime2.jsx)(Link, {
                    // used to stop the edit form from appearing when we click here.
                    onClick: (e) => e.stopPropagation(),
                    startIcon: (0, import_jsx_runtime2.jsx)(ForwardRef$4d, {}),
                    tag: NavLink,
                    to: `../components/${attribute.component}/configurations/edit`,
                    children: formatMessage({
                      id: getTranslation("components.FieldItem.linkToComponentLayout"),
                      defaultMessage: "Set the component's layout"
                    })
                  })
                ]
              }) : null,
              (attribute == null ? void 0 : attribute.type) === "dynamiczone" ? (0, import_jsx_runtime2.jsx)(Flex, {
                paddingTop: 3,
                paddingRight: 3,
                paddingBottom: 3,
                paddingLeft: 0,
                alignItems: "flex-start",
                gap: 2,
                width: "100%",
                children: attribute == null ? void 0 : attribute.components.map((uid) => (0, import_jsx_runtime2.jsxs)(ComponentLink, {
                  // used to stop the edit form from appearing when we click here.
                  onClick: (e) => e.stopPropagation(),
                  to: `../components/${uid}/configurations/edit`,
                  children: [
                    (0, import_jsx_runtime2.jsx)(ComponentIcon, {
                      icon: components[uid].settings.icon
                    }),
                    (0, import_jsx_runtime2.jsx)(Typography, {
                      fontSize: 1,
                      textColor: "neutral600",
                      fontWeight: "bold",
                      children: components[uid].settings.displayName
                    })
                  ]
                }, uid))
              }) : null
            ]
          })
        ]
      }),
      value.name !== TEMP_FIELD_NAME && (0, import_jsx_runtime2.jsx)(EditFieldForm, {
        attribute,
        name,
        onClose: () => setIsModalOpen(false)
      })
    ]
  });
};
var DragButton = dt(IconButton)`
  height: unset;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  background-color: transparent;
  border-radius: 0px;
  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
  cursor: all-scroll;

  svg {
    width: 1.2rem;
    height: 1.2rem;
  }
`;
var ComponentLink = dt(NavLink)`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: ${({ theme }) => theme.spaces[1]};
  padding: ${(props) => props.theme.spaces[2]};
  border: 1px solid ${({ theme }) => theme.colors.neutral200};
  background: ${({ theme }) => theme.colors.neutral0};
  width: 14rem;
  border-radius: ${({ theme }) => theme.borderRadius};
  text-decoration: none;

  &:focus,
  &:hover {
    ${({ theme }) => `
      background-color: ${theme.colors.primary100};
      border-color: ${theme.colors.primary200};

      ${Typography} {
          color: ${theme.colors.primary600};
      }
    `}

    /* > ComponentIcon */
    > div:first-child {
      background: ${({ theme }) => theme.colors.primary200};
      color: ${({ theme }) => theme.colors.primary600};

      svg {
        path {
          fill: ${({ theme }) => theme.colors.primary600};
        }
      }
    }
  }
`;

// node_modules/@strapi/content-manager/dist/admin/components/ConfigurationForm/Form.mjs
var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
var React2 = __toESM(require_react(), 1);
var import_pipe = __toESM(require_pipe(), 1);
var ConfigurationForm = ({ attributes, fieldSizes, layout: editLayout, onSubmit }) => {
  const { components, settings, layout, metadatas } = editLayout;
  const { formatMessage } = useIntl();
  const initialValues = React2.useMemo(() => {
    const transformations = (0, import_pipe.default)(flattenPanels, replaceMainFieldWithNameOnly, extractMetadata, addTmpSpaceToLayout, addTmpKeysToLayout);
    return {
      layout: transformations(layout),
      settings
    };
  }, [
    layout,
    settings
  ]);
  return (0, import_jsx_runtime3.jsx)(Layouts.Root, {
    children: (0, import_jsx_runtime3.jsx)(Main, {
      children: (0, import_jsx_runtime3.jsxs)(Form, {
        initialValues,
        onSubmit,
        method: "PUT",
        children: [
          (0, import_jsx_runtime3.jsx)(Header, {
            name: settings.displayName ?? ""
          }),
          (0, import_jsx_runtime3.jsx)(Layouts.Content, {
            children: (0, import_jsx_runtime3.jsxs)(Flex, {
              alignItems: "stretch",
              background: "neutral0",
              direction: "column",
              gap: 6,
              hasRadius: true,
              shadow: "tableShadow",
              paddingTop: 6,
              paddingBottom: 6,
              paddingLeft: 7,
              paddingRight: 7,
              children: [
                (0, import_jsx_runtime3.jsx)(Typography, {
                  variant: "delta",
                  tag: "h2",
                  children: formatMessage({
                    id: getTranslation("containers.SettingPage.settings"),
                    defaultMessage: "Settings"
                  })
                }),
                (0, import_jsx_runtime3.jsxs)(Grid.Root, {
                  children: [
                    (0, import_jsx_runtime3.jsx)(Grid.Item, {
                      col: 6,
                      s: 12,
                      direction: "column",
                      alignItems: "stretch",
                      children: (0, import_jsx_runtime3.jsx)(MemoizedInputRenderer, {
                        type: "enumeration",
                        label: formatMessage({
                          id: getTranslation("containers.SettingPage.editSettings.entry.title"),
                          defaultMessage: "Entry title"
                        }),
                        hint: formatMessage({
                          id: getTranslation("containers.SettingPage.editSettings.entry.title.description"),
                          defaultMessage: "Set the display field of your entry"
                        }),
                        name: "settings.mainField",
                        options: Object.entries(attributes).reduce((acc, [key, attribute]) => {
                          if (!attribute) {
                            return acc;
                          }
                          if (!ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD.includes(attribute.type)) {
                            acc.push({
                              label: key,
                              value: key
                            });
                          }
                          return acc;
                        }, [])
                      })
                    }),
                    (0, import_jsx_runtime3.jsx)(Grid.Item, {
                      paddingTop: 6,
                      paddingBottom: 6,
                      col: 12,
                      s: 12,
                      direction: "column",
                      alignItems: "stretch",
                      children: (0, import_jsx_runtime3.jsx)(Divider, {})
                    }),
                    (0, import_jsx_runtime3.jsx)(Grid.Item, {
                      col: 12,
                      s: 12,
                      direction: "column",
                      alignItems: "stretch",
                      children: (0, import_jsx_runtime3.jsx)(Typography, {
                        variant: "delta",
                        tag: "h3",
                        children: formatMessage({
                          id: getTranslation("containers.SettingPage.view"),
                          defaultMessage: "View"
                        })
                      })
                    }),
                    (0, import_jsx_runtime3.jsx)(Grid.Item, {
                      col: 12,
                      s: 12,
                      direction: "column",
                      alignItems: "stretch",
                      children: (0, import_jsx_runtime3.jsx)(Fields, {
                        attributes,
                        components,
                        fieldSizes,
                        metadatas
                      })
                    })
                  ]
                })
              ]
            })
          })
        ]
      })
    })
  });
};
var flattenPanels = (layout) => layout.flat(1);
var replaceMainFieldWithNameOnly = (layout) => layout.map((row) => row.map((field) => {
  var _a;
  return {
    ...field,
    mainField: (_a = field.mainField) == null ? void 0 : _a.name
  };
}));
var extractMetadata = (layout) => {
  return layout.map((row) => row.map(({ label, disabled, hint, placeholder, size, name, mainField }) => ({
    label,
    editable: !disabled,
    description: hint,
    mainField,
    placeholder,
    size,
    name,
    __temp_key__: ""
  })));
};
var addTmpSpaceToLayout = (layout) => [
  ...layout.map((row) => {
    const totalSpaceTaken = row.reduce((acc, field) => acc + field.size, 0);
    if (totalSpaceTaken < 12) {
      return [
        ...row,
        {
          name: TEMP_FIELD_NAME,
          size: 12 - totalSpaceTaken,
          __temp_key__: ""
        }
      ];
    }
    return row;
  })
];
var addTmpKeysToLayout = (layout) => {
  const keys = generateNKeysBetween(void 0, void 0, layout.length);
  return layout.map((row, rowIndex) => {
    const fieldKeys = generateNKeysBetween(void 0, void 0, row.length);
    return {
      __temp_key__: keys[rowIndex],
      children: row.map((field, fieldIndex) => {
        return {
          ...field,
          __temp_key__: fieldKeys[fieldIndex]
        };
      })
    };
  });
};
var Header = ({ name }) => {
  const { formatMessage } = useIntl();
  const modified = useForm("Header", (state) => state.modified);
  const isSubmitting = useForm("Header", (state) => state.isSubmitting);
  return (0, import_jsx_runtime3.jsx)(Layouts.Header, {
    title: formatMessage({
      id: getTranslation("components.SettingsViewWrapper.pluginHeader.title"),
      defaultMessage: `Configure the view - {name}`
    }, {
      name: capitalise(name)
    }),
    subtitle: formatMessage({
      id: getTranslation("components.SettingsViewWrapper.pluginHeader.description.edit-settings"),
      defaultMessage: "Customize how the edit view will look like."
    }),
    navigationAction: (0, import_jsx_runtime3.jsx)(BackButton, {}),
    primaryAction: (0, import_jsx_runtime3.jsx)(Button, {
      disabled: !modified,
      loading: isSubmitting,
      type: "submit",
      children: formatMessage({
        id: "global.save",
        defaultMessage: "Save"
      })
    })
  });
};

export {
  TEMP_FIELD_NAME,
  ConfigurationForm
};
//# sourceMappingURL=chunk-TUQVYWWY.js.map