From 7e1949ccc73f21e186fcf8366c931db687934bca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 16 Jan 2024 14:07:29 -0600
Subject: [PATCH] fix: search result selection

---
 .../components/SearchResults.tsx              | 74 ++++++++++++-------
 .../[id]/components/AntagonistBar/index.tsx   |  4 +-
 2 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/AntagonistBar/components/SearchResults.tsx b/src/app/tools/tankopedia/[id]/components/AntagonistBar/components/SearchResults.tsx
index 841781ff5..f98835f2f 100644
--- a/src/app/tools/tankopedia/[id]/components/AntagonistBar/components/SearchResults.tsx
+++ b/src/app/tools/tankopedia/[id]/components/AntagonistBar/components/SearchResults.tsx
@@ -1,16 +1,19 @@
-import { Button, Flex, Text } from '@radix-ui/themes';
-import { use } from 'react';
+import { Button, Dialog, Flex, Text } from '@radix-ui/themes';
+import { produce } from 'immer';
+import { Dispatch, SetStateAction, use } from 'react';
 import { SmallTankIcon } from '../../../../../../../components/SmallTankIcon';
 import {
   TIER_ROMAN_NUMERALS,
   tankDefinitions,
 } from '../../../../../../../core/blitzkrieg/tankDefinitions';
+import { Duel } from '../../../page';
 
 interface SearchResultsProps {
   ids: number[];
+  setDuel: Dispatch<SetStateAction<Duel>>;
 }
 
-export function SearchResults({ ids }: SearchResultsProps) {
+export function SearchResults({ ids, setDuel }: SearchResultsProps) {
   const awaitedTankDefinitions = use(tankDefinitions);
 
   return (
@@ -20,31 +23,50 @@ export function SearchResults({ ids }: SearchResultsProps) {
           const tank = awaitedTankDefinitions[id];
 
           return (
-            <Button key={id} variant="ghost" style={{ width: '100%' }}>
-              <Flex gap="2" align="start" style={{ width: '100%' }}>
-                <Text align="right" color="gray" style={{ width: 24 }}>
-                  {TIER_ROMAN_NUMERALS[tank.tier]}
-                </Text>
+            <Dialog.Close>
+              <Button
+                key={id}
+                variant="ghost"
+                style={{ width: '100%' }}
+                onClick={() => {
+                  setDuel(
+                    produce<Duel>((draft) => {
+                      draft.antagonist.tank = tank;
+                      draft.antagonist.turret = tank.turrets.at(-1)!;
+                      draft.antagonist.gun =
+                        draft.antagonist.turret.guns.at(-1)!;
+                      draft.antagonist.shell = draft.antagonist.gun.shells[0];
+                    }),
+                  );
+                }}
+              >
+                <Flex gap="2" align="start" style={{ width: '100%' }}>
+                  <Text align="right" color="gray" style={{ width: 24 }}>
+                    {TIER_ROMAN_NUMERALS[tank.tier]}
+                  </Text>
 
-                <Text color={tank.tree_type === 'collector' ? 'blue' : 'amber'}>
-                  <Flex gap="2" align="center">
-                    <SmallTankIcon id={tank.id} size={16} />
+                  <Text
+                    color={tank.tree_type === 'collector' ? 'blue' : 'amber'}
+                  >
+                    <Flex gap="2" align="center">
+                      <SmallTankIcon id={tank.id} size={16} />
 
-                    <div
-                      style={{
-                        display: 'block',
-                        color:
-                          tank.tree_type === 'researchable'
-                            ? 'white'
-                            : undefined,
-                      }}
-                    >
-                      {tank.name}
-                    </div>
-                  </Flex>
-                </Text>
-              </Flex>
-            </Button>
+                      <div
+                        style={{
+                          display: 'block',
+                          color:
+                            tank.tree_type === 'researchable'
+                              ? 'white'
+                              : undefined,
+                        }}
+                      >
+                        {tank.name}
+                      </div>
+                    </Flex>
+                  </Text>
+                </Flex>
+              </Button>
+            </Dialog.Close>
           );
         })}
       </Flex>
diff --git a/src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx b/src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx
index d62718d1e..a60a163c3 100644
--- a/src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx
+++ b/src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx
@@ -143,9 +143,9 @@ export function AntagonistBar({
                           justifyContent: 'space-around',
                         }}
                       >
-                        <SearchResults ids={firstChunk} />
+                        <SearchResults ids={firstChunk} setDuel={setDuel} />
                         {secondChunk.length > 0 && (
-                          <SearchResults ids={secondChunk} />
+                          <SearchResults ids={secondChunk} setDuel={setDuel} />
                         )}
                       </div>
                     </Flex>