import React, { useState, useEffect } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  FlatList,
  KeyboardAvoidingView,
  TextInput,
  Platform,
  Keyboard,
  ScrollView,
  Linking,
} 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";
import { Switch } from "react-native-elements";
export default function AllTrainDiagramView() {
  const { goBack, navigate } = useNavigation();
  const { keyList, allTrainDiagram, allCustonTrainData } = useAllTrainDiagram();
  const [input, setInput] = useState(""); // 文字入力
  const [keyBoardVisible, setKeyBoardVisible] = useState(false);
  const [useStationName, setUseStationName] = useState(false);
  const [useRegex, setUseRegex] = useState(false);
  const regexTextStyle = {
    color: "white",
    fontSize: 20,
    margin: 3,
    padding: 3,
  };
  const regexTextButtonStyle = {
    ...regexTextStyle,
    borderWidth: 1,
    borderColor: "white",
    borderRadius: 3,
  };
  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, allCustonTrainData);
    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 (
    
       {
          if (useStationName) {
            const ls = input.split(",").map((stationName) => {
              return allTrainDiagram[d].includes(stationName);
            });
            return !ls.includes(false);
          }
          if (useRegex) {
            try {
              const regex = new RegExp(input);
              return regex.test(d);
            } catch (e) {
              return false;
            }
          }
          return d.includes(input);
        })}
        renderItem={({ item }) => }
        ListEmptyComponent={
          
            
              検索結果がありません。
            
          
        }
        
        keyExtractor={(item) => item}
        //initialNumToRender={100}
      />
      
        
           {
              setUseRegex(!useRegex);
              setUseStationName(false);
            }}
            color="red"
            style={{ margin: 5 }}
          />
          
            正規表現を使用
          
           {
              setUseRegex(false);
              setUseStationName(!useStationName);
            }}
            color="red"
            style={{ margin: 5 }}
          />
          
            駅名で検索
          
        
        
          正規表現のサンプル:
           setInput("D")}>
            気動車を選択
          
           setInput("3\\d\\d\\dM")}
          >
            マリンライナーを選択
          
           setInput("[4,5]\\d\\d\\d[D,M]")}
          >
            ワンマン列車を選択
          
           setInput("^\\d?\\dM")}
          >
            しおかぜを選択
          
           setInput("^\\d?[0,2,4,6,8]D")}
          >
            下り南風を選択
          
           setInput("^([\\d])+\\1")}
          >
            数字が二桁揃っている列車を選択
          
          
              Linking.openURL(
                "https://qiita.com/tossh/items/635aea9a529b9deb3038"
              )
            }
          >
            参考資料(Qiita)
          
        
        
           setKeyBoardVisible(true)}
            onEndEditing={() => {}}
            onChange={(ret) => setInput(ret.nativeEvent.text)}
            value={input}
            style={{ flex: 1 }}
          />
        
      
      
    
  );
}
const Item = ({ id, openTrainInfo }) => {
  return (
     openTrainInfo(id)}
    >
      
      
        {id}
      
      
    
  );
};