import lineColorList from "@/assets/originData/lineColorList";
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
import { useStationList } from "@/stateBox/useStationList";
import { StationProps } from "@/lib/CommonTypes";
import { FC, useEffect, useState } from "react";
import {
  Text,
  TouchableOpacity,
  View,
  Image,
  LayoutAnimation,
  ScrollView,
} from "react-native";
import { getTrainType } from "@/lib/getTrainType";
import { trainDataType, trainPosition } from "@/lib/trainPositionTextArray";
import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker";
import { lineListPair, stationIDPair } from "@/lib/getStationList";
import { findReversalPoints } from "@/lib/eachTrainInfoCoreLib/findReversalPoints";
import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
import { getCurrentTrainData } from "@/lib/getCurrentTrainData";
import { Ionicons } from "@expo/vector-icons";
import dayjs from "dayjs";
import { useTrainMenu } from "@/stateBox/useTrainMenu";

type props = {
  trainID: string;
  displaySize: number;
  setDisplaySize: (e: number) => void;
};

export const FixedTrain: FC<props> = ({
  trainID,
  displaySize,
  setDisplaySize,
}) => {
  const {fixedPosition, setFixedPosition, currentTrain, getCurrentStationData, getPosition } =
    useCurrentTrain();

  const { mapSwitch } = useTrainMenu();
  const { allCustomTrainData, allTrainDiagram } = useAllTrainDiagram();

  const [train, setTrain] = useState<trainDataType>(null);
  const [customData, setCustomData] = useState<CustomTrainData>(
    getCurrentTrainData(trainID, currentTrain, allCustomTrainData)
  );
  useEffect(() => {
    setCustomData(
      getCurrentTrainData(trainID, currentTrain, allCustomTrainData)
    );
  }, [currentTrain, trainID]);
  useEffect(() => {
    const stationData = getCurrentStationData(trainID);
    if (stationData) {
      setTrain(stationData);
    }
    else{
      alert("追跡していた列車が消えました。追跡を終了します。");
      setFixedPosition({ type: null, value: null });
    }
  }, [trainID, currentTrain]);

  const { getStationDataFromName, stationList, originalStationList } =
    useStationList();

  const [trainDataWidhThrough, setTrainDataWithThrough] = useState<string[]>(
    []
  );

  useEffect(() => {
    const trainData = allTrainDiagram[trainID]?.split("#");
    if (!trainData) return;
    //let haveThrough = false;
    //
    const stopStationList = trainData.map((i) => {
      const [station, se, time] = i.split(",");
      //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) => {
        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) => {
      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);
  }, [allTrainDiagram, stationList, trainID]);
  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;
  });
  const [currentPosition, setCurrentPosition] = useState<string[]>([]);

  useEffect(() => {
    let position = getPosition(train);
    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);
    }
  }, [train]);

  const [nextStationData, setNextStationData] = useState<StationProps[]>([]);
  const [untilStationData, setUntilStationData] = useState<StationProps[]>([]);
  const [probably, setProbably] = useState(false);
  useEffect(() => {
    //棒線駅判定を入れて、棒線駅なら時間を見て分数がマイナスならcontinue;
    const points = findReversalPoints(currentPosition, stopStationIDList);
    if (!points) return;
    if (points.length == 0) return;
    let searchCountFirst = points.findIndex((d) => d == true);
    let searchCountLast = points.findLastIndex((d) => d == true);

    const delayTime = train?.delay == "入線" ? 0 : train?.delay;
    let additionalSkipCount = 0;
    for (
      let searchCount = searchCountFirst;
      searchCount < points.length;
      searchCount++
    ) {
      const nextPos = trainDataWidhThrough[searchCount];

      if (nextPos) {
        const [station, se, time] = nextPos.split(",");

        if (searchCountFirst == searchCountLast) {
          if (se.includes("通")) {
            continue;
          }
          setNextStationData(getStationDataFromName(station));
          break;
        }
        //棒線駅判定
        let distanceMinute = 0;
        if (time != "") {
          const now = dayjs();
          const hour = parseInt(time.split(":")[0]);
          const distanceTime = now
            .hour(hour < 4 ? hour + 24 : hour)
            .minute(parseInt(time.split(":")[1]));
          distanceMinute = distanceTime.diff(now, "minute") + delayTime;
          if (now.hour() < 4) {
            if (hour < 4) {
              distanceMinute = distanceMinute - 1440;
            }
          }
        }
        if (distanceMinute >= 0) {
          if (se.includes("通")) {
            continue;
          } else {
            setNextStationData(getStationDataFromName(station));
            break;
          }
        } else {
          additionalSkipCount++;
          continue;
        }
      }
    }
    let trainList = [];
    for (
      let searchCount = searchCountFirst - 1;
      searchCount < points.length;
      searchCount++
    ) {
      trainList.push(trainDataWidhThrough[searchCount]);
    }
    if (additionalSkipCount > 0) {
      trainList = trainList.slice(additionalSkipCount);
      setProbably(true);
    } else {
      setProbably(false);
    }
    setUntilStationData(trainList);
  }, [currentPosition, trainDataWidhThrough]);
  const [ToData, setToData] = useState("");
  useEffect(() => {
    if (customData.ToData && customData.ToData != "") {
      setToData(customData.ToData);
    } else {
      if (trainDataWidhThrough.length == 0) return;
      setToData(
        trainDataWidhThrough[trainDataWidhThrough.length - 2].split(",")[0]
      );
    }
  }, [customData, trainDataWidhThrough]);

  const [station, setStation] = useState<StationProps[]>([]);
  useEffect(() => {
    const data = getStationDataFromName(ToData);
    setStation(data);
  }, [ToData]);
  const lineColor =
    station.length > 0
      ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
      : "black";
  //const lineColor = "red";
  const customTrainType = getTrainType({
    type: customData.type,
    whiteMode: true,
  });
  const trainNameText = `${customData.trainName}${
    customData.trainNumDistance !== null
      ? ` ${parseInt(customData.TrainNumber) - customData.trainNumDistance}号`
      : ""
  }`;
  return (
    <View
      style={{ display: "flex", flexDirection: "column", flex: 1 }}
      pointerEvents="box-none"
    >
      <View
        style={{
          flex: 1,
          flexDirection: displaySize === 226 ? "column" : "row",
          backgroundColor: "black",
          //borderBottomColor: "black",
          //borderBottomWidth: 2,
        }}
      >
        <View
          style={{
            flexDirection: displaySize === 226 ? "row" : "column",
            flex: 1,
            backgroundColor: "white",
            height: displaySize === 226 ? 200 : 50,
            overflow: "hidden",
          }}
        >
          <View
            style={{ flex: displaySize === 226 ? 5 : 1, flexDirection: "row" }}
          >
            <View
              style={{
                backgroundColor: customTrainType.color,
                flexDirection: "row",
                alignContent: "center",
                alignSelf: "center",
                alignItems: "center",
                height: "100%",
              }}
            >
              <Image
                source={{ uri: customData.img }}
                width={displaySize === 226 ? 23 : 14}
                height={displaySize === 226 ? 26 : 17}
                style={{ margin: 5 }}
              />
              <View
                style={{
                  flexDirection: displaySize === 226 ? "column" : "row",
                  alignContent: "center",
                  alignSelf: "center",
                  alignItems: "center",
                  maxWidth: displaySize === 226 ? 80 : 100,
                }}
              >
                <Text
                  style={{
                    fontSize: trainNameText.length > 4 ? 12 : 14,
                    fontFamily: customTrainType.fontAvailable
                      ? "JR-Nishi"
                      : undefined,
                    fontWeight: !customTrainType.fontAvailable
                      ? "bold"
                      : undefined,
                    marginTop: customTrainType.fontAvailable ? 3 : 0,
                    color: "white",
                    textAlignVertical: "center",
                    textAlign: "left",
                  }}
                >
                  {customTrainType.shortName}
                </Text>
                {customData.trainName && (
                  <Text
                    style={{
                      fontSize: trainNameText.length > 4 ? 8 : 14,
                      color: "white",
                      maxWidth: displaySize === 226 ? 200 : 60,
                      textAlignVertical: "center",
                    }}
                  >
                    {trainNameText}
                  </Text>
                )}
              </View>
              <View
                style={{
                  backgroundColor: customTrainType.color,
                  width: 10,
                  borderLeftColor: customTrainType.color,
                  borderTopColor: lineColor,
                  borderBottomColor: lineColor,
                  borderTopWidth: displaySize === 226 ? 50 : 14,
                  borderBottomWidth: displaySize === 226 ? 50 : 14,
                  borderLeftWidth: displaySize === 226 ? 30 : 10,
                  borderRightWidth: 0,
                  //height: displaySize === 226 ? 20 : 100,
                  height: "100%",
                }}
              ></View>
            </View>
            <View
              style={{
                flexDirection: "row",
                alignContent: "center",
                alignSelf: "center",
                height: "100%",
                backgroundColor: lineColor,
                flex: 1,
              }}
            >
              <View
                style={{
                  flexDirection: "row",
                  alignContent: "center",
                  alignSelf: "center",
                  alignItems: "center",
                }}
              >
                <StationNumberMaker
                  currentStation={station}
                  singleSize={18}
                  useEach={true}
                />
                <Text
                  style={{
                    fontSize: customData?.ToData?.length > 4 ? 9 : 12,
                    color: "white",
                    fontWeight: "bold",
                    textAlignVertical: "center",
                    margin: 0,
                    padding: 0,
                    height: "100%",
                  }}
                >
                  {ToData}行
                </Text>
              </View>
            </View>
          </View>
          {displaySize === 226 && (
            <View
              style={{
                backgroundColor: "white",
                width: 10,
                borderLeftColor: "black",
                borderTopColor: lineColor,
                borderBottomColor: "white",
                borderRightColor: "black",
                borderTopWidth: 50,
                borderBottomWidth: 0,
                borderLeftWidth: 0,
                borderRightWidth: 20,
              }}
            ></View>
          )}
          <View
            style={{
              backgroundColor: "black",
              flex: displaySize === 226 ? 4 : 1,
              flexDirection: "row",
              alignItems: "center",
            }}
          >
            <View style={{ flexDirection: "column" }}>
              <Text
                style={{
                  fontSize: 10,
                  fontWeight: "bold",
                  color: "white",
                  marginHorizontal: 5,
                  paddingVertical: 0,
                  marginVertical: -1,
                }}
              >
                {nextStationData[0]?.Station_JP == train?.Pos
                  ? "ただいま"
                  : "次は"}
              </Text>
              {probably && (
                <Text
                  style={{
                    fontSize: 5,
                    color: "white",
                    fontWeight: "bold",
                    marginHorizontal: 5,
                    paddingVertical: 0,
                    marginVertical: -1,
                  }}
                >
                  (時刻推定)
                </Text>
              )}
            </View>
            <StationNumberMaker
              currentStation={nextStationData}
              singleSize={20}
              useEach={true}
            />
            <Text
              style={{
                fontSize: 18,
                fontWeight: "bold",
                color: "white",
                flex: 1,
              }}
            >
              {nextStationData[0]?.Station_JP || "不明"}
            </Text>
            {displaySize !== 226 && (
              <View
                style={{
                  backgroundColor: "white",
                  width: 10,
                  borderLeftColor: "black",
                  borderTopColor: "black",
                  borderBottomColor: "white",
                  borderRightColor: "white",
                  borderTopWidth: 21,
                  borderBottomWidth: 0,
                  borderLeftWidth: 0,
                  borderRightWidth: 7,
                }}
              ></View>
            )}
          </View>
        </View>
        <CurrentPositionBox
          train={train}
          lineColor={lineColor}
          trainDataWithThrough={untilStationData}
          isSmall={displaySize !== 226}
        />
      </View>
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          borderTopColor: "black",
          borderTopWidth: 2,
        }}
        pointerEvents="box-none"
      >
        <TouchableOpacity
          style={{
            flexDirection: "row",
            alignItems: "center",
          }}
          onPress={() => {
            setFixedPosition({ type: null, value: null });
          }}
        >
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              backgroundColor: "black",
              paddingHorizontal: 5,
              height: 26,
            }}
          >
            <Ionicons name="lock-closed" size={15} color="white" />
            <Text
              style={{
                color: "white",
                fontSize: 15,
                paddingRight: 5,
              }}
            >
              列車追跡中
            </Text>
            <Ionicons name="close" size={15} color="white" />
          </View>

          <View
            style={{
              backgroundColor: "#0000",
              width: 6,
              borderLeftColor: "black",
              borderTopColor: "black",
              borderBottomColor: "#0000",
              borderRightColor: "#0000",
              borderBottomWidth: 26,
              borderLeftWidth: 10,
              borderRightWidth: 0,
              borderTopWidth: 0,
              height: 26,
            }}
          />
        </TouchableOpacity>
        <TouchableOpacity
          style={{
            flexDirection: "row",
            alignItems: "center",
          }}
          onPress={() => {
            LayoutAnimation.configureNext({
              duration: 200,
              update: { type: "easeInEaseOut", springDamping: 0.4 },
            });
            if (displaySize === 226) {
              setDisplaySize(mapSwitch == "true" ? 76 : 80);
            } else {
              setDisplaySize(226);
            }
          }}
        >
          <View
            style={{
              backgroundColor: "#0000",
              width: 6,
              borderLeftColor: "#0000",
              borderTopColor: "black",
              borderBottomColor: "#0000",
              borderRightColor: "black",
              borderBottomWidth: 26,
              borderLeftWidth: 0,
              borderRightWidth: 10,
              borderTopWidth: 0,
              height: 26,
            }}
          />
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              backgroundColor: "black",
              paddingHorizontal: 5,
              height: 26,
            }}
          >
            <Ionicons
              name={displaySize == 226 ? "chevron-up" : "chevron-down"}
              size={15}
              color="white"
            />
            <Text
              style={{
                color: "white",
                paddingRight: 5,
                backgroundColor: "black",
                fontSize: 15,
              }}
            >
              {displaySize == 226 ? "列車情報縮小" : "列車情報展開"}
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const CurrentPositionBox = ({
  train,
  lineColor,
  trainDataWithThrough,
  isSmall,
}) => {
  let firstText = "";
  let secondText = "";
  let marginText = "";
  const { isBetween, Pos: PosData } = trainPosition(train);
  if (isBetween === true) {
    const { from, to } = PosData;
    firstText = from;
    secondText = to;
    marginText = "→";
  } else {
    const { Pos } = PosData;
    if (Pos !== "") {
      firstText = Pos;
    }
  }
  const delayTime = train?.delay == "入線" ? 0 : parseInt(train?.delay);
  return (
    <View
      style={{
        flex: isSmall ? 1 : 3,
        backgroundColor: "white",
        flexDirection: "row",
      }}
    >
      {isSmall && (
        <View style={{ flexDirection: "column" }}>
          <View
            style={{
              backgroundColor: "white",
              width: 10,
              borderLeftColor: lineColor,
              borderTopColor: lineColor,
              borderBottomColor: "white",
              borderRightColor: "white",
              borderTopWidth: 28,
              borderBottomWidth: 0,
              borderLeftWidth: 0,
              borderRightWidth: 10,
            }}
          ></View>
          <View
            style={{
              backgroundColor: "white",
              width: 10,
              borderLeftColor: "white",
              borderTopColor: "white",
              borderBottomColor: "white",
              borderRightColor: "white",
              borderTopWidth: 18,
              borderBottomWidth: 0,
              borderLeftWidth: 0,
              borderRightWidth: 10,
            }}
          ></View>
        </View>
      )}
      <ScrollView
        style={{ flex: 1, flexDirection: "row" }}
        horizontal
        overScrollMode="always"
      >
        {trainDataWithThrough.length > 0 &&
          trainDataWithThrough.map((d, index) => (
            <EachStopData
              d={d}
              index={index}
              key={d}
              delayTime={delayTime}
              isSmall={isSmall}
              secondText={secondText}
            />
          ))}
      </ScrollView>
    </View>
  );
};

