jrshikoku/components/Menu/RailScope/SearchUnitBox.tsx

import React from "react";
import {
  TouchableOpacity,
  Text,
  View,
  LayoutAnimation,
  TextInput,
  KeyboardAvoidingView,
  Platform,
} from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
import { useWindowDimensions } from "react-native";
import lineColorList from "@/assets/originData/lineColorList";
import { lineList_LineWebID, stationIDPair } from "@/lib/getStationList";
import { StationSource } from "@/types";

export const SearchUnitBox = ({
  stationSource,
  setStationSource,
  closeSearch,
}: {
  stationSource: StationSource;
  setStationSource: (s: StationSource) => void;
  closeSearch: () => void;
}) => {
  const { height, width } = useWindowDimensions();
  const isSearch = stationSource.type === "search";
  const query = isSearch ? stationSource.query : "";
  const lineId = isSearch ? stationSource.lineId : undefined;

  return (
    <>
      <TouchableOpacity
        style={{
          position: "absolute",
          bottom: isSearch ? 0 : 60,
          right: 0,
          padding: isSearch ? 5 : 10,
          margin: isSearch ? 0 : 10,
          backgroundColor: "#0099CC",
          borderRadius: isSearch ? 5 : 50,
          width: isSearch ? width : 50,
          zIndex: 1000,
        }}
        disabled={isSearch}
        onPress={() => {
          LayoutAnimation.configureNext({
            duration: 100,
            update: { type: "easeInEaseOut", springDamping: 0.6 },
          });
          setStationSource({ type: "search", query: "", lineId: undefined });
        }}
      >
        {!isSearch && <Ionicons name="search" size={30} color="white" />}
        {isSearch && (
          <View
            style={{
              backgroundColor: "#0099CC",
              flexDirection: "column",
              display: "flex",
              flex: 1,
              alignContent: "center",
              justifyContent: "flex-end",
            }}
          >
            <View style={{ flexDirection: "row", alignItems: "center" }}>
              <TouchableOpacity
                onPress={() => {
                  LayoutAnimation.configureNext({
                    duration: 100,
                    update: { type: "easeInEaseOut", springDamping: 0.6 },
                  });
                  closeSearch();
                }}
              >
                <Ionicons
                  name="arrow-back"
                  size={20}
                  color="white"
                  style={{ marginRight: 10 }}
                />
              </TouchableOpacity>
              <View
                style={{
                  backgroundColor: "white",
                  borderRadius: 25,
                  height: 30,
                  paddingRight: 10,
                  paddingLeft: 10,
                  flex: 1,
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <TextInput
                  placeholder="駅名や駅ナンバリングを入力してフィルタリングします。"
                  onEndEditing={() => {}}
                  onChange={(ret) =>
                    setStationSource({ type: "search", query: ret.nativeEvent.text, lineId })
                  }
                  value={query}
                  style={{ flex: 1 }}
                />
                {query && (
                  <TouchableOpacity
                    onPress={() => setStationSource({ type: "search", query: "", lineId })}
                    style={{
                      padding: 3,
                      borderRadius: 15,
                      backgroundColor: "lightgray",
                    }}
                  >
                    <Ionicons
                      name="close"
                      size={20}
                      color="white"
                    />
                  </TouchableOpacity>
                )}
              </View>
            </View>
            {!query && (
              <View style={{ flexDirection: "row", alignItems: "center" }}>
                {Object.keys(lineList_LineWebID).map((d) => {
                  const buttonLineId = stationIDPair[lineList_LineWebID[d]];
                  return (
                    <TouchableOpacity
                      style={{
                        flex: 1,
                        backgroundColor: lineColorList[buttonLineId],
                        padding: 5,
                        marginHorizontal: 2,
                        borderRadius: 10,
                        borderColor: "white",
                        borderWidth: 1,
                        borderStyle: "solid",
                        alignItems: "center",
                        opacity: !lineId ? 1 : lineId === buttonLineId ? 1 : 0.5,
                        zIndex: 10,
                      }}
                      onPress={() => {
                        // 同じ路線を再タップしても変化なし（元の挙動を維持）
                        if (lineId === buttonLineId) return;
                        setStationSource({ type: "search", query, lineId: buttonLineId });
                      }}
                      key={buttonLineId}
                    >
                      <Text
                        style={{
                          color: "white",
                          fontWeight: "bold",
                          fontSize: 20,
                        }}
                      >
                        {buttonLineId}
                      </Text>
                    </TouchableOpacity>
                  );
                })}
              </View>
            )}
          </View>
        )}
      </TouchableOpacity>
    </>
  );
};