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 trainList from "../../assets/originData/trainList";
import { lineListPair } 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 { stationIDPair } from "../../lib/getStationList2";

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

  useEffect(() => {
    if (!currentTrain.length) return;
    setCurrentTrainData(
      checkDuplicateTrainData(
        currentTrain.filter((d) => d.num == data.trainNum),
        stationList
      )
    );
  }, [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 = 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;
  });
  useEffect(() => {
    const stopStationList = trainData.map((i) => {
      const [station, se, time] = i.split(",");
      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},通過,`);
          setHaveThrough(true);
          reverse = false;
        } else {
          if (
            d.StationNumber < baseStationNumberFirst &&
            d.StationNumber > baseStationNumberSecond
          ) {
            allThroughStation.push(`${d.Station_JP},通過,`);
            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 () => {};
    if (trainDataWidhThrough[position].split(",")[1] == "通過") {
      LayoutAnimation.configureNext({
        duration: 400,
        update: { type: "easeInEaseOut", springDamping: 0.6 },
      });
      setShowThrew(true);
      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 specialTrainActualID = searchSpecialTrain(data.trainNum, trainList);
      setTrueTrainID(specialTrainActualID || undefined);
      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 returnArray = NearTrainList.map((d) => d.id);
    const TDArray = NearTrainList.map((d) => d.TrainData);
    setNearTrainIDList(returnArray);
    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],
          });
        }
      })
    );
    if (head) setHeadStation(head);
    else setHeadStation([]);
    if (tail) setTailStation(tail);
    else setTailStation([]);
  }, [trainData, data]);

  useEffect(() => {
    //currentTrainData.Pos = "鴨川～端岡"; //test
    if (!currentTrainData) return;
    if (!currentTrainData?.Pos) return;
    if (currentTrainData?.Pos.match("～")) {
      const pos = currentTrainData?.Pos.replace("（下り）", "")
        .replace("（上り）", "")
        .replace("（徳島線）", "")
        .replace("（高徳線）", "")
        .split("～");
      const direction = parseInt(currentTrainData?.Direction) || 0;
      if (pos[0] == "児島" && pos[1] == "宇多津") {
        setCurrentPosition(["M12", "Y09"]);
        return;
      } else if (pos[1] == "児島" && pos[0] == "宇多津") {
        setCurrentPosition(["Y09", "M12"]);
        return;
      } else if (pos[0] == "伊予若宮" && pos[1] == "伊予白滝") {
        setCurrentPosition(["S18", "S14"]);
        return;
      } else if (pos[0] == "伊予白滝" && pos[1] == "伊予若宮") {
        setCurrentPosition(["S14", "S18"]);
        return;
      } else if (pos[0] == "伊予大洲" && pos[1] == "伊予若宮") {
        setCurrentPosition(["U14", "U14"]);
        return;
      } else if (pos[0] == "伊予若宮" && pos[1] == "伊予大洲") {
        setCurrentPosition(["U14", "U14"]);
        return;
      }
      const currentPosID = Object.keys(originalStationList).map((key) => {
        let firstStation = false;
        let firstStationID = "";
        let secondStation = false;
        let secondStationID = "";
        originalStationList[key].forEach((station) => {
          if (station.Station_JP === pos[0]) {
            firstStation = true;
            firstStationID = station.StationNumber;
          }
          if (station.Station_JP === pos[1]) {
            secondStation = true;
            secondStationID = station.StationNumber;
          }
        });
        if (firstStation && secondStation) {
          return [firstStationID, secondStationID];
        } else return false;
      });
      const currentPos = currentPosID.filter((d) => d != false)[0];
      if (currentPos) {
        setCurrentPosition(direction == 0 ? currentPos.reverse() : currentPos);
      } else if (direction == 0) {
        setCurrentPosition([
          getStationID(pos[1], stationList),
          getStationID(pos[0], stationList),
        ]);
      } else {
        setCurrentPosition([
          getStationID(pos[0], stationList),
          getStationID(pos[1], stationList),
        ]);
      }
    } else {
      setCurrentPosition([getStationID(currentTrainData?.Pos, stationList)]);
    }
  }, [currentTrainData]);

  useEffect(() => {
    //列車現在地アイコン表示スイッチ
    AS.getItem("trainPositionSwitch")
      .then((d) => {
        if (d) setTrainPositionSwitch(d);
      })
      .catch(() => AS.setItem("trainPositionSwitch", "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,
      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}
        actionSheetRef={actionSheetRef}
        scrollHandlers={scrollHandlers}
        containerProps={{
          style: {
            maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
          },
        }}
        shortHeader={
          <ShortHeader
            {...{
              currentTrainData,
              currentPosition,
              nearTrainIDList,
              openTrainInfo,
              navigate,
            }}
          />
        }
        longHeader={
          <LongHeader
            {...{
              currentTrainData,
              currentPosition,
              nearTrainIDList,
              openTrainInfo,
              navigate,
            }}
          />
        }
        topStickyContent={
          <ScrollStickyContent
            {...{ currentTrainData, showThrew, setShowThrew, haveThrough }}
          />
        }
      >
        {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",
                }}
              >
                <Text
                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
                >
                  「本当の始発駅」を表示
                </Text>
              </TouchableOpacity>
            ) : (
              <></>
            )
          )}
        <ShowSpecialTrain
          isTrainDataNothing={trainData.length == 0}
          setTrainData={setTrainData}
          trainList={trainList}
          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",
            }}
          >
            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
              Twitterで検索
            </Text>
          </TouchableOpacity>
        )}
        {trainDataWidhThrough.map((i, index) =>
          i.split(",")[1] == "提" ? (
            <DataFromButton i={i} />
          ) : (
            <EachStopList
              {...{
                i,
                index,
                stationList,
                points: points ? points[index] : false,
                currentTrainData,
                openStationACFromEachTrainInfo,
                showThrew,
              }}
            />
          )
        )}
        {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",
              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",
  },
});