import React, { useEffect, useState } from "react";
import {
  View,
  LayoutAnimation,
  ScrollView,
  Linking,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  TouchableHighlight,
} from "react-native";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import ActionSheet from "react-native-actions-sheet";
import LottieView from "lottie-react-native";
import trainList from "../../assets/originData/trainList";
import { lineList } from "../../lib/getStationList";
import { heightPercentageToDP } from "react-native-responsive-screen";
import lineColorList from "../../assets/originData/lineColorList";

export const EachTrainInfo = ({
  setRef,
  data,
  navigate,
  originalStationList,
  openStationACFromEachTrainInfo,
}) => {
  const [trainData, setTrainData] = useState([]);
  const stationList =
    originalStationList &&
    lineList.map((d) =>
      originalStationList[d].map((a) => ({
        StationNumber: a.StationNumber,
        StationName: a.Station_JP,
      }))
    );

  useEffect(() => {
    if (!data.trainNum) return;
    const TD = trainList[data.trainNum];
    if (!TD) {
      setTrainData([]);
      return;
    }
    setTrainData(TD.split("#"));
  }, [data]);
  const getType = (string) => {
    switch (string) {
      case "express":
        return "特急";
      case "rapid":
        return "快速";
      default:
        return "";
    }
  };

  const migrateTrainName = (string) => {
    return string.replace("マリン", "マリンライナー");
  };

  return (
    <ActionSheet ref={setRef} gestureEnabled CustomHeaderComponent={<></>}>
      <View
        style={{
          backgroundColor: "#0099CC",
          borderRadius: 5,
          borderColor: "dark",
          borderWidth: 1,
        }}
      >
        <View style={{ height: 26, width: "100%" }}>
          <View
            style={{
              height: 6,
              width: 45,
              borderRadius: 100,
              backgroundColor: "#f0f0f0",
              marginVertical: 10,
              alignSelf: "center",
            }}
          />
        </View>
        <View
          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
        >
          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
            {data.limited
              ? getType(data.limited.split(":")[0]) +
                migrateTrainName(data.limited.split(":")[1] || "普通")
              : ""}
          </Text>
          <View style={{ flex: 1 }} />
          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
            {data.trainNum}
          </Text>
          {data.limited != undefined &&
            getType(data.limited.split(":")[0]) &&
            !data.limited.split(":")[1].match("サンポート") && (
              <Ionicons
                name="subway"
                color="white"
                size={30}
                style={{ margin: 5 }}
                onPress={() => {
                  LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);

                  navigate("trainbase", {
                    info: "train.html?tn=" + data.trainNum,
                  });
                  setRef.current?.hide();
                }}
              />
            )}
        </View>
        <ScrollView style={{ maxHeight: heightPercentageToDP("70%") }}>
          <View
            style={{
              padding: 10,
              backgroundColor: "white",
              borderBottomLeftRadius: 5,
              borderBottomRightRadius: 5,
            }}
          >
            <View style={{ alignItems: "center" }}>
              {/* <LottieView
                autoPlay
                loop
                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
                source={require("../../assets/51690-loading-diamonds.json")}
              />
              <Text>ほげほげふがふが</Text> */}
              {trainData.map((i, index) => {
                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);

                const colorIDs =
                  StationNumbers != null
                    ? StationNumbers.map((d) => {
                        return d.split("").filter((s) => "A" < s && s < "Z");
                      }).reduce((newArray, e) => {
                        return newArray.concat(e);
                      }, [])
                    : [];
                const EachIDs =
                  StationNumbers != null
                    ? StationNumbers.map((d) => {
                        return d
                          .split("")
                          .filter((s) => "0" <= s && s <= "9")
                          .join("");
                      })
                    : [];
                return (
                  <TouchableWithoutFeedback
                    onPress={() => openStationACFromEachTrainInfo(station)}
                    key={station}
                  >
                    <View
                      style={{
                        padding: 8,
                        flexDirection: "row",
                        borderBottomWidth: 1,
                        borderBottomColor: "#f0f0f0",
                        paddingLeft: 60,
                      }}
                    >
                      <View
                        style={{
                          width: 40,
                          height: 40,
                          position: "absolute",
                          left: 10,
                          top: 0,
                          flexDirection: "row",
                        }}
                      >
                        {colorIDs.map((color, index) => (
                          <View
                            style={{
                              backgroundColor: lineColorList[color],
                              flex: 1,
                            }}
                            key={color}
                          >
                            <View style={{ flex: 1 }} />
                            <Text
                              style={{
                                color: "white",
                                textAlign: "center",
                                fontSize: 10,
                                fontWeight: "bold",
                              }}
                            >
                              {colorIDs[index]}
                            </Text>
                            <Text
                              style={{
                                color: "white",
                                textAlign: "center",
                                fontSize: 10,
                                fontWeight: "bold",
                              }}
                            >
                              {EachIDs[index]}
                            </Text>
                            <View style={{ flex: 1 }} />
                          </View>
                        ))}
                      </View>
                      <Text style={{ fontSize: 20 }}>{station}</Text>
                      <View style={{ flex: 1 }} />
                      <Text style={{ fontSize: 20 }}>
                        {time} {se}
                      </Text>
                    </View>
                  </TouchableWithoutFeedback>
                );
              })}
            </View>
          </View>
        </ScrollView>
      </View>
    </ActionSheet>
  );
};