From f1189d252fe175449b0b7c6acb168d80fe9f0696 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=20Erik=20St=C3=B8wer?= <testower@gmail.com>
Date: Mon, 30 Oct 2023 13:31:19 +0100
Subject: [PATCH] Add direct mode and transit mode selects

---
 .../src/components/SearchBar/AccessSelect.tsx |  1 +
 .../components/SearchBar/DirectModeSelect.tsx | 54 +++++++++++++++
 .../src/components/SearchBar/EgressSelect.tsx |  1 +
 .../SearchBar/MultiSelectDropdown.tsx         | 65 +++++++++++++++++++
 .../src/components/SearchBar/SearchBar.tsx    |  4 ++
 .../SearchBar/TransitModeSelect.tsx           | 60 +++++++++++++++++
 6 files changed, 185 insertions(+)
 create mode 100644 client-next/src/components/SearchBar/DirectModeSelect.tsx
 create mode 100644 client-next/src/components/SearchBar/MultiSelectDropdown.tsx
 create mode 100644 client-next/src/components/SearchBar/TransitModeSelect.tsx

diff --git a/client-next/src/components/SearchBar/AccessSelect.tsx b/client-next/src/components/SearchBar/AccessSelect.tsx
index c5904f54957..a2b3e174bd5 100644
--- a/client-next/src/components/SearchBar/AccessSelect.tsx
+++ b/client-next/src/components/SearchBar/AccessSelect.tsx
@@ -14,6 +14,7 @@ export function AccessSelect({
         Access
       </Form.Label>
       <Form.Select
+        id="accessSelect"
         size="sm"
         onChange={(e) => {
           if (e.target.value !== 'not_selected') {
diff --git a/client-next/src/components/SearchBar/DirectModeSelect.tsx b/client-next/src/components/SearchBar/DirectModeSelect.tsx
new file mode 100644
index 00000000000..459cb2e4d47
--- /dev/null
+++ b/client-next/src/components/SearchBar/DirectModeSelect.tsx
@@ -0,0 +1,54 @@
+import { Form } from 'react-bootstrap';
+import { StreetMode, TripQueryVariables } from '../../gql/graphql.ts';
+
+export function DirectModeSelect({
+  tripQueryVariables,
+  setTripQueryVariables,
+}: {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+}) {
+  return (
+    <Form.Group>
+      <Form.Label column="sm" htmlFor="directModeSelect">
+        Direct mode
+      </Form.Label>
+      <Form.Select
+        id="directModeSelect"
+        size="sm"
+        onChange={(e) => {
+          if (e.target.value !== 'not_selected') {
+            setTripQueryVariables({
+              ...tripQueryVariables,
+              modes: {
+                ...tripQueryVariables.modes,
+                directMode: e.target.value as StreetMode,
+              },
+            });
+          } else {
+            setTripQueryVariables({
+              ...tripQueryVariables,
+              modes:
+                tripQueryVariables.modes?.accessMode ||
+                tripQueryVariables.modes?.egressMode ||
+                tripQueryVariables.modes?.transportModes
+                  ? {
+                      ...tripQueryVariables.modes,
+                      directMode: undefined,
+                    }
+                  : undefined,
+            });
+          }
+        }}
+        value={tripQueryVariables.modes?.directMode || 'not_selected'}
+      >
+        <option value="not_selected">Not selected</option>
+        {Object.values(StreetMode).map((mode) => (
+          <option key={mode} value={mode}>
+            {mode}
+          </option>
+        ))}
+      </Form.Select>
+    </Form.Group>
+  );
+}
diff --git a/client-next/src/components/SearchBar/EgressSelect.tsx b/client-next/src/components/SearchBar/EgressSelect.tsx
index ab575a1b322..214e5030a66 100644
--- a/client-next/src/components/SearchBar/EgressSelect.tsx
+++ b/client-next/src/components/SearchBar/EgressSelect.tsx
@@ -14,6 +14,7 @@ export function EgressSelect({
         Egress
       </Form.Label>
       <Form.Select
+        id="egressSelect"
         size="sm"
         onChange={(e) => {
           if (e.target.value !== 'not_selected') {
diff --git a/client-next/src/components/SearchBar/MultiSelectDropdown.tsx b/client-next/src/components/SearchBar/MultiSelectDropdown.tsx
new file mode 100644
index 00000000000..dd70c579765
--- /dev/null
+++ b/client-next/src/components/SearchBar/MultiSelectDropdown.tsx
@@ -0,0 +1,65 @@
+import { ChangeEvent, useState } from 'react';
+import { Form } from 'react-bootstrap';
+
+type MultiSelectDropdownOption<T> = {
+  id: T;
+  label: string;
+};
+
+type MultiSelectDropdownProps<T> = {
+  label: string;
+  options: MultiSelectDropdownOption<T>[];
+  values: T[];
+  onChange: (value: T[]) => void;
+};
+
+const MultiSelectDropdown = <T extends unknown>({ label, options, values, onChange }: MultiSelectDropdownProps<T>) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleOptionChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const optionId = event.target.value as T;
+    const isChecked = event.target.checked;
+
+    if (isChecked) {
+      onChange([...values, optionId]);
+    } else {
+      onChange(values.filter((id) => id !== optionId));
+    }
+  };
+
+  return (
+    <div className={`dropdown ${isOpen ? 'show' : ''}`}>
+      <Form.Label column="sm" htmlFor="multiSelectDropdown">
+        {label}
+      </Form.Label>
+      <Form.Control
+        type="text"
+        id="multiSelectDropdown"
+        size="sm"
+        value={values.join(', ')}
+        onClick={toggleDropdown}
+        onChange={() => {}}
+      />
+      <div style={{ width: '20%' }} className={`dropdown-menu ${isOpen ? 'show' : ''}`}>
+        {options.map((option) => (
+          <Form.Check
+            style={{ marginLeft: '10%' }}
+            key={`${option.id}`}
+            type="checkbox"
+            id={`option_${option.id}`}
+            label={option.label}
+            checked={values.includes(option.id)}
+            onChange={handleOptionChange}
+            value={`${option.id}`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MultiSelectDropdown;
diff --git a/client-next/src/components/SearchBar/SearchBar.tsx b/client-next/src/components/SearchBar/SearchBar.tsx
index 1382a448dcb..3ac07e83b9e 100644
--- a/client-next/src/components/SearchBar/SearchBar.tsx
+++ b/client-next/src/components/SearchBar/SearchBar.tsx
@@ -7,6 +7,8 @@ import { DateInputField } from './DateInputField.tsx';
 import { SearchWindowInput } from './SearchWindowInput.tsx';
 import { AccessSelect } from './AccessSelect.tsx';
 import { EgressSelect } from './EgressSelect.tsx';
+import { DirectModeSelect } from './DirectModeSelect.tsx';
+import { TransitModeSelect } from './TransitModeSelect.tsx';
 
 export function SearchBar({
   onRoute,
@@ -27,7 +29,9 @@ export function SearchBar({
         <DateInputField tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
         <SearchWindowInput tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
         <AccessSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+        <TransitModeSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
         <EgressSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+        <DirectModeSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
         <div className="search-bar-route-button-wrapper">
           <Button variant="primary" onClick={onRoute}>
             Route
diff --git a/client-next/src/components/SearchBar/TransitModeSelect.tsx b/client-next/src/components/SearchBar/TransitModeSelect.tsx
new file mode 100644
index 00000000000..c1b2edb0706
--- /dev/null
+++ b/client-next/src/components/SearchBar/TransitModeSelect.tsx
@@ -0,0 +1,60 @@
+import { TransportMode, TripQueryVariables } from '../../gql/graphql.ts';
+import MultiSelectDropdown from './MultiSelectDropdown.tsx';
+import { useCallback, useMemo } from 'react';
+
+export function TransitModeSelect({
+  tripQueryVariables,
+  setTripQueryVariables,
+}: {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+}) {
+  const values = useMemo(() => {
+    return (
+      tripQueryVariables?.modes?.transportModes
+        ?.map((transportMode) => transportMode?.transportMode)
+        .filter((v) => !!v) || []
+    );
+  }, [tripQueryVariables.modes?.transportModes]);
+
+  const onChange = useCallback(
+    (values: (TransportMode | null | undefined)[]) => {
+      const newTransportModes = values.map((v) => ({
+        transportMode: v,
+      }));
+
+      if (newTransportModes.length === 0) {
+        setTripQueryVariables({
+          ...tripQueryVariables,
+          modes:
+            tripQueryVariables.modes?.directMode ||
+            tripQueryVariables.modes?.accessMode ||
+            tripQueryVariables.modes?.egressMode
+              ? { ...tripQueryVariables.modes }
+              : undefined,
+        });
+      } else {
+        setTripQueryVariables({
+          ...tripQueryVariables,
+          modes: {
+            ...tripQueryVariables.modes,
+            transportModes: newTransportModes.length > 0 ? newTransportModes : undefined,
+          },
+        });
+      }
+    },
+    [tripQueryVariables.modes, setTripQueryVariables],
+  );
+
+  return (
+    <MultiSelectDropdown
+      label="Transit mode"
+      options={Object.values(TransportMode).map((mode) => ({
+        id: mode,
+        label: mode.toString(),
+      }))}
+      values={values}
+      onChange={onChange}
+    />
+  );
+}