jrshikoku/components/StationDiagram/SearchBox/SearchInputSuggestBox.tsx

import lineColorList from "@/assets/originData/lineColorList";
import { useStationList } from "@/stateBox/useStationList";
import { FC, useEffect, useState } from "react";
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  LayoutAnimation,
} from "react-native";

type hoge = {
  trainNumber: string;
  array: string;
  name: string;
  timeType: string;
  time: string;
}[];

export const SearchInputSuggestBox: FC<{
  input: string;
  setInput: (f: string) => void;
  currentStationDiagram: hoge;
}> = ({ input, setInput, currentStationDiagram }) => {
  const { getStationDataFromName } = useStationList();
  const [stationList, setStationList] = useState<
    {
      stationName: string;
      number: string[];
    }[]
  >([]);
  const [listFiltered, setListFiltered] = useState<string>("");
  const [filteredStationLine, setFilteredStationLine] = useState<string[]>([]);
  useEffect(() => {
    const x: { stationName: string; number: string[] }[] = [];
    currentStationDiagram.forEach((d) => {
      d.array.split("#").forEach((s) => {
        if (s == "") return;
        const [stationName, type, time] = s.split(",");
        if (!x.find((item) => item.stationName === stationName)) {
          if (!type?.includes("通")) {
            const stationData = getStationDataFromName(stationName);
            if (listFiltered === "その他") {
              if (stationData.length === 0) {
                x.push({
                  stationName,
                  number: stationData.map((item) => item.StationNumber),
                });
                return;
              }
            }
            const filter = stationData.filter((s) => {
              if (listFiltered === "") return true;
              if (listFiltered === "その他") {
                return !(
                  s.StationNumber ? s.StationNumber.slice(0, 1) : ""
                ).match(/[A-Z]/);
              }
              return (
                s.StationNumber ? s.StationNumber.slice(0, 1) : ""
              ).includes(listFiltered);
            });
            if (filter.length === 0) return;
            x.push({
              stationName,
              number: stationData.map((item) => item.StationNumber),
            });
          }
        }
      });
    });
    setStationList(x);
  }, [currentStationDiagram, listFiltered]);
  useEffect(() => {
    const filtered = stationList
      .map((s) => s.number?.map((r) => (r ? r.slice(0, 1) : "")))
      .flat();
    const arrayB = Array.from(new Set(filtered));
    setFilteredStationLine(arrayB.map((r) => (r !== "" ? r : "その他")));
  }, [stationList]);
  return (
    <View
      style={{
        maxHeight: 200,
        width: "100%",
        backgroundColor: "#0099CC",
        zIndex: 100,
      }}
    >
      <Text>{input}</Text>
      <ScrollView keyboardShouldPersistTaps="handled">
        <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
          {stationList.map(({ stationName, number }) => (
            <TouchableOpacity
              style={{
                margin: 5,
                padding: 5,
                backgroundColor: "#eee",
                borderRadius: 20,
              }}
              key={stationName + number.join(",")}
              onPress={() => setInput(stationName)}
            >
              <Text>{stationName}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
      <View
        style={{
          flexDirection: "row",
          flexWrap: "wrap",
          borderTopColor: "#ccc",
          borderTopWidth: 0.5,
          paddingTop: 0,
          marginTop: 10,
        }}
      >
        <TouchableOpacity
          style={{
            margin: 5,
            padding: 5,
            backgroundColor: "#eee",
            borderRadius: 5,
          }}
          key={"empty"}
          onPress={() => {
            LayoutAnimation.configureNext({
              duration: 400,
              update: { type: "easeInEaseOut", springDamping: 0.6 },
            });
            setListFiltered("");
          }}
        >
          <Text>全て</Text>
        </TouchableOpacity>
        {filteredStationLine.map((line) => (
          <TouchableOpacity
            style={{
              margin: 5,
              padding: 5,
              backgroundColor: lineColorList[line]
                ? `${lineColorList[line]}`
                : "#eee",
              borderRadius: 5,
            }}
            key={line}
            onPress={() => {
              LayoutAnimation.configureNext({
                duration: 400,
                update: { type: "easeInEaseOut", springDamping: 0.6 },
              });
              setListFiltered(line);
            }}
          >
            <Text style={{ color: lineColorList[line] ? `white` : "black" }}>
              {line}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
};