From e88771db5360e6a81162dee33af09a8ecb86754b Mon Sep 17 00:00:00 2001
From: Onkar Jadhav <omjadhav2610@gmail.com>
Date: Tue, 2 Jan 2024 16:26:30 +0530
Subject: [PATCH] Use AutoCompleteMultiSelectFormField for Symptom selrction

---
 src/Components/Common/SymptomsSelect.tsx | 52 ++++++++++++------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/Components/Common/SymptomsSelect.tsx b/src/Components/Common/SymptomsSelect.tsx
index e96c8070e3a..a6935716d5f 100644
--- a/src/Components/Common/SymptomsSelect.tsx
+++ b/src/Components/Common/SymptomsSelect.tsx
@@ -1,11 +1,11 @@
-import CareIcon from "../../CAREUI/icons/CareIcon";
 import { SYMPTOM_CHOICES } from "../../Common/constants";
 import FormField from "../Form/FormFields/FormField";
 import {
+  FieldChangeEvent,
   FormFieldBaseProps,
   useFormFieldPropsResolver,
 } from "../Form/FormFields/Utils";
-import MultiSelectMenuV2 from "../Form/MultiSelectMenuV2";
+import AutocompleteMultiSelectFormField from "../Form/FormFields/AutocompleteMultiselect";
 
 const ASYMPTOMATIC_ID = 1;
 
@@ -20,7 +20,7 @@ const ASYMPTOMATIC_ID = 1;
 export const SymptomsSelect = (props: FormFieldBaseProps<number[]>) => {
   const field = useFormFieldPropsResolver(props);
 
-  const updateSelection = (value: number[]) => {
+  const updateSelection = ({ value }: FieldChangeEvent<number[]>) => {
     // Skip the complexities if no initial value was present
     if (!props.value?.length) return field.handleChange(value);
 
@@ -44,39 +44,41 @@ export const SymptomsSelect = (props: FormFieldBaseProps<number[]>) => {
     field.handleChange(value);
   };
 
-  const getDescription = ({ id }: { id: number }) => {
-    const value = props.value || [];
-    if (!value.length) return;
+  // TODO : uncomment this whenn `AutocompleteMultiSelectFormField` can accept
+  // `optionDescription` prop
+  // const getDescription = ({ id }: { id: number }) => {
+  //   const value = props.value || [];
+  //   if (!value.length) return;
 
-    if (value.includes(ASYMPTOMATIC_ID) && id !== ASYMPTOMATIC_ID)
-      return (
-        <div className="items-center">
-          <CareIcon className="care-l-exclamation-triangle mr-2" />
-          <span>
-            also unselects <b className="font-medium">Asymptomatic</b>
-          </span>
-        </div>
-      );
+  //   if (value.includes(ASYMPTOMATIC_ID) && id !== ASYMPTOMATIC_ID)
+  //     return (
+  //       <div className="items-center">
+  //         <CareIcon className="care-l-exclamation-triangle mr-2" />
+  //         <span>
+  //           also unselects <b className="font-medium">Asymptomatic</b>
+  //         </span>
+  //       </div>
+  //     );
 
-    if (!value.includes(ASYMPTOMATIC_ID) && id === ASYMPTOMATIC_ID)
-      return (
-        <span>
-          <CareIcon className="care-l-exclamation-triangle mr-2" />
-          {`also unselects the other ${value.length} option(s)`}
-        </span>
-      );
-  };
+  //   if (!value.includes(ASYMPTOMATIC_ID) && id === ASYMPTOMATIC_ID)
+  //     return (
+  //       <span>
+  //         <CareIcon className="care-l-exclamation-triangle mr-2" />
+  //         {`also unselects the other ${value.length} option(s)`}
+  //       </span>
+  //     );
+  // };
 
   return (
     <FormField field={field}>
-      <MultiSelectMenuV2
+      <AutocompleteMultiSelectFormField
         id={field.id}
+        name={field.name}
         options={SYMPTOM_CHOICES}
         disabled={props.disabled}
         placeholder="Select symptoms"
         optionLabel={(option) => option.text}
         optionValue={(option) => option.id}
-        optionDescription={getDescription}
         value={props.value}
         onChange={updateSelection}
       />