import React from "react";
import { View, Text, TouchableWithoutFeedback } from "react-native";
import dayjs from "dayjs";
import lineColorList from "../../../assets/originData/lineColorList";

export const EachStopList = ({
  i,
  index,
  stationList,
  points,
  currentTrainData,
  openStationACFromEachTrainInfo,
  showThrew,
}) => {
  if (!showThrew && i.split(",")[1] == "通過") return null;
  const [station, se, time] = i.split(","); // 阿波池田,発,6:21
  const Stations = stationList
    .map((a) => a.filter((d) => d.StationName == station))
    .reduce((newArray, e) => newArray.concat(e), []);
  /*Array [
        Object {
          "StationName": "佐古",
          "StationNumber": "T01",
        },
        Object {
          "StationName": "佐古",
          "StationNumber": "B01",
        },
      ] */
  const StationNumbers =
    Stations &&
    Stations.filter((d) => d.StationNumber).map((d) => d.StationNumber);
  // Array [  "T01",  "B01",]
  const lineIDs = [];
  const EachIDs = [];
  StationNumbers.forEach((d) => {
    const textArray = d.split("");
    lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
    EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
  });
  // Array [  "T",  "B",]
  // Array [  "01",  "01",]

  const dates = dayjs()
    .set("hour", parseInt(time.split(":")[0]))
    .set("minute", parseInt(time.split(":")[1]))
    .add(isNaN(currentTrainData?.delay) ? 0 : currentTrainData.delay, "minute");
  const timeString = se == "通過" ? "" : dates.format("HH:mm").split(":");
  const onClickStateText = (string) => {
    if (string != "通過") return;
    alert("この駅は通過駅です");
  };
  return (
    <TouchableWithoutFeedback
      onPress={() =>
        openStationACFromEachTrainInfo &&
        openStationACFromEachTrainInfo(station)
      }
      key={station}
    >
      <View style={{ flexDirection: "row", backgroundColor: "white" }}>
        <View
          style={{
            width: 35,
            position: "relative",
            marginHorizontal: 15,
            flexDirection: "row",
            height: "101%",
          }}
        >
          {lineIDs.map((lineID, index) => (
            <View
              style={{
                backgroundColor: `${lineColorList[lineID]}${
                  se == "通過" ? "80" : ""
                }`,
                flex: 1,
              }}
              key={lineID}
            >
              <View style={{ flex: 1 }} />
              <Text
                style={{
                  color: "white",
                  textAlign: "center",
                  fontSize: 10,
                  fontWeight: "bold",
                }}
              >
                {lineIDs[index]}
                {"\n"}
                {EachIDs[index]}
              </Text>
              <View style={{ flex: 1 }} />
            </View>
          ))}
        </View>
        <View
          style={{
            padding: 8,
            flexDirection: "row",
            borderBottomWidth: 1,
            borderBottomColor: "#f0f0f0",
            flex: 1,
          }}
        >
          <Text
            style={{ fontSize: 20, color: `#000${se == "通過" ? "5" : ""}` }}
          >
            {station}
          </Text>
          <View style={{ flex: 1 }} />
          <View style={{ position: "relative", width: 0 }}>
            {points ? (
              <Text style={{ fontSize: 20, position: "absolute", left: -60 }}>
                🚊
              </Text>
            ) : null}
          </View>

          {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
            <Text
              style={{
                fontSize: 15,
                color: "black",
                width: 60,
                position: "absolute",
                right: 120,
                textAlign: "right",
                textDecorationLine: "line-through",
              }}
            >
              {time}
            </Text>
          )}
          <Text
            style={{
              fontSize: 20,
              color: isNaN(currentTrainData?.delay)
                ? "black"
                : currentTrainData?.delay == 0
                ? "black"
                : "red",
              width: 60,
            }}
            onPress={() => onClickStateText(se)}
          >
            {se == "通過" ? "レ" : `${timeString[0]}:${timeString[1]}`}
          </Text>
          <Text style={{ fontSize: 18, width: 50 }}>
            {se?.replace("発", "出発").replace("着", "到着")}
          </Text>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
};