import React, { Component, useRef, useState, useEffect } from "react";
import {
  StatusBar,
  Platform,
  View,
  LayoutAnimation,
  ScrollView,
  Linking,
  Text,
  TouchableOpacity,
} from "react-native";
import Image from "react-native-remote-svg";
import Constants from "expo-constants";
import { List, ListItem } from "native-base";
import Icon from "react-native-vector-icons/Entypo";
import * as Location from "expo-location";
import StatusbarDetect from "../../StatusbarDetect";
var Status = StatusbarDetect();
import { useNavigation } from "@react-navigation/native";
import AutoHeightImage from "react-native-auto-height-image";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import {
  FontAwesome,
  Fontisto,
  Foundation,
  Ionicons,
  MaterialCommunityIcons,
} from "@expo/vector-icons";
import * as WebBrowser from "expo-web-browser";
import ActionSheet from "react-native-actions-sheet";
import LottieView from "lottie-react-native";
import SvgUri from "react-native-svg-uri";
export const JRSTraInfo = (props) => {
  const {
    JRSTraInfoEXAcSR,
    getTime,
    loadingDelayData,
    setLoadingDelayData,
    delayData,
  } = props;
  return (
    <ActionSheet
      ref={JRSTraInfoEXAcSR}
      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: 30, fontWeight: "bold", color: "white" }}>
            列車遅延速報EX
          </Text>
          <View style={{ flex: 1 }} />
          {/* <TouchableOpacity style={{padding:10,backgroundColor:"white",alignContent:"center"}} onPress={() => {doFetch()}}>
                      <Text style={{fontSize:20,fontWeight:"bold",color:"#0099CC"}}>最新の情報へ更新</Text>
                    </TouchableOpacity> */}
          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
            {getTime
              ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
              ":" +
              getTime.toLocaleTimeString("ja-JP").split(":")[1]
              : NaN}{" "}
          </Text>
          <Ionicons
            name="reload"
            color="white"
            size={30}
            style={{ margin: 5 }}
            onPress={() => {
              LayoutAnimation.easeInEaseOut(), setLoadingDelayData(true);
            }}
          />
        </View>
        <ScrollView>
          <View
            style={{
              padding: 10,
              backgroundColor: "white",
              borderBottomLeftRadius: 5,
              borderBottomRightRadius: 5,
            }}
          >
            {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) => {
                let data = d.split(" ");
                return (
                  <View style={{ flexDirection: "row" }}>
                    <Text style={{ flex: 15, fontSize: 20 }}>
                      {data[0].replace("\n", "")}
                    </Text>
                    <Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
                    <Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
                  </View>
                );
              })
            ) : (
              <Text>現在、5分以上の遅れはありません。</Text>
            )}
          </View>

          <View style={{ padding: 10 }}>
            <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
              列車遅延情報EXについて
            </Text>
            <Text style={{ color: "white" }}>
              列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
            </Text>
          </View>
          <TouchableOpacity
            style={{
              padding: 10,
              flexDirection: "row",
              borderColor: "white",
              borderWidth: 1,
              margin: 10,
              borderRadius: 5,
              alignItems: "center",
            }}
            onPress={() => Linking.openURL("https://twitter.com/JRSTrainfoEX")}
          >
            <MaterialCommunityIcons name="twitter" color="white" size={30} />
            <View style={{ flex: 1 }} />
            <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
              TwitterBOTはこちら！
            </Text>
            <View style={{ flex: 1 }} />
            <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
              →
            </Text>
          </TouchableOpacity>
        </ScrollView>
      </View>
    </ActionSheet>
  );
};