refactor: toolOptions

src/components/options/ToolOptions.tsx

@@ -1,10 +1,44 @@
 import { Box, Stack, useTheme } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import Typography from '@mui/material/Typography';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, RefObject, useContext, useEffect } from 'react';
+import { Formik, FormikProps, FormikValues, useFormikContext } from 'formik';
+import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups';
+import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 
-export default function ToolOptions({ children }: { children: ReactNode }) {
+export default function ToolOptions<T extends FormikValues>({
+  children,
+  initialValues,
+  validationSchema,
+  compute,
+  input,
+  getGroups,
+  formRef
+}: {
+  children?: ReactNode;
+  initialValues: T;
+  validationSchema: any | (() => any);
+  compute: (optionsValues: T, input: any) => void;
+  input: any;
+  getGroups: (formikProps: FormikProps<T>) => ToolOptionGroup[];
+  formRef?: RefObject<FormikProps<T>>;
+}) {
   const theme = useTheme();
+  const FormikListenerComponent = () => {
+    const { values } = useFormikContext<typeof initialValues>();
+    const { showSnackBar } = useContext(CustomSnackBarContext);
+
+    useEffect(() => {
+      try {
+        compute(values, input);
+      } catch (exception: unknown) {
+        if (exception instanceof Error)
+          showSnackBar(exception.message, 'error');
+      }
+    }, [values, showSnackBar]);
+
+    return null; // This component doesn't render anything
+  };
   return (
     <Box
       sx={{
@@ -19,7 +53,22 @@ export default function ToolOptions({ children }: { children: ReactNode }) {
         <SettingsIcon />
         <Typography fontSize={22}>Tool options</Typography>
       </Stack>
-      <Box mt={2}>{children}</Box>
+      <Box mt={2}>
+        <Formik
+          innerRef={formRef}
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={() => {}}
+        >
+          {(formikProps) => (
+            <Stack direction={'row'} spacing={2}>
+              <FormikListenerComponent />
+              <ToolOptionGroups groups={getGroups(formikProps)} />
+              {children}
+            </Stack>
+          )}
+        </Formik>
+      </Box>
     </Box>
   );
 }