import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  StyleProp,
  ViewStyle,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { SheetManager } from "react-native-actions-sheet";
import LottieView from "lottie-react-native";
import { useTrainDelayData } from "@/stateBox/useTrainDelayData";
import dayjs from "dayjs";
export const JRSTraInfoBox = () => {
  const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
    useTrainDelayData();
  const styles: { [key: string]: StyleProp<ViewStyle> } = {
    touch: {
      backgroundColor: "#0099CC",
      borderRadius: 5,
      margin: 10,
      borderColor: "black",
      borderWidth: 2,
      overflow: "hidden",
    },
    scroll: {
      backgroundColor: "#0099CC",
      borderRadius: 5,
      maxHeight: 300,
    },
    bottom: {
      position: "absolute",
      top: 250,
      alignItems: "center",
      width: "100%",
      height: 50,
      backgroundColor: "#007FCC88",
    },
    box: {
      padding: 10,
      backgroundColor: "white",
      borderBottomLeftRadius: 5,
      borderBottomRightRadius: 5,
    },
  };
  return (
    <TouchableOpacity
      onPress={() => SheetManager.show("JRSTraInfo")}
      style={styles.touch}
    >
      <ScrollView scrollEnabled={false} style={styles.scroll}>
        <View
          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
        >
          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
            列車遅延速報EX
          </Text>
          <View style={{ flex: 1 }} />
          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
            {getTime ? dayjs(getTime).format("HH:mm") : NaN}
          </Text>
          <Ionicons
            name="reload"
            color="white"
            size={30}
            style={{ margin: 5 }}
            onPress={() => setLoadingDelayData(true)}
          />
        </View>
        <View style={styles.box}>
          {loadingDelayData ? (
            <View style={{ alignItems: "center" }}>
              <LottieView
                autoPlay
                loop
                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
                source={require("@/assets/51690-loading-diamonds.json")}
              />
            </View>
          ) : delayData ? (
            delayData.map((d, index, array) => {
              let data = d.split(" ");
              return (
                <View
                  style={{ flexDirection: "row" }}
                  key={data[1] + "key" + index}
                >
                  <Text style={{ flex: 15, fontSize: 18 }}>
                    {data[0].replace("\n", "")}
                  </Text>
                  <Text style={{ flex: 5, fontSize: 18 }}>{data[1]}</Text>
                  <Text style={{ flex: 6, fontSize: 18 }}>{data[3]}</Text>
                </View>
              );
            })
          ) : (
            <Text>現在、5分以上の遅れはありません。</Text>
          )}
        </View>
      </ScrollView>
      <View style={styles.bottom}>
        <View style={{ flex: 1 }} />
        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
          詳細を見る
        </Text>
        <View style={{ flex: 1 }} />
      </View>
    </TouchableOpacity>
  );
};