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";
export const SearchUnitBox = ({
  isSearchMode,
  setisSearchMode,
  input,
  setInput,
}) => {
  const { height, width } = useWindowDimensions();
  return (
    <>
      <TouchableOpacity
        style={{
          position: "absolute",
          bottom: !!isSearchMode ? 0 : 60,
          right: 0,
          padding: !!isSearchMode ? 5 : 10,
          margin: !!isSearchMode ? 0 : 10,
          backgroundColor: "#0099CC",
          borderRadius: !!isSearchMode ? 5 : 50,
          width: !!isSearchMode ? width : 50,
          zIndex: 1000,
        }}
        disabled={!!isSearchMode}
        onPress={() => {
          LayoutAnimation.configureNext({
            duration: 100,
            update: { type: "easeInEaseOut", springDamping: 0.6 },
          });
          setisSearchMode(true);
        }}
      >
        {!isSearchMode && <Ionicons name="search" size={30} color="white" />}
        {!!isSearchMode && (
          <View
            style={{
              backgroundColor: "#0099CC",
              flexDirection: "column",
              display: "flex",
              flex: 1,
            }}
          >
            <View
              style={{
                backgroundColor: "white",
                borderRadius: 25,
                height: 30,
                paddingRight: 10,
                paddingLeft: 10,
                flex: 1,
              }}
            >
              <TextInput
                placeholder="駅名や駅ナンバリングを入力してフィルタリングします。"
                onEndEditing={() => {}}
                onChange={(ret) => setInput(ret.nativeEvent.text)}
                value={input}
                style={{ flex: 1 }}
              />
            </View>
            <View style={{ flexDirection: "row", alignItems: "center" }}>
              <TouchableOpacity
                onPress={() => {
                  LayoutAnimation.configureNext({
                    duration: 100,
                    update: { type: "easeInEaseOut", springDamping: 0.6 },
                  });
                  setisSearchMode(false);
                }}
              >
                <Ionicons
                  name="arrow-back"
                  size={20}
                  color="white"
                  style={{ marginRight: 10 }}
                />
              </TouchableOpacity>
              {Object.keys(lineList_LineWebID).map((d) => (
                <TouchableOpacity
                  style={{
                    flex: 1,
                    backgroundColor:
                      lineColorList[stationIDPair[lineList_LineWebID[d]]],
                    padding: 5,
                    marginHorizontal: 2,
                    borderRadius: 10,
                    borderColor: "white",
                    borderWidth: 1,
                    borderStyle: "solid",
                    alignItems: "center",
                    opacity:
                      isSearchMode == stationIDPair[lineList_LineWebID[d]]
                        ? 1
                        : !isSearchMode
                        ? 1
                        : 0.5,
                    zIndex: 10,
                  }}
                  onPress={() => {
                    const id = stationIDPair[lineList_LineWebID[d]];
                    const s = isSearchMode == id ? undefined : id;
                    if (!s) return;
                    setisSearchMode(s);
                  }}
                  key={stationIDPair[lineList_LineWebID[d]]}
                >
                  <Text
                    style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
                  >
                    {stationIDPair[lineList_LineWebID[d]]}
                  </Text>
                </TouchableOpacity>
              ))}
            </View>
          </View>
        )}
      </TouchableOpacity>
    </>
  );
};
