minecluster/src/components/server-options/ExtraPortsOption.jsx

import { useState } from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import Chip from "@mui/material/Chip";

const validatePort = (p) =>
  p !== "25565" && p !== "25575" && p.length < 6 && parseInt(p) < 60_000;

export default function ExtraPortsOption(props) {
  const { extraPorts: initExtraPorts } = props;
  const [extraPorts, setExtraPorts] = useState(initExtraPorts ?? []);
  const { onChange } = props;

  function portChange(e, val, optionType, changedValue) {
    if (optionType === "clear") {
      setExtraPorts([]);
      onChange("extraPorts", []);
      return;
    }
    if (!validatePort(changedValue.option))
      return alert("That port cannot be added/removed as an extra port!");
    setExtraPorts(val);
    onChange("extraPorts", val);
  }

  return (
    <Autocomplete
      multiple
      id="extra-ports-autocomplete"
      options={[]}
      value={extraPorts}
      onChange={portChange}
      freeSolo
      renderInput={(p) => (
        <TextField
          {...p}
          label="Extra Ports"
          helperText="Remember to press enter to add the port!"
          FormHelperTextProps={{ sx: { ml: 0 } }}
        />
      )}
      renderTags={(value, getTagProps) =>
        value.map((option, index) => {
          const defaultChipProps = getTagProps({ index });
          return <Chip label={option} {...defaultChipProps} />;
        })
      }
    />
  );
}