@veecode-platform/plugin-kong-service-manager/dist/components/RoutesList/StringInputList/StringInputList.esm.js

import React from 'react';
import { Box, TextField, Button, Chip } from '@material-ui/core';
import AlertComponent from '../../shared/Alert/Alert.esm.js';
import { validateIP } from '../../../utils/helpers/validateIp.esm.js';
import { validatePort } from '../../../utils/helpers/validatePort.esm.js';

const StringInputList = (props) => {
  const { label, buttonText, onItemsChange, initialItems = [], twoFields = false } = props;
  const [inputValue, setInputValue] = React.useState("");
  const [indexValue, setIndexValue] = React.useState("");
  const [items, setItems] = React.useState(initialItems);
  const [show, setShow] = React.useState(false);
  const [status] = React.useState("warning");
  const [messageStatus, setMessageStatus] = React.useState("");
  const handleClose = (reason) => {
    if (reason === "clickaway") return;
    setShow(false);
  };
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };
  const handleIndexChange = (event) => {
    setIndexValue(event.target.value);
  };
  const handleAddItem = () => {
    if (inputValue.trim() !== "" && (!twoFields || indexValue.trim() !== "")) {
      const newItem = { id: twoFields ? indexValue.trim() : (items.length + 1).toString(), value: inputValue.trim() };
      if (label === "Paths") {
        newItem.value = newItem.value.charAt(0) !== "/" ? `/${newItem.value}` : newItem.value;
      } else if ((label === "Sources" || label === "Destinations") && !validateIP(newItem.id)) {
        setShow(true);
        setMessageStatus(`invalid ip or cidr range: ${newItem.id}`);
        return;
      }
      const newItems = [...items, newItem];
      setItems(newItems);
      setInputValue("");
      setIndexValue("");
      if (onItemsChange) {
        onItemsChange(newItems);
      }
    }
  };
  const handleDeleteItem = (itemToDelete) => () => {
    const newItems = items.filter((item) => item !== itemToDelete);
    setItems(newItems);
    if (onItemsChange) {
      onItemsChange(newItems);
    }
  };
  const handleKeyDown = (event, labelParams) => {
    if (event.key === "Enter") {
      event.preventDefault();
      handleAddItem();
    }
    if (labelParams === "Sources" || labelParams === "Destinations") {
      validatePort(event);
    }
  };
  let indexLabel = twoFields && `Enter a ${label} name`;
  let inputLabel = twoFields ? `Enter a ${label} value` : `Enter a ${label}`;
  if (label === "Sources" || label === "Destinations") {
    indexLabel = `Enter a ${label} IP`;
    inputLabel = `Enter a ${label} port`;
  }
  React.useEffect(() => {
    setItems(initialItems);
  }, [initialItems]);
  return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center", mb: 2 }, twoFields && /* @__PURE__ */ React.createElement(
    TextField,
    {
      label: indexLabel,
      variant: "filled",
      value: indexValue,
      onChange: handleIndexChange,
      onKeyDown: (event) => handleKeyDown(event, ""),
      style: { marginRight: "10px" },
      fullWidth: true
    }
  ), /* @__PURE__ */ React.createElement(
    TextField,
    {
      label: inputLabel,
      variant: "filled",
      value: inputValue,
      onChange: handleInputChange,
      onKeyDown: (event) => handleKeyDown(event, label),
      fullWidth: true
    }
  ), /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "primary", onClick: handleAddItem, style: { marginLeft: "10px" } }, buttonText)), /* @__PURE__ */ React.createElement(Box, { display: "flex", flexWrap: "wrap" }, items.map((item, index) => /* @__PURE__ */ React.createElement(
    Chip,
    {
      key: index,
      label: `${item.id}: ${item.value}`,
      onDelete: handleDeleteItem(item),
      style: { margin: "5px" }
    }
  ))), /* @__PURE__ */ React.createElement(
    AlertComponent,
    {
      open: show,
      close: handleClose,
      message: messageStatus,
      status
    }
  ));
};

export { StringInputList as default };
//# sourceMappingURL=StringInputList.esm.js.map