import React, { useEffect, useState } from "react";
import {
  View,
  LayoutAnimation,
  ScrollView,
  Linking,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  TouchableHighlight,
  Platform,
} from "react-native";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import ActionSheet from "react-native-actions-sheet";
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";

export const EachTrainInfo = ({
  setRef,
  data,
  navigate,
  originalStationList,
  openStationACFromEachTrainInfo,
  from,
}) => {
  const [trainData, setTrainData] = useState([]);
  const [isTop, setIsTop] = useState(true);
  const [currentPosition, setCurrentPosition] = useState([]);

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

  useEffect(() => {
    //列車現在地アイコン表示スイッチ
    AS.getItem("trainPositionSwitch")
      .then((d) => {
        if (d) {
          setTrainPositionSwitch(d);
        } else {
        }
      })
      .catch((d) => AS.setItem("trainPositionSwitch", "false"));
  }, []);

  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(() => {
    //data.trainData.Pos = "鴨川～端岡"; //test
    if (!data.trainData?.Pos) return;
    if (data.trainData?.Pos.match("～")) {
      const pos = data.trainData?.Pos.replace("（下り）", "")
        .replace("（上り）", "")
        .split("～");
      setCurrentPosition([getStationData(pos[0]), getStationData(pos[1])]);
    } else {
      setCurrentPosition([getStationData(data.trainData?.Pos)]);
    }
  }, [data.trainData]);

  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) {
    // arrayは現在位置の駅ID(駅在宅の場合は1つの配列、駅間の場合は2つの配列)
    // stopStationIDListは停車駅の駅IDの配列
    if (!stopStationIDList.length) 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 [];
    }
  }
  // 使用例
  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("ライナーライナー", "ライナー");
  };

  return (
    <ActionSheet
      ref={setRef}
      gestureEnabled={isTop}
      CustomHeaderComponent={<></>}
    >
      <View
        style={{
          backgroundColor: "#0099CC",
          borderRadius: 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,
                  });
                  setRef.current?.hide();
                }}
              />
            )}
        </View>
        <ScrollView
          style={{
            flexDirection: "row",
            //width: widthPercentageToDP("200%"),
            height: heightPercentageToDP("20%"),
          }}
          horizontal
          pagingEnabled
        >
          <View
            style={{
              flexDirection: "row",
              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 }} />
              {data.trainData?.Pos && data.trainData?.Pos.match("～") ? (
                <>
                  <Text
                    style={{
                      fontSize: 28,
                      color: "#0099CC",
                      textAlign: "right",
                    }}
                  >
                    {
                      data.trainData?.Pos.replace("（下り）", "")
                        .replace("（上り）", "")
                        .split("～")[0]
                    }
                  </Text>
                  <Text style={{ color: "#0099CC", textAlign: "right" }}>
                    ～
                  </Text>
                  <Text
                    style={{
                      fontSize: 28,
                      color: "#0099CC",
                      textAlign: "right",
                    }}
                  >
                    {
                      data.trainData?.Pos.replace("（下り）", "")
                        .replace("（上り）", "")
                        .split("～")[1]
                    }
                  </Text>
                </>
              ) : (
                <Text
                  style={{ fontSize: 28, color: "#0099CC", textAlign: "right" }}
                >
                  {data.trainData?.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(data.trainData?.delay) ? "状態" : "遅延時分"}
                </Text>
                <View style={{ flex: 1 }} />
                <Text
                  style={{
                    fontSize: 32,
                    color: "#0099CC",
                    textAlign: "right",
                  }}
                >
                  {data.trainData?.delay}
                  {isNaN(data.trainData?.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",
                  }}
                >
                  {data.trainData?.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>
        <ScrollView
          style={{ maxHeight: heightPercentageToDP("55%") }}
          nestedScrollEnabled
          onScroll={(e) => {
            if (!Platform.OS !== "android") return;
            setIsTop(e.nativeEvent.contentOffset.y < 0);
          }}
        >
          <View
            style={{
              padding: 10,
              backgroundColor: "white",
              borderBottomLeftRadius: 5,
              borderBottomRightRadius: 5,
            }}
          >
            <View style={{ alignItems: "center" }}>
              {/* <LottieView
                autoPlay
                loop
                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
                source={require("../../assets/51690-loading-diamonds.json")}
              />
              <Text>ほげほげふがふが</Text> */}
              <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 style={{ flexDirection: "row" }}>
                    {!isNaN(data.trainData?.delay) &&
                      data.trainData?.delay != 0 && (
                        <Text
                          style={{
                            fontSize: 15,
                            color: "black",
                            position: "absolute",
                            right: 110,
                            textAlign: "right",
                            textDecorationLine: "line-through",
                          }}
                        >
                          (定刻)
                        </Text>
                      )}
                    <Text
                      style={{
                        fontSize: 20,
                        color: isNaN(data.trainData?.delay)
                          ? "black"
                          : data.trainData?.delay == 0
                          ? "black"
                          : "red",
                        width: 60,
                      }}
                    >
                      見込
                    </Text>
                    <Text style={{ fontSize: 20, width: 50 }}></Text>
                  </View>
                </View>
              </View>
              {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);

                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(data.trainData?.delay)) {
                  date.setMinutes(date.getMinutes() + data.trainData?.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.findIndex((d) => d == index) >= 0 ? (
                          <Text
                            style={{
                              fontSize: 20,
                              marginRight: 70,
                            }}
                          >
                            🚊
                          </Text>
                        ) : null}
                        {!isNaN(data.trainData?.delay) &&
                          data.trainData?.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(data.trainData?.delay)
                              ? "black"
                              : data.trainData?.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>
          </View>
        </ScrollView>
      </View>
    </ActionSheet>
  );
};