From c5eacec3595e50a917fc2612ae1b4993925d0f8c Mon Sep 17 00:00:00 2001
From: mariogiampieri <mariogiampieri@gmail.com>
Date: Wed, 13 Nov 2024 22:23:54 -0500
Subject: [PATCH] add back color limiting

---
 app/src/app/components/sidebar/ColorPicker.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/src/app/components/sidebar/ColorPicker.tsx b/app/src/app/components/sidebar/ColorPicker.tsx
index 39f2b72f..0d048e89 100644
--- a/app/src/app/components/sidebar/ColorPicker.tsx
+++ b/app/src/app/components/sidebar/ColorPicker.tsx
@@ -3,6 +3,7 @@ import {Button, Checkbox, CheckboxGroup} from '@radix-ui/themes';
 import {styled} from '@stitches/react';
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import {blackA} from '@radix-ui/colors';
+import {useMapStore} from '@/app/store/mapStore';
 
 type ColorPickerProps<T extends boolean = false> = T extends true
   ? {
@@ -27,6 +28,8 @@ export const ColorPicker = <T extends boolean>({
   colorArray,
   multiple,
 }: ColorPickerProps<T>) => {
+  const mapDocument = useMapStore(state => state.mapDocument);
+
   if (multiple) {
     return (
       <div>
@@ -63,11 +66,12 @@ export const ColorPicker = <T extends boolean>({
         value={value !== undefined ? colorArray[value] : undefined}
         defaultValue={colorArray[defaultValue]}
       >
-        {colorArray.map((color, i) => (
-          <RadioGroupItem key={i} style={{backgroundColor: color}} value={color}>
-            <RadioGroupIndicator />
-          </RadioGroupItem>
-        ))}
+        {mapDocument &&
+          colorArray.slice(0, mapDocument.num_districts ?? 0).map((color, i) => (
+            <RadioGroupItem key={i} style={{backgroundColor: color}} value={color}>
+              <RadioGroupIndicator />
+            </RadioGroupItem>
+          ))}
       </RadioGroupRoot>
     </div>
   );