import React, { useEffect, useMemo, useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  useWindowDimensions,
  BackHandler,
  Linking,
} from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { AS } from "../../storageControl";
import trainList from "../../assets/originData/trainList";
import { lineList } 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 { migrateTrainName } from "../../lib/eachTrainInfoCoreLib/migrateTrainName";
import { getType } from "../../lib/eachTrainInfoCoreLib/getType";
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";

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

  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);

  useEffect(() => {
    if (!currentTrain.length) return;
    setCurrentTrainData(
      checkDuplicateTrainData(
        currentTrain.filter((d) => d.num == data.trainNum)
      )
    );
  }, [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 stationList =
    originalStationList &&
    lineList.map((d) =>
      originalStationList[d].map((a) => ({
        StationNumber: a.StationNumber,
        StationName: a.Station_JP,
      }))
    );

  // 使用例
  const stopStationIDList = trainData.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);
      }, [])
        .filter((d) => d.StationNumber)
        .map((d) => d.StationNumber);
    return StationNumbers[0];
  });
  const points =
    trainPositionSwitch == "true"
      ? findReversalPoints(currentPosition, stopStationIDList)
      : [];
  const trainName = useMemo(() => {
    if (!data.limited) return "";
    const limitedArray = data.limited.split(":");
    const type = getType(limitedArray[0]);

    switch (true) {
      case !!limitedArray[1]:
        // 特急の場合は、列車名を取得
        return type + migrateTrainName(limitedArray[1]);
      case trainData.length == 0:
        // 特急以外の場合は、列車番号を取得
        return type;
      default:
        // 行先がある場合は、行先を取得
        return (
          type +
          migrateTrainName(
            trainData[trainData.length - 1].split(",")[0] + "行き"
          )
        );
    }
  }, [data.limited, trainData]);

  const { height } = useWindowDimensions();
  const { isLandscape } = useDeviceOrientationChange();

  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("（上り）", "")
        .split("～");
      const direction = parseInt(currentTrainData?.Direction) || 0;
      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", "false"));
  }, []);

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

  const headerItem = {
    currentTrainData,
    currentPosition,
    nearTrainIDList,
    openTrainInfo,
    navigate,
  };
  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}
      />

      <DynamicHeaderScrollView
        from={from}
        styles={styles}
        actionSheetRef={actionSheetRef}
        containerProps={{
          style: {
            maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
          },
        }}
        shortHeader={<ShortHeader {...headerItem} />}
        longHeader={<LongHeader {...headerItem} />}
        topStickyContent={
          <ScrollStickyContent currentTrainData={currentTrainData} />
        }
      >
        {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>
        )}
        {trainData.map((i, index) =>
          i.split(",")[1] == "提" ? (
            <DataFromButton i={i} />
          ) : (
            <EachStopList
              i={i}
              index={index}
              stationList={stationList}
              points={points}
              currentTrainData={currentTrainData}
              openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
            />
          )
        )}
        {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",
  },
});