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";
export const SearchUnitBox = ({ isSearchMode, setisSearchMode }) => {
  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: 200,
          update: { type: "easeInEaseOut", springDamping: 0.6 },
        });
        setisSearchMode(true);
      }}
    >
      {!isSearchMode && <Ionicons name="search" size={30} color="white" />}
      {isSearchMode && (
          <View style={{ backgroundColor: "#0099CC" }}>
            <Text
              style={{ color: "white" }}
              onPress={() => {
                LayoutAnimation.configureNext({
                  duration: 200,
                  update: { type: "easeInEaseOut", springDamping: 0.6 },
                });
                setisSearchMode(false);
              }}
            >
              あああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
            </Text>
            <View
              style={{
                backgroundColor: "white",
                borderRadius: 25,
                height: 30,
                paddingRight: 10,
                paddingLeft: 10,
              }}
            >
              <TextInput
                placeholder="駅名を入力してフィルタリングします。"
                //onFocus={() => setKeyBoardVisible(true)}
                onEndEditing={() => {}}
                //onChange={(ret) => setInput(ret.nativeEvent.text)}
                //value={input}
                style={{ flex: 1 }}
              />
            </View>
          </View>
      )}
    </TouchableOpacity>
    </>
  );
};