import React, { useEffect, useState, useRef } from "react";
import {
  View,
  LayoutAnimation,
  Text,
  TouchableOpacity,
  Platform,
  StyleSheet,
  useWindowDimensions,
} from "react-native";
import { Ionicons } 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 } from "react-native-responsive-screen";
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
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 { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
import { LongHeader } from "./EachTrainInfo/LongHeader";
import { ShortHeader } from "./EachTrainInfo/ShortHeader";
import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo";

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]);

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

  //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];
  };

  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 actionSheetRef = useRef(null);
  return (
    <ActionSheet
      gestureEnabled={true}
      //gestureEnabled={!actionSheetHorizonalScroll}
      CustomHeaderComponent={<></>}
      ref={actionSheetRef}
      drawUnderStatusBar={false}
      isModal={Platform.OS == "ios"}

      //useBottomSafeAreaPadding={Platform.OS == "android"}
    >
      <Hoge
        {...{
          actionSheetRef,
          data,
          trainData,
          isConcatNear,
          nearTrainIDList,
          navigate,
          from,
          currentTrainData,
          currentPosition,
          headStation,
          tailStation,
          stationList,
          openStationACFromEachTrainInfo,
          trainPositionSwitch,
          findReversalPoints,
          setTrainData,
          trainList,
          showNearTrain,
          setIsConcatNear,
          customTrainDataDetector,
          getTrainType,
          originalStationList,
          SheetManager,
          AS,
          setTrainPositionSwitch,
          getStationData,
          setCurrentPosition,
        }}
      />
    </ActionSheet>
  );
};
const styles = StyleSheet.create({
  header: {
    justifyContent: "center",
    alignItems: "center",
    left: 0,
    right: 0,
    //paddingTop: 10,
    position: "absolute",
    zIndex: 1,
    backgroundColor: "f0f0f0",
  },
  headerText: {
    color: "#fff",
    fontSize: 25,
    fontWeight: "bold",
    textAlign: "center",
  },
});
const Hoge = ({
  actionSheetRef,
  data,
  trainData,
  isConcatNear,
  nearTrainIDList,
  navigate,
  from,
  currentTrainData,
  currentPosition,
  headStation,
  tailStation,
  stationList,
  openStationACFromEachTrainInfo,
  trainPositionSwitch,
  findReversalPoints,
  setTrainData,
  trainList,
  showNearTrain,
  setIsConcatNear,
  customTrainDataDetector,
  getTrainType,
  originalStationList,
  SheetManager,
  AS,
  setTrainPositionSwitch,
  getStationData,
  setCurrentPosition,
}) => {
  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
  const migrateTrainName = (string) => {
    return string
      .replace("マリン", "マリンライナー")
      .replace("ライナーライナー", "ライナー");
  };
  const getType = (string) => {
    switch (string) {
      case "express":
        return "特急";
      case "rapid":
        return "快速";
      default:
        return "";
    }
  };

  // 使用例
  const points =
    trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : [];
  const { height, width } = useWindowDimensions();
  const [isLandscape, setIsLandscape] = useState(false);
  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]);
  useEffect(() => {
    if (height / width > 1.5) {
      setIsLandscape(false);
    }
    if (height / width < 1.5) {
      setIsLandscape(true);
    }
  }, [width, height]);
  useEffect(() => {
    if (!data.trainNum) return;
    const TD = trainList[data.trainNum];
    if (!TD) {
      setTrainData([]);
      return;
    }
    setTrainData(TD.split("#").filter((d) => d != ""));
  }, [data]);
  useEffect(() => {
    //列車現在地アイコン表示スイッチ
    AS.getItem("trainPositionSwitch")
      .then((d) => {
        if (d) {
          setTrainPositionSwitch(d);
        } else {
        }
      })
      .catch((d) => AS.setItem("trainPositionSwitch", "false"));
  }, []);

  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);
    });
  };
  return (
    <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>
      {isLandscape ? (
        <LandscapeTrainInfo
          scrollHandlers={scrollHandlers}
          leftContent={
            from == "AllTrainDiagramView" ? (
              <></>
            ) : (
              <LongHeader
                currentTrainData={currentTrainData}
                currentPosition={currentPosition}
                nearTrainIDList={nearTrainIDList}
                openTrainInfo={openTrainInfo}
              />
            )
          }
          topStickyContent={
            <ScrollStickyContent currentTrainData={currentTrainData} />
          }
        >
          {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>
        </LandscapeTrainInfo>
      ) : (
        <DynamicHeaderScrollView
          styles={styles}
          containerProps={{
            style: { maxHeight: heightPercentageToDP("70%") },
          }}
          Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
          Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}
          shortHeader={
            from == "AllTrainDiagramView" ? (
              <></>
            ) : (
              <ShortHeader
                currentTrainData={currentTrainData}
                currentPosition={currentPosition}
                nearTrainIDList={nearTrainIDList}
                openTrainInfo={openTrainInfo}
              />
            )
          }
          longHeader={
            from == "AllTrainDiagramView" ? (
              <></>
            ) : (
              <LongHeader
                currentTrainData={currentTrainData}
                currentPosition={currentPosition}
                nearTrainIDList={nearTrainIDList}
                openTrainInfo={openTrainInfo}
              />
            )
          }
          topStickyContent={
            <ScrollStickyContent currentTrainData={currentTrainData} />
          }
        >
          {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>
        </DynamicHeaderScrollView>
      )}
    </View>
  );
};