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 LottieView from "lottie-react-native";
import trainList from "../../assets/originData/trainList";
import { lineList } from "../../lib/getStationList";
import { heightPercentageToDP } 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 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) {
    let reversalPoints = [];

    for (let i = 0; i < stopStationIDList.length; i++) {
      if (array.length == 1) {
        console.log(stopStationIDList[i], array[0]);
        if (stopStationIDList[i] == array[0]) {
          reversalPoints.push(i);
        } else if (
          stopStationIDList[i] > array[0] &&
          stopStationIDList[i + 1] < array[0]
        ) {
          reversalPoints.push(i + 1);
        }
      } else {
        if (
          stopStationIDList[i] == array[0] &&
          stopStationIDList[i + 1] == array[1]
        ) {
          reversalPoints.push(i + 1);
        } else if (
          stopStationIDList[i] == array[1] &&
          stopStationIDList[i + 1] == array[0]
        ) {
          reversalPoints.push(i + 1);
        } else if (
          array[0] < stopStationIDList[i] &&
          stopStationIDList[i] < array[1]
        ) {
          reversalPoints.push(i);
        } else if (
          array[1] < stopStationIDList[i] &&
          stopStationIDList[i] < array[0]
        ) {
          reversalPoints.push(i);
        } else if (
          stopStationIDList[i + 1] < array[0] &&
          stopStationIDList[i + 1] < array[1] &&
          stopStationIDList[i] > array[0] &&
          stopStationIDList[i] > array[1]
        ) {
          reversalPoints.push(i + 1);
        } else if (
          stopStationIDList[i + 1] > array[0] &&
          stopStationIDList[i + 1] > array[1] &&
          stopStationIDList[i] < array[0] &&
          stopStationIDList[i] < array[1]
        ) {
          reversalPoints.push(i + 1);
        }
      }
    }

    return reversalPoints;
  }

  // 使用例
  const points = findReversalPoints(currentPosition);
  console.log(currentPosition, points);
  console.log(currentPosition.length, points.length);

  useEffect(() => {
    console.log(data);
    setIsTop(true);
    if (!data.trainNum) return;
    const TD = trainList[data.trainNum];
    if (!TD) {
      setTrainData([]);
      return;
    }
    setTrainData(TD.split("#"));
  }, [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] || "普通")
              : ""}
          </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>
        <View
          style={{ flexDirection: "row", height: heightPercentageToDP("20%") }}
        >
          <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>
        <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> */}
              {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("");
                      })
                    : [];
                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 }} />
                        <Text style={{ fontSize: 20 }}>
                          {/* {StationNumbers.length != 0 &&
                            (StationNumbers.includes(currentPosition[0])
                              ? "にゃーん"
                              : "ほげ")}
                          {currentPosition} */}
                          {points.includes(index) ? "🚉" : ""}
                          {time} {se}
                        </Text>
                      </View>
                    </View>
                  </TouchableWithoutFeedback>
                );
              })}
            </View>
          </View>
        </ScrollView>
      </View>
    </ActionSheet>
  );
};