import React, { useEffect, useState, useRef } from "react";
import {
  View,
  LayoutAnimation,
  ScrollView,
  Linking,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  TouchableHighlight,
  Platform,
} from "react-native";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import ActionSheet, {
  SheetManager,
  useScrollHandlers,
} from "react-native-actions-sheet";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { AS } from "../../storageControl";
import LottieView from "lottie-react-native";
import trainList from "../../assets/originData/trainList";
import { lineList } from "../../lib/getStationList";
import {
  heightPercentageToDP,
  widthPercentageToDP,
} from "react-native-responsive-screen";
import lineColorList from "../../assets/originData/lineColorList";
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";

export const EachTrainInfo = (props) => {
  if (!props.payload) return <></>;
  const {
    data,
    navigate,
    originalStationList,
    openStationACFromEachTrainInfo = () => {},
    from,
  } = props.payload;
  const [trainData, setTrainData] = useState([]);
  const [isTop, setIsTop] = useState(true);
  const [currentPosition, setCurrentPosition] = useState([]);

  const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");

  const { currentTrain } = useCurrentTrain();

  const [currentTrainData, setCurrentTrainData] = useState([]);

  useEffect(() => {
    setCurrentTrainData(
      checkDuplicateTrainData(
        currentTrain.filter((d) => d.num == data.trainNum)
      )
    );
  }, [currentTrain]);

  useEffect(() => {
    //列車現在地アイコン表示スイッチ
    AS.getItem("trainPositionSwitch")
      .then((d) => {
        if (d) {
          setTrainPositionSwitch(d);
        } else {
        }
      })
      .catch((d) => AS.setItem("trainPositionSwitch", "false"));
  }, []);
  const insets = useSafeAreaInsets();
  const getStationData = (stationName) => {
    const Stations = stationList.map((a) =>
      a.filter((d) => d.StationName == stationName)
    );
    const Station =
      Stations &&
      Stations.reduce((newArray, e) => {
        return newArray.concat(e);
      }, []);
    if (!Station[0]) return [];
    return Station.map((d) => d.StationNumber)[0];
  };
  useEffect(() => {
    //currentTrainData.Pos = "鴨川～端岡"; //test
    if (!currentTrainData?.Pos) return;
    if (currentTrainData?.Pos.match("～")) {
      const pos = currentTrainData?.Pos.replace("（下り）", "")
        .replace("（上り）", "")
        .split("～");
      setCurrentPosition([getStationData(pos[0]), getStationData(pos[1])]);
    } else {
      setCurrentPosition([getStationData(currentTrainData?.Pos)]);
    }
  }, [currentTrainData]);

  const stationList =
    originalStationList &&
    lineList.map((d) =>
      originalStationList[d].map((a) => ({
        StationNumber: a.StationNumber,
        StationName: a.Station_JP,
      }))
    );
  const stopStationIDList = trainData.map((i, index) => {
    const [station, se, time] = i.split(",");
    const Stations = stationList.map((a) =>
      a.filter((d) => d.StationName == station)
    );
    const StationNumbers =
      Stations &&
      Stations.reduce((newArray, e) => {
        return newArray.concat(e);
      }, [])
        .filter((d) => d.StationNumber)
        .map((d) => d.StationNumber);
    return StationNumbers[0];
  });
  function findReversalPoints(array) {
    try {
      // arrayは現在位置の駅ID(駅在宅の場合は1つの配列、駅間の場合は2つの配列)
      // stopStationIDListは停車駅の駅IDの配列
      if (!stopStationIDList.length) return [];
      // arrayが二次元配列だったら早期リターン
      if (!array instanceof Array) return [];
      if (!array.length) return [];
      if (array[0] instanceof Array) return [];
      const arrayNumber = array.map((d) => ({
        line: d
          .split("")
          .filter((s) => "A" < s && s < "Z")
          .join(""),
        ID: d
          .split("")
          .filter((s) => "0" <= s && s <= "9")
          .join(""),
      }));
      const stopStationIDListNumber = stopStationIDList.map((d) => {
        if (!d) return { line: [], ID: [] };
        return {
          line: d
            .split("")
            .filter((s) => "A" < s && s < "Z")
            .join(""),
          ID: d
            .split("")
            .filter((s) => "0" <= s && s <= "9")
            .join(""),
        };
      });
      // 完全一致
      if (array.length == 1) {
        const index = stopStationIDList.indexOf(array[0]);
        if (index != -1) return [index];
        // 通過駅の場合
        for (let i = 0; i < stopStationIDListNumber.length - 1; i++) {
          if (stopStationIDListNumber[i].ID < arrayNumber[0].ID) {
            if (stopStationIDListNumber[i + 1].ID > arrayNumber[0].ID) {
              return [i + 1];
            }
          }
          if (stopStationIDListNumber[i].ID > arrayNumber[0].ID) {
            if (stopStationIDListNumber[i + 1].ID < arrayNumber[0].ID) {
              return [i + 1];
            }
          }
        }
      }
      // 駅間の場合
      if (array.length == 2) {
        const index1 = stopStationIDList.indexOf(array[0]);
        const index2 = stopStationIDList.indexOf(array[1]);
        if (index1 != -1 && index2 != -1) {
          // 駅間で通過駅も無い場合
          if (index1 < index2) {
            if (index1 + 1 == index2) {
              return [index2];
            } else {
              const returnArray = [];
              for (let i = index1 + 1; i <= index2; i++) {
                returnArray.push(i);
              }
              return returnArray;
            }
          }
          if (index1 > index2) {
            if (index2 + 1 == index1) return [index1];
            else {
              const returnArray = [];
              for (let i = index2 + 1; i <= index1; i++) {
                returnArray.push(i);
              }
              return returnArray;
            }
          }
        } else {
          const getNearStationID = (stationID) => {
            for (let i = 0; i <= stopStationIDListNumber.length; i++) {
              if (stopStationIDListNumber[i].ID < stationID) {
                if (stopStationIDListNumber[i + 1].ID > stationID) {
                  return i + 1;
                }
              }
              if (stopStationIDListNumber[i].ID > stationID) {
                if (stopStationIDListNumber[i + 1].ID < stationID) {
                  return i + 1;
                }
              }
            }
          };
          let newIndex1 = index1;
          let newIndex2 = index2;
          if (index1 == -1) {
            newIndex1 = getNearStationID(arrayNumber[0].ID);
          }
          if (index2 == -1) {
            newIndex2 = getNearStationID(arrayNumber[1].ID);
          }
          if (newIndex1 && newIndex2) {
            return [newIndex1, newIndex2];
          }

          // 通過駅の場合
        }

        return [];
      }
    } catch (e) {
      console.log(e);
    }
  }
  // 使用例
  const points =
    trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : [];

  useEffect(() => {
    setIsTop(true);
    if (!data.trainNum) return;
    const TD = trainList[data.trainNum];
    if (!TD) {
      setTrainData([]);
      return;
    }
    setTrainData(TD.split("#").filter((d) => d != ""));
  }, [data]);
  const getType = (string) => {
    switch (string) {
      case "express":
        return "特急";
      case "rapid":
        return "快速";
      default:
        return "";
    }
  };

  const migrateTrainName = (string) => {
    return string
      .replace("マリン", "マリンライナー")
      .replace("ライナーライナー", "ライナー");
  };
  const actionSheetRef = useRef(null);
  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
  return (
    <ActionSheet
      gestureEnabled={isTop}
      CustomHeaderComponent={<></>}
      ref={actionSheetRef}
      drawUnderStatusBar={false}
      isModal={Platform.OS == "ios"}
      containerStyle={
        Platform.OS == "android"
          ? {
              paddingBottom: insets.bottom,
            }
          : {}
      }
      useBottomSafeAreaPadding={Platform.OS == "android"}
    >
      <View
        style={{
          backgroundColor: "#0099CC",
          borderTopRadius: 5,
          borderColor: "dark",
          borderWidth: 1,
        }}
      >
        <View style={{ height: 26, width: "100%" }}>
          <View
            style={{
              height: 6,
              width: 45,
              borderRadius: 100,
              backgroundColor: "#f0f0f0",
              marginVertical: 10,
              alignSelf: "center",
            }}
          />
        </View>
        <View
          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
        >
          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
            {data.limited
              ? getType(data.limited.split(":")[0]) +
                migrateTrainName(
                  data.limited.split(":")[1] ||
                    (trainData.length > 0
                      ? trainData[trainData.length - 1].split(",")[0] + "行き"
                      : " ")
                )
              : ""}
          </Text>
          <View style={{ flex: 1 }} />
          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
            {data.trainNum}
          </Text>
          {data.limited != undefined &&
            getType(data.limited.split(":")[0]) &&
            !data.limited.split(":")[1].match("サンポート") && (
              <Ionicons
                name="subway"
                color="white"
                size={30}
                style={{ margin: 5 }}
                onPress={() => {
                  LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
                  navigate("trainbase", {
                    info: "train.html?tn=" + data.trainNum,
                    from,
                  });
                  SheetManager.hide("EachTrainInfo");
                }}
              />
            )}
        </View>
        {from == "AllTrainDiagramView" || (
          <ScrollView
            style={{
              flexDirection: "row",
              //width: widthPercentageToDP("200%"),
              minHeight: 200,
              height: heightPercentageToDP("20%"),
            }}
            horizontal
            pagingEnabled
          >
            <View
              style={{
                flexDirection: "row",
                minHeight: 200,
                height: heightPercentageToDP("20%"),
                width: widthPercentageToDP("100%"),
              }}
            >
              <View
                style={{
                  flex: 1,
                  backgroundColor: "white",
                  borderRadius: 10,
                  padding: 10,
                  margin: 10,
                }}
              >
                <Text style={{ fontSize: 15, color: "#0099CC" }}>
                  現在地 {currentPosition.toString()}
                </Text>
                <View style={{ flex: 1 }} />
                {currentTrainData?.Pos && currentTrainData?.Pos.match("～") ? (
                  <>
                    <Text
                      style={{
                        fontSize: 28,
                        color: "#0099CC",
                        textAlign: "right",
                      }}
                    >
                      {
                        currentTrainData?.Pos.replace("（下り）", "")
                          .replace("（上り）", "")
                          .split("～")[0]
                      }
                    </Text>
                    <Text style={{ color: "#0099CC", textAlign: "right" }}>
                      ～
                    </Text>
                    <Text
                      style={{
                        fontSize: 28,
                        color: "#0099CC",
                        textAlign: "right",
                      }}
                    >
                      {
                        currentTrainData?.Pos.replace("（下り）", "")
                          .replace("（上り）", "")
                          .split("～")[1]
                      }
                    </Text>
                  </>
                ) : (
                  <Text
                    style={{
                      fontSize: 28,
                      color: "#0099CC",
                      textAlign: "right",
                    }}
                  >
                    {currentTrainData?.Pos}
                  </Text>
                )}
              </View>
              <View style={{ flex: 1, flexDirection: "column" }}>
                <View
                  style={{
                    flex: 1,
                    backgroundColor: "white",
                    borderRadius: 10,
                    padding: 10,
                    margin: 10,
                  }}
                >
                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
                    {isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
                  </Text>
                  <View style={{ flex: 1 }} />
                  <Text
                    style={{
                      fontSize: 32,
                      color: "#0099CC",
                      textAlign: "right",
                    }}
                  >
                    {currentTrainData?.delay}
                    {isNaN(currentTrainData?.delay) ? "" : "分"}
                  </Text>
                </View>
                <View
                  style={{
                    flex: 1,
                    backgroundColor: "white",
                    borderRadius: 10,
                    padding: 10,
                    margin: 10,
                  }}
                >
                  <Text style={{ fontSize: 15, color: "#0099CC" }}>列番</Text>
                  <Text
                    style={{
                      fontSize: 32,
                      color: "#0099CC",
                      textAlign: "right",
                    }}
                  >
                    {currentTrainData?.num}
                  </Text>
                </View>
              </View>
            </View>
            {/* <View
            style={{
              flexDirection: "column",
              height: heightPercentageToDP("20%"),
              flex: 1,
              width: widthPercentageToDP("100%"),
            }}
          >
            <View style={{ flex: 1, flexDirection: "row" }}>
              <View
                style={{
                  flex: 1,
                  backgroundColor: "white",
                  borderRadius: 10,
                  padding: 10,
                  margin: 10,
                }}
              >
                <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
                <View style={{ flex: 1 }} />
                <Text
                  style={{
                    fontSize: 20,
                    color: "#0099CC",
                    textAlign: "right",
                  }}
                >
                  岡山
                </Text>
              </View>

              <View
                style={{
                  flex: 3,
                  backgroundColor: "white",
                  borderRadius: 10,
                  padding: 10,
                  margin: 10,
                }}
              >
                <Text style={{ fontSize: 15, color: "#0099CC" }}>車両案内</Text>
                <View style={{ flex: 1 }} />
                <Text
                  style={{
                    fontSize: 20,
                    color: "#0099CC",
                    textAlign: "right",
                  }}
                >
                  宇多津でうずしお号と連結
                </Text>
              </View>
            </View>
            <View style={{ flex: 1, flexDirection: "row" }}>
              <View
                style={{
                  flex: 1,
                  backgroundColor: "white",
                  borderRadius: 10,
                  padding: 10,
                  margin: 10,
                }}
              >
                <Text style={{ fontSize: 15, color: "#0099CC" }}>
                  編成(使用車両：2700系)
                </Text>
                <View style={{ flex: 1 }} />
                <Text
                  style={{
                    fontSize: 20,
                    color: "#0099CC",
                    textAlign: "left",
                  }}
                >
                  {"[<自][自>][アン自|指>][アン指|G>]"}
                </Text>
              </View>
            </View>
          </View> */}
          </ScrollView>
        )}
        <View
          style={{
            alignItems: "center",
            backgroundColor: "white",
            flexDirection: "row",
          }}
        >
          <View
            style={{
              padding: 8,
              flexDirection: "row",
              borderBottomWidth: 1,
              borderBottomColor: "#f0f0f0",
              flex: 1,
            }}
          >
            <Text style={{ fontSize: 20 }}>停車駅</Text>
            <View style={{ flex: 1 }} />
            <View style={{ flexDirection: "row" }}>
              {!isNaN(currentTrainData?.delay) &&
                currentTrainData?.delay != 0 && (
                  <Text
                    style={{
                      fontSize: 15,
                      color: "black",
                      position: "absolute",
                      right: 110,
                      textAlign: "right",
                      textDecorationLine: "line-through",
                    }}
                  >
                    (定刻)
                  </Text>
                )}
              <Text
                style={{
                  fontSize: 20,
                  color: isNaN(currentTrainData?.delay)
                    ? "black"
                    : currentTrainData?.delay == 0
                    ? "black"
                    : "red",
                  width: 60,
                }}
              >
                見込
              </Text>
              <Text style={{ fontSize: 20, width: 50 }}></Text>
            </View>
          </View>
        </View>
        <ScrollView
          {...scrollHandlers}
          style={{
            maxHeight: heightPercentageToDP(
              from == "AllTrainDiagramView" ? "70%" : "50%"
            ),
          }}
          onScroll={(e) => {
            if (!Platform.OS !== "android") return;
            setIsTop(e.nativeEvent.contentOffset.y < 0);
          }}
        >
          <View style={{ backgroundColor: "white", alignItems: "center" }}>
            {/* <LottieView
                autoPlay
                loop
                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
                source={require("../../assets/51690-loading-diamonds.json")}
              />
              <Text>ほげほげふがふが</Text> */}

            {trainData.map((i, index) => {
              const [station, se, time] = i.split(",");
              if(se == "提"){
                return (
                  <TouchableWithoutFeedback
                    onPress={() => Linking.openURL(time)}
                    key={station}
                  >
                    <View style={{ flexDirection: "row" }}>
                      <View
                        style={{
                          padding: 8,
                          flexDirection: "row",
                          borderBottomWidth: 1,
                          borderBottomColor: "#f0f0f0",
                          flex: 1,
                        }}
                      >
                        <Text style={{ fontSize: 20 }}>{station}</Text>
                        <View style={{ flex: 1 }} />
                        <Text style={{ fontSize: 18 }}>
                          提供元<MaterialCommunityIcons name={"open-in-new"} color="black" size={20} />
                        </Text>
                        
                      </View>
                    </View>
                  </TouchableWithoutFeedback>
                );
              }
              const Stations = stationList.map((a) =>
                a.filter((d) => d.StationName == station)
              );
              const StationNumbers =
                Stations &&
                Stations.reduce((newArray, e) => {
                  return newArray.concat(e);
                }, [])
                  .filter((d) => d.StationNumber)
                  .map((d) => d.StationNumber);

              const colorIDs =
                StationNumbers != null
                  ? StationNumbers.map((d) => {
                      return d.split("").filter((s) => "A" < s && s < "Z");
                    }).reduce((newArray, e) => {
                      return newArray.concat(e);
                    }, [])
                  : [];
              const EachIDs =
                StationNumbers != null
                  ? StationNumbers.map((d) => {
                      return d
                        .split("")
                        .filter((s) => "0" <= s && s <= "9")
                        .join("");
                    })
                  : [];
              const date = new Date();
              if (time) {
                date.setHours(time.split(":")[0], time.split(":")[1]);
              }
              if (!isNaN(currentTrainData?.delay)) {
                date.setMinutes(date.getMinutes() + currentTrainData?.delay);
              }
              const timeString = date.toTimeString().split(" ")[0].split(":");
              return (
                <TouchableWithoutFeedback
                  onPress={() => openStationACFromEachTrainInfo(station)}
                  key={station}
                >
                  <View style={{ flexDirection: "row" }}>
                    <View
                      style={{
                        width: 35,
                        position: "relative",
                        marginHorizontal: 15,
                        flexDirection: "row",
                        height: "101%",
                      }}
                    >
                      {colorIDs.map((color, index) => (
                        <View
                          style={{
                            backgroundColor: lineColorList[color],
                            flex: 1,
                          }}
                          key={color}
                        >
                          <View style={{ flex: 1 }} />
                          <Text
                            style={{
                              color: "white",
                              textAlign: "center",
                              fontSize: 10,
                              fontWeight: "bold",
                            }}
                          >
                            {colorIDs[index]}
                          </Text>
                          <Text
                            style={{
                              color: "white",
                              textAlign: "center",
                              fontSize: 10,
                              fontWeight: "bold",
                            }}
                          >
                            {EachIDs[index]}
                          </Text>
                          <View style={{ flex: 1 }} />
                        </View>
                      ))}
                    </View>
                    <View
                      style={{
                        padding: 8,
                        flexDirection: "row",
                        borderBottomWidth: 1,
                        borderBottomColor: "#f0f0f0",
                        flex: 1,
                      }}
                    >
                      <Text style={{ fontSize: 20 }}>{station}</Text>
                      <View style={{ flex: 1 }} />
                      {points && points.findIndex((d) => d == index) >= 0 ? (
                        <Text
                          style={{
                            fontSize: 20,
                            marginRight: 70,
                          }}
                        >
                          🚊
                        </Text>
                      ) : null}
                      {!isNaN(currentTrainData?.delay) &&
                        currentTrainData?.delay != 0 && (
                          <Text
                            style={{
                              fontSize: 15,
                              color: "black",
                              width: 60,
                              position: "absolute",
                              right: 120,
                              textAlign: "right",
                              textDecorationLine: "line-through",
                            }}
                          >
                            {time}
                          </Text>
                        )}
                      <Text
                        style={{
                          fontSize: 20,
                          color: isNaN(currentTrainData?.delay)
                            ? "black"
                            : currentTrainData?.delay == 0
                            ? "black"
                            : "red",
                          width: 60,
                        }}
                      >
                        {timeString[0]}:{timeString[1]}
                      </Text>
                      <Text style={{ fontSize: 18, width: 50 }}>
                        {se?.replace("発", "出発").replace("着", "到着")}
                      </Text>
                    </View>
                  </View>
                </TouchableWithoutFeedback>
              );
            })}

            <View style={{ flexDirection: "row" }}>
              <View
                style={{
                  padding: 8,
                  flexDirection: "row",
                  borderBottomWidth: 1,
                  borderBottomColor: "#f0f0f0",
                  flex: 1,
                }}
              >
                <Text style={{ fontSize: 20 }}> </Text>
                <View style={{ flex: 1 }} />
              </View>
            </View>
          </View>
        </ScrollView>
      </View>
    </ActionSheet>
  );
};