function WSEditorCommandArgumentsContent()

in src/web/src/views/workspace/WSEditorCommandArgumentsContent.tsx [45:205]
151 lines of code
15 McCabe index (conditional complexity)

function WSEditorCommandArgumentsContent(props: {
  commandUrl: string;
  args: CMDArg[];
  clsArgDefineMap: ClsArgDefinitionMap;
  onReloadArgs: () => Promise<void>;
  onAddSubCommand: (argVar: string, subArgOptions: { var: string; options: string }[], argStackNames: string[]) => void;
}) {
  const [displayArgumentDialog, setDisplayArgumentDialog] = useState<boolean>(false);
  const [editArg, setEditArg] = useState<CMDArg | undefined>(undefined);
  const [, setEditArgIdxStack] = useState<ArgIdx[] | undefined>(undefined);
  const [displayFlattenDialog, setDisplayFlattenDialog] = useState<boolean>(false);
  const [displayUnwrapClsDialog, setDisplayUnwrapClsDialog] = useState<boolean>(false);

  const handleArgumentDialogClose = async (updated: boolean) => {
    if (updated) {
      props.onReloadArgs();
    }
    setDisplayArgumentDialog(false);
    setEditArg(undefined);
    setEditArgIdxStack(undefined);
  };

  const handleEditArgument = (arg: CMDArg, argIdxStack: ArgIdx[]) => {
    setEditArg(arg);
    setEditArgIdxStack(argIdxStack);
    setDisplayArgumentDialog(true);
  };

  const handleFlattenDialogClose = async (flattened: boolean) => {
    if (flattened) {
      props.onReloadArgs();
    }
    setDisplayFlattenDialog(false);
    setEditArg(undefined);
    setEditArgIdxStack(undefined);
  };

  const handleArgumentFlatten = (arg: CMDArg, argIdxStack: ArgIdx[]) => {
    setEditArg(arg);
    setEditArgIdxStack(argIdxStack);
    setDisplayFlattenDialog(true);
  };

  const handleUnwrapClsDialogClose = async (unwrapped: boolean) => {
    if (unwrapped) {
      props.onReloadArgs();
    }
    setDisplayUnwrapClsDialog(false);
    setEditArg(undefined);
    setEditArgIdxStack(undefined);
  };

  const handleUnwrapClsArgument = (arg: CMDArg, argIdxStack: ArgIdx[]) => {
    setEditArg(arg);
    setEditArgIdxStack(argIdxStack);
    setDisplayUnwrapClsDialog(true);
  };

  const handleAddSubcommand = (arg: CMDArg, argIdxStack: ArgIdx[]) => {
    const argVar = arg.var;
    const argStackNames = argIdxStack.map((argIdx) => {
      let name = argIdx.displayKey;
      while (name.startsWith("-")) {
        name = name.slice(1);
      }
      if (name.endsWith("[]") || name.endsWith("{}")) {
        name = name.slice(0, name.length - 2);
        name = pluralize.singular(name);
      }
      return name;
    });
    let a: CMDArgBase | undefined = arg;
    if (a.type.startsWith("@")) {
      const clsName = (a as CMDClsArg).clsName;
      a = props.clsArgDefineMap[clsName];
    }
    if (a.type.startsWith("dict<")) {
      a = (a as CMDDictArgBase).item;
    } else if (a.type.startsWith("array<")) {
      a = (a as CMDArrayArgBase).item;
    }
    let subArgOptions: { var: string; options: string }[] = [];
    if (a !== undefined) {
      let subArgs;
      if (a.type.startsWith("@")) {
        const clsName = (a as CMDClsArg).clsName;
        subArgs = (props.clsArgDefineMap[clsName] as CMDObjectArgBase).args;
      } else {
        subArgs = (a as CMDObjectArg).args;
      }
      subArgOptions = subArgs.map((value) => {
        return {
          var: value.var,
          options: value.options.join(" "),
        };
      });
    }

    props.onAddSubCommand(argVar, subArgOptions, argStackNames);
  };

  return (
    <React.Fragment>
      <CardContent
        sx={{
          flex: "1 0 auto",
          display: "flex",
          flexDirection: "column",
          alignItems: "stretch",
        }}
      >
        <Box
          sx={{
            mb: 2,
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
          }}
        >
          <CardTitleTypography sx={{ flexShrink: 0 }}>[ ARGUMENT ]</CardTitleTypography>
        </Box>
        <ArgumentNavigation
          commandUrl={props.commandUrl}
          args={props.args}
          clsArgDefineMap={props.clsArgDefineMap}
          onEdit={handleEditArgument}
          onFlatten={handleArgumentFlatten}
          onUnwrap={handleUnwrapClsArgument}
          onAddSubcommand={handleAddSubcommand}
        />
      </CardContent>

      {displayArgumentDialog && (
        <ArgumentDialog
          commandUrl={props.commandUrl}
          arg={editArg!}
          clsArgDefineMap={props.clsArgDefineMap}
          open={displayArgumentDialog}
          onClose={handleArgumentDialogClose}
        />
      )}
      {displayFlattenDialog && (
        <FlattenDialog
          commandUrl={props.commandUrl}
          arg={editArg!}
          clsArgDefineMap={props.clsArgDefineMap}
          open={displayFlattenDialog}
          onClose={handleFlattenDialogClose}
        />
      )}
      {displayUnwrapClsDialog && (
        <UnwrapClsDialog
          commandUrl={props.commandUrl}
          arg={editArg!}
          open={displayUnwrapClsDialog}
          onClose={handleUnwrapClsDialogClose}
        />
      )}
    </React.Fragment>
  );
}