import React, { useState, useEffect } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  FlatList,
  KeyboardAvoidingView,
  TextInput,
  Platform,
  Keyboard,
} from "react-native";
import { useAllTrainDiagram } from "../stateBox/useAllTrainDiagram";

import { customTrainDataDetector } from "./custom-train-data";
import { getTrainType } from "../lib/getTrainType";
import { SheetManager } from "react-native-actions-sheet";
import { useNavigation } from "@react-navigation/native";
import { BigButton } from "./atom/BigButton";
export default function AllTrainDiagramView() {
  const { navigate } = useNavigation();
  const { keyList } = useAllTrainDiagram();
  const [input, setInput] = useState(""); // 文字入力
  const [keyBoardVisible, setKeyBoardVisible] = useState(false);

  useEffect(() => {
    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
      setKeyBoardVisible(true);
    });
    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
      setKeyBoardVisible(false);
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);

  const openTrainInfo = (d) => {
    const train = customTrainDataDetector(d);
    let TrainNumber = "";
    if (train.trainNumDistance != undefined) {
      const timeInfo =
        parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
      TrainNumber = timeInfo + "号";
    }
    const type = getTrainType(train.type).data;
    const limited = `${type}:${train.trainName}${TrainNumber}`;
    const payload = {
      data: { trainNum: d, limited },
      navigate,
      from: "AllTrainIDList",
    };
    SheetManager.show("EachTrainInfo", {
      payload,
    });
  };
  return (
    <View style={{ backgroundColor: "#0099CC", height: "100%" }}>
      <FlatList
        style={{ flex: 1 }}
        data={keyList?.filter((d) => d.includes(input))}
        renderItem={({ item }) => <Item {...{ openTrainInfo, id: item }} />}
        keyExtractor={(item) => item}
        //initialNumToRender={100}
      />
      <KeyboardAvoidingView
        behavior="padding"
        keyboardVerticalOffset={80}
        enabled={Platform.OS === "ios"}
      >
        <View
          style={{
            height: 35,
            margin: 5,
            alignItems: "center",
            backgroundColor: "#F4F4F4",
            flexDirection: "row",
            paddingLeft: 10,
            paddingRight: 10,
            borderRadius: 25,
            borderColor: "#F4F4F4",
          }}
        >
          <TextInput
            placeholder="列番を入力してフィルタリングします。"
            onFocus={() => setKeyBoardVisible(true)}
            onEndEditing={() => {}}
            onChange={(ret) => setInput(ret.nativeEvent.text)}
            value={input}
            style={{ flex: 1 }}
          />
        </View>
      </KeyboardAvoidingView>
      <BigButton
        onPress={() => navigate("menu")}
        string="閉じる"
        style={{
          display:
            Platform.OS === "ios" ? "flex" : keyBoardVisible ? "none" : "flex",
        }}
      />
    </View>
  );
}
const Item = ({ id, openTrainInfo }) => {
  return (
    <TouchableOpacity
      style={{
        padding: 5,
        flexDirection: "row",
        borderColor: "white",
        borderWidth: 1,
        margin: 5,
        borderRadius: 5,
        alignItems: "center",
      }}
      onPress={() => openTrainInfo(id)}
    >
      <View style={{ flex: 1 }} />
      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
        {id}
      </Text>
      <View style={{ flex: 1 }} />
    </TouchableOpacity>
  );
};