import React, { useEffect, useState, useRef } from "react";
import {
  View,
  LayoutAnimation,
  ScrollView,
  Linking,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Platform,
} from "react-native";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import ActionSheet, {
  SheetManager,
  useScrollHandlers,
} from "react-native-actions-sheet";
import { AS } from "../../storageControl";
import trainList from "../../assets/originData/trainList";
import { lineList } from "../../lib/getStationList";
import {
  heightPercentageToDP,
  widthPercentageToDP,
} from "react-native-responsive-screen";
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
import dayjs from "dayjs";
import { getTrainType } from "../../lib/getTrainType";
import { customTrainDataDetector } from "../custom-train-data";
import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
import { EachStopList } from "./EachTrainInfo/EachStopList";
import { DataFromButton } from "./EachTrainInfo/DataFromButton";
import { TrainDataView } from "./EachTrainInfo/TrainDataView";

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

  const { currentTrain } = useCurrentTrain();
  const { getInfluencedTrainData } = useBusAndTrainData();

  const [currentTrainData, setCurrentTrainData] = useState([]);
  const [nearTrainIDList, setNearTrainIDList] = useState([]);
  const [showNearTrain, setShowNearTrain] = useState([]);
  const [isConcatNear, setIsConcatNear] = useState(false);
  const [tailStation, setTailStation] = useState();
  const [headStation, setHeadStation] = useState();
  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);

  //裏列車探索
  useEffect(() => {
    if (!data.trainNum) return;
    const [returnArray, TDArray] = getInfluencedTrainData(data.trainNum);
    setNearTrainIDList(returnArray);
    setShowNearTrain(TDArray);
  }, [data]);

  useEffect(() => {
    if (trainData.length == 0) return;
    if (showNearTrain.length == 0) return;
    showNearTrain.forEach((d) => {
      const [station, se, time] = d.split(",");

      if (station == trainData[0].split(",")[0])
        setHeadStation(trainData[0].split(",")[0]);
      if (station == trainData[trainData.length - 1].split(",")[0])
        setTailStation(trainData[trainData.length - 1].split(",")[0]);
    });
  }, [trainData, showNearTrain]);

  const openBackTrainInfo = (stationInfo, currentTrainIndex) => {
    const migrationArray = (stationInfo) => {
      const mainTrainStationPosition = trainData.findIndex(
        (d) => d.split(",")[0] == stationInfo
      );

      const relationMain = (() => {
        if (mainTrainStationPosition == 0) return "head";
        if (mainTrainStationPosition == trainData.length - 1) return "tail";
        return "middle";
      })();

      const subTrainStationPosition = showNearTrain.findIndex(
        (d) => d.split(",")[0] == stationInfo
      );
      const relationSub = (() => {
        if (subTrainStationPosition == 0) return "head";
        if (subTrainStationPosition == showNearTrain.length - 1) return "tail";
        return "middle";
      })();

      switch (relationMain) {
        case "head":
          if (relationSub == "head") {
            return;
          } else if (relationSub == "tail") {
            return [
              ...showNearTrain.slice(0, subTrainStationPosition),
              ...trainData,
            ];
          } else if (relationSub == "middle") {
            return [
              ...showNearTrain.slice(0, subTrainStationPosition),
              ...trainData,
            ];
          } else return;
        case "tail":
          if (relationSub == "head") {
            return [
              ...trainData.slice(0, mainTrainStationPosition),
              ...showNearTrain,
            ];
          } else if (relationSub == "tail") {
            return;
          } else if (relationSub == "middle") {
            return [
              ...trainData.slice(0, mainTrainStationPosition),
              ...showNearTrain.slice(subTrainStationPosition),
            ];
          } else return;
        case "middle":
          if (relationSub == "head") {
            return [
              ...trainData.slice(0, mainTrainStationPosition),
              ...showNearTrain,
            ];
          } else if (relationSub == "tail") {
            return [
              ...showNearTrain.slice(0, subTrainStationPosition),
              ...trainData.slice(mainTrainStationPosition),
            ];
          } else return;
      }
    };
    const array = migrationArray(stationInfo);
    if (!array) return;
    setTrainData(array);
    setIsConcatNear(true);
  };

  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 payload = {
      data: {
        trainNum: d,
        limited: `${getTrainType(train.type).data}:${
          train.trainName
        }${TrainNumber}`,
      },
      navigate,
      originalStationList,
      from: "AllTrainDiagramView",
    };
    SheetManager.hide("EachTrainInfo").then(() => {
      //0.1秒待機してから開く
      setTimeout(() => {
        SheetManager.show("EachTrainInfo", { payload });
      }, 1);
    });
  };
  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"));
  }, []);
  //bconst 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(() => {
    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={true}
      //gestureEnabled={!actionSheetHorizonalScroll}
      CustomHeaderComponent={<></>}
      ref={actionSheetRef}
      drawUnderStatusBar={false}
      isModal={Platform.OS == "ios"}
      //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}
            {isConcatNear ? ` + ${nearTrainIDList}` : ""}
          </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
            //onTouchStart={() => setActionSheetHorizonalScroll(true)}
            //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
            //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
            style={{
              flexDirection: "row",
              //width: widthPercentageToDP("200%"),
              minHeight: 200,
              height: heightPercentageToDP("20%"),
            }}
            horizontal
            pagingEnabled
          >
            <TrainDataView
              currentTrainData={currentTrainData}
              currentPosition={currentPosition}
              nearTrainIDList={nearTrainIDList}
              openTrainInfo={openTrainInfo}
            />
            {/* <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
          {...scrollHandlers}
          style={{
            maxHeight: heightPercentageToDP(
              from == "AllTrainDiagramView" ? "70%" : "50%"
            ),
            backgroundColor: "white",
          }}
          stickyHeaderIndices={[0]}
        >
          <View
            style={{
              alignItems: "center",
              backgroundColor: "white",
              flexDirection: "row",
            }}
            index={0}
          >
            <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>
          {headStation && !isConcatNear && (
            <TouchableOpacity
              onPress={() => openBackTrainInfo(headStation)}
              style={{
                padding: 10,
                flexDirection: "row",
                borderColor: "blue",
                borderWidth: 1,
                margin: 10,
                borderRadius: 5,
                alignItems: "center",
              }}
            >
              <Text
                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
              >
                「本当の始発駅」を表示
              </Text>
            </TouchableOpacity>
          )}
          {/* <LottieView
                autoPlay
                loop
                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
                source={require("../../assets/51690-loading-diamonds.json")}
              />
              <Text>ほげほげふがふが</Text> */}

          {trainData.map((i, index) =>
            i.split(",")[1] == "提" ? (
              <DataFromButton i={i} />
            ) : (
              <EachStopList
                i={i}
                index={index}
                stationList={stationList}
                points={points}
                currentTrainData={currentTrainData}
                openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
              />
            )
          )}
          {tailStation && !isConcatNear && (
            <TouchableOpacity
              onPress={() => openBackTrainInfo(tailStation)}
              style={{
                padding: 10,
                flexDirection: "row",
                borderColor: "blue",
                borderWidth: 1,
                margin: 10,
                borderRadius: 5,
                alignItems: "center",
              }}
            >
              <Text
                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
              >
                「本当の終着駅」を表示
              </Text>
            </TouchableOpacity>
          )}

          <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>
        </ScrollView>
      </View>
    </ActionSheet>
  );
};