From f7b05f1e08eb11ead8ce5a26e263ae22f77cd6da Mon Sep 17 00:00:00 2001
From: Tran Anh Tuan <tunztunzz@Trans-Mac-mini.local>
Date: Fri, 7 Nov 2025 15:28:55 +0700
Subject: [PATCH] tadd select component

---
 app/(tabs)/sensor.tsx                         |  22 +-
 app/auth/login.tsx                            |   7 +-
 components/ButtonCreateNewHaulOrTrip.tsx      |   6 +
 components/Select.tsx                         | 272 ++++++++++++++++++
 .../components/FishCardForm.tsx               |  15 +-
 .../components/FishSelectDropdown.tsx         |  17 +-
 state/use-fish.ts                             |   4 +-
 7 files changed, 318 insertions(+), 25 deletions(-)
 create mode 100644 components/Select.tsx

diff --git a/app/(tabs)/sensor.tsx b/app/(tabs)/sensor.tsx
index d8efbe9..dcb363b 100644
--- a/app/(tabs)/sensor.tsx
+++ b/app/(tabs)/sensor.tsx
@@ -1,4 +1,5 @@
 import ScanQRCode from "@/components/ScanQRCode";
+import Select from "@/components/Select";
 import { useState } from "react";
 import {
   Platform,
@@ -21,13 +22,32 @@ export default function Sensor() {
   const handleScanPress = () => {
     setScanModalVisible(true);
   };
+  const [selectedValue, setSelectedValue] = useState<
+    string | number | undefined
+  >(undefined);
+
+  const options = [
+    { label: "Apple", value: "apple" },
+    { label: "Banana", value: "banana" },
+    { label: "Cherry", value: "cherry", disabled: true },
+  ];
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <ScrollView contentContainerStyle={styles.scrollContent}>
         <View style={styles.container}>
           <Text style={styles.titleText}>Cảm biến trên tàu</Text>
-
+          <Select
+            style={{ width: "80%", marginBottom: 20 }}
+            options={options}
+            value={selectedValue}
+            onChange={(val) => {
+              setSelectedValue(val);
+              console.log("Value: ", val);
+            }}
+            placeholder="Select a fruit"
+            allowClear
+          />
           <Pressable style={styles.scanButton} onPress={handleScanPress}>
             <Text style={styles.scanButtonText}>📱 Scan QR Code</Text>
           </Pressable>
diff --git a/app/auth/login.tsx b/app/auth/login.tsx
index 08ad784..0bea752 100644
--- a/app/auth/login.tsx
+++ b/app/auth/login.tsx
@@ -1,8 +1,8 @@
 import { ThemedText } from "@/components/themed-text";
 import { ThemedView } from "@/components/themed-view";
-import { showToastError } from "@/config";
 import { TOKEN } from "@/constants";
 import { login } from "@/controller/AuthController";
+import { showErrorToast } from "@/services/toast_service";
 import {
   getStorageItem,
   removeStorageItem,
@@ -57,7 +57,7 @@ export default function LoginScreen() {
   const handleLogin = async () => {
     // Validate input
     if (!username.trim() || !password.trim()) {
-      showToastError("Lỗi", "Vui lòng nhập tài khoản và mật khẩu");
+      showErrorToast("Vui lòng nhập tài khoản và mật khẩu");
       return;
     }
 
@@ -81,8 +81,7 @@ export default function LoginScreen() {
         router.replace("/(tabs)");
       }
     } catch (error) {
-      showToastError(
-        "Lỗi",
+      showErrorToast(
         error instanceof Error ? error.message : "Đăng nhập thất bại"
       );
     } finally {
diff --git a/components/ButtonCreateNewHaulOrTrip.tsx b/components/ButtonCreateNewHaulOrTrip.tsx
index 0d6629f..7246af0 100644
--- a/components/ButtonCreateNewHaulOrTrip.tsx
+++ b/components/ButtonCreateNewHaulOrTrip.tsx
@@ -20,6 +20,12 @@ interface StartButtonProps {
   onPress?: () => void;
 }
 
+interface a {
+  fishingLogs?: Model.FishingLogInfo[] | null;
+  onCallback?: (fishingLogs: Model.FishingLogInfo[]) => void;
+  isEditing?: boolean;
+}
+
 const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
   gpsData,
   onPress,
diff --git a/components/Select.tsx b/components/Select.tsx
new file mode 100644
index 0000000..e02b745
--- /dev/null
+++ b/components/Select.tsx
@@ -0,0 +1,272 @@
+import { AntDesign } from "@expo/vector-icons";
+import React, { useEffect, useState } from "react";
+import {
+  ActivityIndicator,
+  ScrollView,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native";
+
+export interface SelectOption {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+}
+
+export interface SelectProps {
+  value?: string | number;
+  defaultValue?: string | number;
+  options: SelectOption[];
+  onChange?: (value: string | number | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  allowClear?: boolean;
+  showSearch?: boolean;
+  mode?: "single" | "multiple"; // multiple not implemented yet
+  style?: StyleProp<ViewStyle>;
+  size?: "small" | "middle" | "large";
+}
+
+/**
+ * Select
+ * A Select component inspired by Ant Design, adapted for React Native.
+ * Supports single selection, search, clear, loading, disabled states.
+ */
+const Select: React.FC<SelectProps> = ({
+  value,
+  defaultValue,
+  options,
+  onChange,
+  placeholder = "Select an option",
+  disabled = false,
+  loading = false,
+  allowClear = false,
+  showSearch = false,
+  mode = "single",
+  style,
+  size = "middle",
+}) => {
+  const [selectedValue, setSelectedValue] = useState<
+    string | number | undefined
+  >(value ?? defaultValue);
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const [containerHeight, setContainerHeight] = useState(0);
+
+  useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+
+  const filteredOptions = showSearch
+    ? options.filter((opt) =>
+        opt.label.toLowerCase().includes(searchText.toLowerCase())
+      )
+    : options;
+
+  const selectedOption = options.find((opt) => opt.value === selectedValue);
+
+  const handleSelect = (val: string | number) => {
+    setSelectedValue(val);
+    onChange?.(val);
+    setIsOpen(false);
+    setSearchText("");
+  };
+
+  const handleClear = () => {
+    setSelectedValue(undefined);
+    onChange?.(undefined);
+  };
+
+  const sizeMap = {
+    small: { height: 32, fontSize: 14, paddingHorizontal: 10 },
+    middle: { height: 40, fontSize: 16, paddingHorizontal: 14 },
+    large: { height: 48, fontSize: 18, paddingHorizontal: 18 },
+  };
+
+  const sz = sizeMap[size];
+
+  return (
+    <View style={styles.wrapper}>
+      <TouchableOpacity
+        style={[
+          styles.container,
+          {
+            height: sz.height,
+            paddingHorizontal: sz.paddingHorizontal,
+            opacity: disabled ? 0.6 : 1,
+          },
+          style,
+        ]}
+        onPress={() => !disabled && !loading && setIsOpen(!isOpen)}
+        disabled={disabled || loading}
+        activeOpacity={0.8}
+        onLayout={(e) => setContainerHeight(e.nativeEvent.layout.height)}
+      >
+        <View style={styles.content}>
+          {loading ? (
+            <ActivityIndicator size="small" color="#4ecdc4" />
+          ) : (
+            <Text
+              style={[
+                styles.text,
+                {
+                  fontSize: sz.fontSize,
+                  color: selectedValue ? "#111" : "#999",
+                },
+              ]}
+              numberOfLines={1}
+            >
+              {selectedOption?.label || placeholder}
+            </Text>
+          )}
+        </View>
+        <View style={styles.suffix}>
+          {allowClear && selectedValue && !loading ? (
+            <TouchableOpacity onPress={handleClear} style={styles.icon}>
+              <AntDesign name="close" size={16} color="#999" />
+            </TouchableOpacity>
+          ) : null}
+          <AntDesign
+            name={isOpen ? "up" : "down"}
+            size={14}
+            color="#999"
+            style={styles.arrow}
+          />
+        </View>
+      </TouchableOpacity>
+
+      {isOpen && (
+        <View style={[styles.dropdown, { top: containerHeight }]}>
+          {showSearch && (
+            <TextInput
+              style={styles.searchInput}
+              placeholder="Search..."
+              value={searchText}
+              onChangeText={setSearchText}
+              autoFocus
+            />
+          )}
+          <ScrollView style={styles.list}>
+            {filteredOptions.map((item) => (
+              <TouchableOpacity
+                key={item.value}
+                style={[
+                  styles.option,
+                  item.disabled && styles.optionDisabled,
+                  selectedValue === item.value && styles.optionSelected,
+                ]}
+                onPress={() => !item.disabled && handleSelect(item.value)}
+                disabled={item.disabled}
+              >
+                <Text
+                  style={[
+                    styles.optionText,
+                    item.disabled && styles.optionTextDisabled,
+                    selectedValue === item.value && styles.optionTextSelected,
+                  ]}
+                >
+                  {item.label}
+                </Text>
+                {selectedValue === item.value && (
+                  <AntDesign name="check" size={16} color="#4ecdc4" />
+                )}
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: "relative",
+  },
+  container: {
+    borderWidth: 1,
+    borderColor: "#e6e6e6",
+    borderRadius: 8,
+    backgroundColor: "#fff",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  content: {
+    flex: 1,
+  },
+  text: {
+    color: "#111",
+  },
+  suffix: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  icon: {
+    marginRight: 8,
+  },
+  arrow: {
+    marginLeft: 4,
+  },
+  dropdown: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: "#e6e6e6",
+    borderTopWidth: 0,
+    borderRadius: 10,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 5,
+    zIndex: 1000,
+  },
+  searchInput: {
+    borderWidth: 1,
+    borderColor: "#e6e6e6",
+    borderRadius: 4,
+    padding: 8,
+    margin: 8,
+  },
+  list: {
+    maxHeight: 200,
+  },
+  option: {
+    padding: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f0f0f0",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  optionDisabled: {
+    opacity: 0.5,
+  },
+  optionSelected: {
+    backgroundColor: "#f6ffed",
+  },
+  optionText: {
+    fontSize: 16,
+    color: "#111",
+  },
+  optionTextDisabled: {
+    color: "#999",
+  },
+  optionTextSelected: {
+    color: "#4ecdc4",
+    fontWeight: "600",
+  },
+});
+
+export default Select;
diff --git a/components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx b/components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx
index 515bf62..4c9b8b3 100644
--- a/components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx
+++ b/components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx
@@ -45,16 +45,6 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
   onUpdateCatchItem,
 }) => {
   const { fishSpecies } = useFishes();
-  const [fishNameOptions, setFishNameOptions] = React.useState<string[]>([]);
-
-  React.useEffect(() => {
-    console.log("Length: ", fishSpecies?.length);
-
-    if (Array.isArray(fishSpecies)) {
-      const names = fishSpecies.map((item) => item.name).filter(Boolean);
-      setFishNameOptions(names);
-    }
-  }, [fishSpecies]);
 
   return (
     <>
@@ -66,15 +56,14 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
         {isEditing ? (
           <FishSelectDropdown
             options={fishSpecies || []}
-            selectedValue={null}
+            selectedFishId={selectedFishIndex}
             isOpen={selectedFishIndex === index}
             onToggle={() =>
               setSelectedFishIndex(selectedFishIndex === index ? null : index)
             }
             onSelect={(value: Model.FishSpeciesResponse) => {
               onUpdateCatchItem(index, "fish_name", value.name);
-              // setSelectedFishIndex(null);
-
+              setSelectedFishIndex(value.id);
               console.log("Fish Selected: ", fish);
             }}
             zIndex={1000 - index}
diff --git a/components/tripInfo/modal/NetDetailModal/components/FishSelectDropdown.tsx b/components/tripInfo/modal/NetDetailModal/components/FishSelectDropdown.tsx
index 80980e8..a6eb5e4 100644
--- a/components/tripInfo/modal/NetDetailModal/components/FishSelectDropdown.tsx
+++ b/components/tripInfo/modal/NetDetailModal/components/FishSelectDropdown.tsx
@@ -5,7 +5,7 @@ import styles from "../../style/NetDetailModal.styles";
 
 interface FishSelectDropdownProps {
   options: Model.FishSpeciesResponse[];
-  selectedValue: Model.FishSpeciesResponse | null;
+  selectedFishId: number | null;
   isOpen: boolean;
   onToggle: () => void;
   onSelect: (value: Model.FishSpeciesResponse) => void;
@@ -15,7 +15,7 @@ interface FishSelectDropdownProps {
 
 export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
   options,
-  selectedValue,
+  selectedFishId,
   isOpen,
   onToggle,
   onSelect,
@@ -23,12 +23,17 @@ export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
   styleOverride,
 }) => {
   const dropdownStyle = styleOverride || styles.optionsList;
-
+  const findFishNameById = (id: number | null) => {
+    const fish = options.find((item) => item.id === id);
+    return fish?.name || "Chọn cá";
+  };
+  const [selectedFish, setSelectedFish] =
+    React.useState<Model.FishSpeciesResponse | null>(null);
   return (
     <View style={{ zIndex }}>
       <TouchableOpacity style={styles.selectButton} onPress={onToggle}>
         <Text style={styles.selectButtonText}>
-          {selectedValue ? selectedValue.name : "Chọn cá"}
+          {findFishNameById(selectedFishId)}
         </Text>
         <IconSymbol
           name={isOpen ? "chevron.up" : "chevron.down"}
@@ -44,7 +49,9 @@ export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
               style={styles.optionItem}
               onPress={() => onSelect(option)}
             >
-              <Text style={styles.optionText}>{option.name}</Text>
+              <Text style={styles.optionText}>
+                {findFishNameById(option.id)}
+              </Text>
             </TouchableOpacity>
           ))}
         </ScrollView>
diff --git a/state/use-fish.ts b/state/use-fish.ts
index 86f6257..61b7e33 100644
--- a/state/use-fish.ts
+++ b/state/use-fish.ts
@@ -2,7 +2,7 @@ import { queryFish } from "@/controller/FishController";
 import { create } from "zustand";
 
 type Fish = {
-  fishSpecies: Model.FishSpeciesResponse | null;
+  fishSpecies: Model.FishSpeciesResponse[] | null;
   getFishSpecies: () => Promise<void>;
   error: string | null;
   loading?: boolean;
@@ -13,7 +13,7 @@ export const useFishes = create<Fish>((set) => ({
   getFishSpecies: async () => {
     try {
       const response = await queryFish();
-      console.log("Fish fetching API");
+      console.log("Fish fetching API: ", response.data.length);
 
       set({ fishSpecies: response.data, loading: false });
     } catch (error) {