type eachStopType = {
  d: string;
  delayTime: number;
  isSmall: boolean;
  index: number;
  secondText: string;
};

const EachStopData: FC<eachStopType> = (props) => {
  const { d, delayTime, isSmall, index, secondText } = props;
  if (!d) return null;
  if (d == "") return null;
  const [station, se, time] = d.split(",");
  let distanceMinute = 0;
  if (time != "") {
    const now = dayjs();
    const hour = parseInt(time.split(":")[0]);
    const distanceTime = now
      .hour(hour < 4 ? hour + 24 : hour)
      .minute(parseInt(time.split(":")[1]));
    distanceMinute = distanceTime.diff(now, "minute") + delayTime;
    if (now.hour() < 4) {
      if (hour < 4) {
        distanceMinute = distanceMinute - 1440;
      }
    }
  }
  return (
    <>
      <View
        style={{
          flexDirection: "column",
          backgroundColor: se.includes("通") ? "#6e6e6e77" : "#6e6e6eff",
          borderRadius: 30,
          marginHorizontal: isSmall ? 2 : 4,
          marginVertical: isSmall ? 0 : 2,
          padding: isSmall ? 2 : 4,
          justifyContent: "center",
          alignItems: "center",
          overflow: "hidden",
        }}
        key={d + "CurrentPositionBox"}
      >
        {station.split("").map((i, index, array) => {
          return (
            <Text
              key={i + index}
              style={{
                fontSize:
                  array.length < 5 ? (isSmall ? 5 : 12) : isSmall ? 3 : 10,
                color: "white",
                margin: 0,
                padding: 0,
                fontWeight: "bold",
              }}
            >
              {i}
            </Text>
          );
        })}
        <View style={{ flex: 1 }} />
        {isSmall ||
          (time != "" && (
            <Text
              style={{
                fontSize: isSmall ? 8 : 12,
                color: "black",
                backgroundColor: "white",
                fontWeight: "bold",
              }}
            >
              {distanceMinute}
            </Text>
          ))}
        <Text
          style={{
            fontSize: isSmall ? 8 : 14,
            color:
              index == 1 && secondText == ""
                ? "#ffe852ff"
                : se.includes("通")
                ? "#020202ff"
                : "white",
            marginTop: isSmall ? 0 : 3,
            height: isSmall ? "auto" : 17,
            fontWeight: "bold",
          }}
        >
          {index == 1 && secondText == ""
            ? "→"
            : se.includes("通")
            ? null
            : "●"}
        </Text>
      </View>
      {index == 0 && secondText != "" && (
        <View
          style={{
            flexDirection: "column",
            backgroundColor: "#0000",
            borderRadius: 10,
            marginHorizontal: isSmall ? 2 : 4,
            padding: isSmall ? 2 : 4,
            justifyContent: "center",
            alignItems: "center",
            overflow: "hidden",
          }}
        >
          <View style={{ flex: 1 }} />
          <Ionicons
            name="arrow-forward"
            size={isSmall ? 8 : 14}
            color="black"
            style={{ marginTop: isSmall ? 0 : 3 }}
          />
        </View>
      )}
    </>
  );
};