import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  useWindowDimensions,
  BackHandler,
  Linking,
  LayoutAnimation,
} from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { useScrollHandlers } from "react-native-actions-sheet";
import { AS } from "../../storageControl";
import { lineListPair, stationIDPair } from "../../lib/getStationList";
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 { useDeviceOrientationChange } from "../../stateBox/useDeviceOrientationChange";
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 { getStationID } from "../../lib/eachTrainInfoCoreLib/getStationData";
import { findReversalPoints } from "../../lib/eachTrainInfoCoreLib/findReversalPoints";
import { searchSpecialTrain } from "../../lib/eachTrainInfoCoreLib/searchSpecialTrain";
import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainInfo";
import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
import { useTrainMenu } from "../../stateBox/useTrainMenu";
import { HeaderText } from "./EachTrainInfoCore/HeaderText";
import { useStationList } from "../../stateBox/useStationList";
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";

export const EachTrainInfoCore = ({
  actionSheetRef,
  data,
  openStationACFromEachTrainInfo,
  from,
  navigate,
}) => {
  const { currentTrain, getCurrentStationData, getPosition } =
    useCurrentTrain();
  const { originalStationList, stationList } = useStationList();
  const { allTrainDiagram: trainList, allCustomTrainData } =
    useAllTrainDiagram();
  const { setTrainInfo } = useTrainMenu();
  const [currentTrainData, setCurrentTrainData] = useState();

  useEffect(() => {
    const stationData = getCurrentStationData(data.trainNum);
    if (stationData) {
      setCurrentTrainData(stationData);
    }
  }, [currentTrain, data.trainNum]);

  useEffect(() => {
    const backAction = () => {
      SheetManager.hide("EachTrainInfo");
      return true;
    };
    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );
    return () => backHandler.remove();
  }, []);

  const [headStation, setHeadStation] = useState([]);
  const [tailStation, setTailStation] = useState([]);
  const [showHeadStation, setShowHeadStation] = useState([]);
  const [showTailStation, setShowTailStation] = useState([]);
  const [nearTrainIDList, setNearTrainIDList] = useState([]);
  const { getInfluencedTrainData } = useBusAndTrainData();
  const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
  const [currentPosition, setCurrentPosition] = useState([]);
  const [trainData, setTrainData] = useState([]);
  const [trainDataWidhThrough, setTrainDataWithThrough] = useState([]);
  const [showThrew, setShowThrew] = useState(false);
  const [haveThrough, setHaveThrough] = useState(false);

  // 使用例
  const [stopStationIDList, setStopStationList] = useState([]);
  useEffect(() => {
    const x = trainDataWidhThrough.map((i) => {
      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);
        }, []).map((d) => d.StationNumber);
      return StationNumbers;
    });
    setStopStationList(x);
  }, [trainDataWidhThrough]);

  useEffect(() => {
    const isCancel = [];
    const stopStationList = trainData.map((i, index, array) => {
      const [station, se, time] = i.split(",");
      const [nextStation, nextSe, nextTime] =
        array[index + 1]?.split(",") || [];
      isCancel.push(se.includes("休") && nextSe.includes("休"));
      if (se == "通編") setHaveThrough(true);
      return stationList.map((a) => a.filter((d) => d.StationName == station));
    });
    const allThroughStationList = stopStationList.map((i, index, array) => {
      let allThroughStation = [];
      if (index == array.length - 1) return;
      const firstItem = array[index];
      const secondItem = array[index + 1];
      let betweenStationLine = "";
      let baseStationNumberFirst = "";
      let baseStationNumberSecond = "";
      Object.keys(stationIDPair).forEach((d, index2, array) => {
        if (!d) return;
        const haveFirst = firstItem[index2];
        const haveSecond = secondItem[index2];
        if (haveFirst.length && haveSecond.length) {
          betweenStationLine = d;
          baseStationNumberFirst = haveFirst[0].StationNumber;
          baseStationNumberSecond = haveSecond[0].StationNumber;
        }
      });
      if (!betweenStationLine) return;
      let reverse = false;
      originalStationList[
        lineListPair[stationIDPair[betweenStationLine]]
      ].forEach((d) => {
        if (
          d.StationNumber > baseStationNumberFirst &&
          d.StationNumber < baseStationNumberSecond
        ) {
          allThroughStation.push(
            `${d.Station_JP},${isCancel[index] ? "通休編" : "通過"},`
          );
          setHaveThrough(true);
          reverse = false;
        } else {
          if (
            d.StationNumber < baseStationNumberFirst &&
            d.StationNumber > baseStationNumberSecond
          ) {
            allThroughStation.push(
              `${d.Station_JP},${isCancel[index] ? "通休編" : "通過"},`
            );
            setHaveThrough(true);
            reverse = true;
          }
        }
      });
      if (reverse) allThroughStation.reverse();
      return allThroughStation;
    });
    let mainArray = [...trainData];
    let indexs = 0;
    trainData.forEach((d, index, array) => {
      indexs = indexs + 1;
      if (!allThroughStationList[index]) return;
      if (allThroughStationList[index].length == 0) return;
      mainArray.splice(indexs, 0, ...allThroughStationList[index]);
      indexs = indexs + allThroughStationList[index].length;
    });
    setTrainDataWithThrough(mainArray);
  }, [trainData]);

  const points =
    trainPositionSwitch == "true"
      ? findReversalPoints(currentPosition, stopStationIDList)
      : stopStationIDList.map(() => false);
  const [isJumped, setIsJumped] = useState(false);
  useEffect(() => {
    if (isJumped) return () => {};
    if (!points) return () => {};
    if (points.length == 0) return () => {};
    const position = points.findIndex((d) => d == true);
    let isThrew = false;
    if (position == -1) return () => {};
    setShowThrew(true);
    if (trainDataWidhThrough[position].split(",")[1] == "通過") {
      LayoutAnimation.configureNext({
        duration: 400,
        update: { type: "easeInEaseOut", springDamping: 0.6 },
      });
      isThrew = true;
    }
    if (position < 5) {
    } // 5駅以内の場合はスクロールしない
    else {
      const count = position * 44 - 50;
      // 0.5秒待機してからスクロール
      setTimeout(
        () =>
          scrollHandlers.ref.current?.scrollTo({ y: count, animated: true }),
        400
      );
    }
    setIsJumped(true);
  }, [points]);
  const { height } = useWindowDimensions();
  const { isLandscape } = useDeviceOrientationChange();
  const scrollHandlers = actionSheetRef
    ? useScrollHandlers("scrollview-1", actionSheetRef)
    : null;
  const [trueTrainID, setTrueTrainID] = useState([]);
  useEffect(() => {
    if (!data.trainNum) return;
    const TD = trainList[data.trainNum];
    setHeadStation([]);
    setTailStation([]);
    if (!TD) {
      const specialTrainActualIDs = searchSpecialTrain(
        data.trainNum,
        trainList
      );
      setTrueTrainID(specialTrainActualIDs || []);
      setTrainData([]);
      return;
    }
    setTrainData(TD.split("#").filter((d) => d != ""));
  }, [data]);
  //裏列車探索
  useEffect(() => {
    if (!data.trainNum) return;
    const NearTrainList = getInfluencedTrainData(data.trainNum);
    if (NearTrainList.length == 0) return;
    const TDArray = NearTrainList.map((d) => d.TrainData);
    setNearTrainIDList(NearTrainList.map((d) => d.id));
    if (trainData.length == 0) return;
    if (TDArray.length == 0) return;
    let head = [];
    let tail = [];
    TDArray.forEach((data, i) =>
      data.forEach((d) => {
        const [station, se, time] = d.split(",");
        if (station == trainData[0].split(",")[0]) {
          head.push({
            station: trainData[0].split(",")[0],
            dia: data,
            id: nearTrainIDList[i],
          });
        }
        if (station == trainData[trainData.length - 1].split(",")[0]) {
          tail.push({
            station: trainData[trainData.length - 1].split(",")[0],
            dia: data,
            id: nearTrainIDList[i],
          });
        }
      })
    );
    setHeadStation(head || []);
    setTailStation(tail || []);
  }, [trainData, data]);

  useEffect(() => {
    const position = getPosition(currentTrainData);
    if (stopStationIDList.length == 0) return;
    if (position) {
      if (position.length > 1) {
        if (position[0] == "-Iyo") {
          position[0] =
            stopStationIDList[
              stopStationIDList.findIndex((d) => d.includes("U14")) - 1
            ][0];
        } else if (position[0] == "+Iyo") {
          position[0] =
            stopStationIDList[
              stopStationIDList.findIndex((d) => d.includes("U14")) + 1
            ][0];
        }
        if (position[1] == "+Iyo") {
          position[1] =
            stopStationIDList[
              stopStationIDList.findIndex((d) => d.includes("U14")) + 1
            ][0];
        } else if (position[1] == "-Iyo") {
          position[1] =
            stopStationIDList[
              stopStationIDList.findIndex((d) => d.includes("U14")) - 1
            ][0];
        }
      }

      setCurrentPosition(position);
    }
  }, [currentTrainData,stopStationIDList]);

  useEffect(() => {
    //列車現在地アイコン表示スイッチ
    AS.getItem("trainPositionSwitch")
      .then((d) => {
        if (d) setTrainPositionSwitch(d);
      })
      .catch(() => AS.setItem("trainPositionSwitch", "true"));
  }, []);
  const customTrainType = getTrainType({
    type: customTrainDataDetector(data.trainNum, allCustomTrainData).type,
  });

  const openTrainInfo = (d) => {
    const train = customTrainDataDetector(d, allCustomTrainData);
    let TrainNumber = "";
    if (train.trainNumDistance != undefined) {
      const timeInfo =
        parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
      TrainNumber = timeInfo + "号";
    }
    const limitedData = getTrainType({ type: train.type });
    const payload = {
      data: {
        trainNum: d,
        limited: `${limitedData.data}:${train.trainName}${TrainNumber}`,
      },
      navigate,
      from: from == "LED" ? "LED2" : "NearTrainDiagramView",
    };
    if (isLandscape) {
      setTrainInfo(payload.data);
    } else {
      SheetManager.hide("EachTrainInfo").then(() => {
        //0.1秒待機してから開く
        setTimeout(() => SheetManager.show("EachTrainInfo", { payload }), 200);
      });
    }
  };

  return (
    <View
      style={{
        backgroundColor: "#0099CC",
        borderTopRadius: 5,
        borderColor: "dark",
        borderWidth: 1,
      }}
    >
      {isLandscape || (
        <View style={{ height: 26, width: "100%" }}>
          <View
            style={{
              height: 6,
              width: 45,
              borderRadius: 100,
              backgroundColor: "#f0f0f0",
              marginVertical: 10,
              alignSelf: "center",
            }}
          />
        </View>
      )}
      <HeaderText
        data={data}
        trainData={trainData}
        showHeadStation={showHeadStation}
        showTailStation={showTailStation}
        headStation={headStation}
        tailStation={tailStation}
        navigate={navigate}
        from={from}
        scrollHandlers={scrollHandlers}
      />

      <DynamicHeaderScrollView
        from={from}
        styles={styles}
        scrollHandlers={scrollHandlers}
        containerProps={{
          style: {
            maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
            backgroundColor:
              customTrainType.data === "notService" ? "#777777ff" : "white",
          },
        }}
        shortHeader={
          <ShortHeader
            {...{
              currentTrainData,
              currentPosition,
              nearTrainIDList,
              openTrainInfo,
              navigate,
            }}
          />
        }
        longHeader={
          <LongHeader
            {...{
              currentTrainData,
              currentPosition,
              nearTrainIDList,
              openTrainInfo,
              navigate,
            }}
          />
        }
        topStickyContent={
          <ScrollStickyContent
            {...{ currentTrainData, showThrew, setShowThrew, haveThrough }}
          />
        }
      >
        {customTrainType.data === "notService" && (
          <Text style={{ backgroundColor: "#ffffffc2", fontWeight: "bold" }}>
            この列車には乗車できません。
          </Text>
        )}
        {headStation.length != 0 &&
          headStation.map((i, index) =>
            showHeadStation.findIndex((d) => d == index) == -1 ? (
              <TouchableOpacity
                onPress={() => {
                  const array = openBackTrainInfo(i.station, trainData, i.dia);
                  if (!array) return;
                  setTrainData(array);
                  setShowHeadStation([...showHeadStation, index]);
                }}
                style={{
                  padding: 10,
                  flexDirection: "row",
                  borderColor: "blue",
                  borderWidth: 1,
                  margin: 10,
                  borderRadius: 5,
                  alignItems: "center",
                }}
                key={i.station + "-head"}
              >
                <Text
                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
                >
                  「本当の始発駅」を表示
                </Text>
              </TouchableOpacity>
            ) : (
              <></>
            )
          )}
        <ShowSpecialTrain
          isTrainDataNothing={trainData.length == 0}
          setTrainData={setTrainData}
          trueTrainID={trueTrainID}
        />
        {!trainData.length && (
          <TouchableOpacity
            onPress={() =>
              Linking.openURL(`https://twitter.com/search?q=${data.trainNum}`)
            }
            style={{
              padding: 10,
              flexDirection: "row",
              borderColor: "blue",
              borderWidth: 1,
              margin: 10,
              borderRadius: 5,
              alignItems: "center",
              backgroundColor: "#ffffffc2",
            }}
          >
            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
              Twitterで検索
            </Text>
          </TouchableOpacity>
        )}
        {trainDataWidhThrough.map((i, index) =>
          i.split(",")[1] == "提" ? (
            <DataFromButton i={i} key={i + "-data"} />
          ) : (
            <EachStopList
              {...{
                i,
                index,
                stationList,
                points: points ? points[index] : false,
                currentTrainData,
                openStationACFromEachTrainInfo,
                showThrew,
              }}
              key={i + "-stop"}
            />
          )
        )}
        <Text style={{ backgroundColor: "#ffffffc2" }}>
          時刻が斜体,青色になっている時刻はコミュニティで追加されている独自データです。
        </Text>
        {tailStation.length != 0 &&
          tailStation.map(({ station, dia }, index) =>
            showTailStation.findIndex((d) => d == index) == -1 ? (
              <TouchableOpacity
                onPress={() => {
                  const array = openBackTrainInfo(station, trainData, dia);

                  if (!array) return;
                  setTrainData(array);

                  setShowTailStation([...showTailStation, index]);
                }}
                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",
              backgroundColor: "#ffffffc2",
              flex: 1,
            }}
          >
            <Text style={{ fontSize: 20 }}> </Text>
            <View style={{ flex: 1 }} />
          </View>
        </View>
      </DynamicHeaderScrollView>
    </View>
  );
};

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",
  },
});
