import React, { Component, useRef, useState, useEffect } from 'react';
import {StatusBar,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';


import 予讃線 from './assets/四国旅客鉄道予讃線.json';
import 土讃線 from './assets/四国旅客鉄道土讃線.json';
import 高徳線 from './assets/四国旅客鉄道高徳線.json';
import 内子線 from './assets/四国旅客鉄道内子線.json';
import 徳島線 from './assets/四国旅客鉄道徳島線.json';
import 鳴門線 from './assets/四国旅客鉄道鳴門線.json'
import LED_vision from './components/発車時刻表/LED_vidion';
const makeLineStationListValiable = (base,lineName)=>{
  let returnData =[];
  base.features.forEach(element =>{
    if(element.geometry.type=="Point"){
      returnData.push({
        lat:element.geometry.coordinates[1],
        lng:element.geometry.coordinates[0],
        name:element.properties.name,
        lineName:lineName
      })
    }
  });
  return returnData;
}
const yosanLineStation = makeLineStationListValiable(予讃線,"予讃線");
const DosanLineStation = makeLineStationListValiable(土讃線,"土讃線");
const KotokuLineStation = makeLineStationListValiable(高徳線,"高徳線");
const UchikoLineStation = makeLineStationListValiable(内子線,"(予讃)内子線");
const TokushimaLineStation = makeLineStationListValiable(徳島線,"徳島線");
const NarutoLineStation = makeLineStationListValiable(鳴門線,"鳴門線");
const stationList = {};



const UsefulBox = (props) =>{
  const { icon, backgroundColor, flex, onPressButton, children } = props;
  return(
    <TouchableOpacity style={{flex:flex,backgroundColor:backgroundColor,padding:10,alignItems:"center",margin:2}} onPress={onPressButton}>
      <MaterialCommunityIcons name={icon} color="white" size={50}/>
      <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>{children}</Text>
    </TouchableOpacity>
  )
}
const TicketBox = (props) =>{
  const { icon, backgroundColor, flex, onPressButton, children } = props;
  return(
    <TouchableOpacity style={{flex:flex,backgroundColor:backgroundColor,borderColor:"#0099CC",padding:10,borderWidth:1,margin:2,alignItems:"center"}} onPress={onPressButton}>
      <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>{children}</Text>
      {icon}
    </TouchableOpacity>
  )
}

const TextBox = (props) =>{
  const { backgroundColor, flex, onPressButton, children } = props;
  return(
    <TouchableOpacity style={{flex:flex,backgroundColor:backgroundColor,padding:10,height:70,alignItems:"center",alignContent:"center",margin:2}} onPress={onPressButton}>
      <View style={{flex:1}} />
        {children}
      <View style={{flex:1}} />
    </TouchableOpacity>
  )
}

export default function Menu(props) {
  const JRSTraInfoEXAcSR = useRef(null);
  const StationBoardAcSR = useRef(null);
  const navigation = useNavigation();

  
  const [stationName,setStationName] = useState(undefined);
  const getCurrentStation = (location) =>{
    const findStationEachLine = (selectLine,selectLineName) => {
      const searchArea = 0.005;
      for( let selectLineData of  selectLine){
        let latBool = false;
        let lngBool = false;
        if(location.latitude < selectLineData.lat){
          if((selectLineData.lat - location.latitude) < searchArea)latBool = true;
        }
        else{
          if((location.latitude - selectLineData.lat) < searchArea)latBool = true;
        }

        if(location.longitude < selectLineData.lng){
          if((selectLineData.lng - location.longitude) < searchArea)lngBool = true;
        }
        else{
          if((location.longitude - selectLineData.lng) < searchArea)lngBool = true;
        }
        if(latBool && lngBool){
          for(let data of stationList.日英対応表){
            if(data.Station_JP == selectLineData.name){
              let pre = undefined;
              let nex = undefined;
              let now = undefined;
              let index =0;
              for(let da of stationList[selectLineName]){
                if((data.Station_JP == da.Station_JP) || (data.Station_JP == da.StationName)){
                  try{
                    let preEn = undefined;
                    stationList.日英対応表.forEach((j,l)=>{
                      if(j.Station_JP == (stationList[selectLineName][index-1].Station_JP ? stationList[selectLineName][index-1].Station_JP : stationList[selectLineName][index-1].StationName)){
                        preEn = j.Station_EN;
                      }
                    })
                    pre = {
                      name:stationList[selectLineName][index-1].Station_JP ? stationList[selectLineName][index-1].Station_JP : stationList[selectLineName][index-1].StationName,
                      en:preEn,
                      StationNumber:stationList[selectLineName][index-1].StationNumber,
                      StationTimeTable:stationList[selectLineName][index-1].StationTimeTable
                    }  
                  }catch(e){
                    pre = {
                      name:null,
                      en:null,
                      StationNumber:null
                    }  
                  }
                  now = {
                    LineName:selectLineData.lineName,
                    name:selectLineData.name,
                    en:data.Station_EN,
                    StationNumber:da.StationNumber,
                    JrHpUrl:da.JrHpUrl,
                    StationTimeTable:da.StationTimeTable
                  }
                  try{
                    let nexEn = undefined;
                    stationList.日英対応表.forEach((j,l)=>{
                      if(j.Station_JP == (stationList[selectLineName][index+1].Station_JP ? stationList[selectLineName][index+1].Station_JP : stationList[selectLineName][index+1].StationName)){
                        nexEn = j.Station_EN;
                      }
                    })
                    nex = {
                      name:stationList[selectLineName][index+1].Station_JP ? stationList[selectLineName][index+1].Station_JP : stationList[selectLineName][index+1].StationName,
                      en:nexEn,
                      StationNumber:stationList[selectLineName][index+1].StationNumber,
                      StationTimeTable:stationList[selectLineName][index+1].StationTimeTable
                    }  
                  }catch(e){
                    nex = {
                      name:null,
                      en:null,
                      StationNumber:null,
                      StationTimeTable:null
                    }  
                  }
                }
                index++;
              }
              if(now){
                setStationName({
                  "前":pre,
                  "今":now,
                  "次":nex
                });  
                return true;
              }
            }
          }
        }
      }
      return false;
    }
    findStationEachLine(yosanLineStation,"予讃線") ? null : 
    findStationEachLine(yosanLineStation,"松宇線") ? null : 
    findStationEachLine(UchikoLineStation,"松宇線") ? null : 
    findStationEachLine(DosanLineStation,"土讃線") ? null : 
    findStationEachLine(DosanLineStation,"窪川線") ? null : 
    findStationEachLine(KotokuLineStation,"高徳線") ? null :
    findStationEachLine(TokushimaLineStation,"徳島線") ? null :
    findStationEachLine(NarutoLineStation,"鳴門線") ? null : console.log("not found");
  }
  async function loadOfficialStationList(){
    const HeaderConfig = {
      headers:{
        'referer':'https://train.jr-shikoku.co.jp/sp.html'
      }
    }
    Promise.all([
      await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan', HeaderConfig).then(response => response.json()),
      await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima',HeaderConfig).then(response => response.json()),
      await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima2',HeaderConfig).then(response => response.json()),
      await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan',HeaderConfig).then(response => response.json()),
      await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan2',HeaderConfig).then(response => response.json()),
      await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=koutoku',HeaderConfig).then(response => response.json()),
      await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=tokushima',HeaderConfig).then(response => response.json()),
      await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=naruto',HeaderConfig).then(response => response.json()),
      await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=between',HeaderConfig).then(response => response.json()),
      await fetch('https://train.jr-shikoku.co.jp/g?arg1=line&arg2=train_lang',HeaderConfig).then(response => response.json())
    ]).then((values)=>{
      [stationList.予讃線, stationList.松宇線, stationList.伊予灘線, stationList.土讃線, stationList.窪川線, stationList.高徳線, stationList.徳島線, stationList.鳴門線, stationList.駅間リスト,stationList.日英対応表] = values;
      
      
      const concatBetweenStations = (eachRouteData) => {
        let additional = [];
        eachRouteData.forEach((routeData,routeIndex) => {
          try{
            const currentStationID = parseInt(routeData.StationNumber.replace(/[A-Z]/g,""))
            const nextStationID = parseInt(eachRouteData[routeIndex+1].StationNumber.replace(/[A-Z]/g,""))
            if((nextStationID-currentStationID) != 1){
              stationList.駅間リスト.forEach(betweenList=>{
                if(betweenList.BetweenStation == (routeData.Station_JP+"～"+eachRouteData[routeIndex+1].Station_JP)){
                  additional = additional.concat(betweenList.Datas);
                }
              })  
            }  
          }catch(e){
          }
        });
        return(eachRouteData.concat(additional).sort((a,b)=> (a.StationNumber > b.StationNumber) ? 1 : -1 ))
      }
      stationList.予讃線 = concatBetweenStations(stationList.予讃線);
      stationList.松宇線 = concatBetweenStations(stationList.松宇線);
      stationList.伊予灘線 = concatBetweenStations(stationList.伊予灘線);
      stationList.土讃線 = concatBetweenStations(stationList.土讃線);
      stationList.窪川線 = concatBetweenStations(stationList.窪川線);
      stationList.高徳線 = concatBetweenStations(stationList.高徳線);
      stationList.徳島線 = concatBetweenStations(stationList.徳島線);
      stationList.鳴門線 = concatBetweenStations(stationList.鳴門線);
      
    });
  }

  
  


  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(async() => {
    let { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      setErrorMsg('Permission to access location was denied');
      return;
    }
    Location.getCurrentPositionAsync({}).then(location=>{
      console.log(location);
      setLocation(location);
      loadOfficialStationList().then(()=>getCurrentStation(location.coords));
    })
  }, []);


  const LottieRef = useRef(null);
  const LottieRef2 = useRef(null);
  const [count,setCount] =useState(0);
  const [delayData,setDelayData] = useState(undefined);
  const [getTime,setGetTime] = useState(new Date());
  const [loadingDelayData,setLoadingDelayData] = useState(true);

  useEffect(()=>{
    fetch("https://script.google.com/macros/s/AKfycbyKxch7z7l8e07LXulRHqxjVoIiB13kcgvoToLE-rqlxLmLSKdlmqz0FI1F2EuA7Zfg/exec")
      .then(response => response.text())
      .then(data => {if(data != ""){setDelayData(data.split("^"))}else setDelayData(null)})
      .then(data => LayoutAnimation.easeInEaseOut())
      .then(()=>setGetTime(new Date()))
      .finally(()=>setLoadingDelayData(false));
  },[loadingDelayData])

  useEffect(()=>{
    try{
      LottieRef?.current.play();
      LottieRef2?.current.play();
    }catch(e){}
    
  })
    return (
      <View style={{height:"100%",paddingTop: Constants.statusBarHeight,backgroundColor:"white"}}>
        {Status}
        <View style={{alignItems:"center"}}>
          <TouchableOpacity onPress={()=>Linking.openURL("https://www.jr-shikoku.co.jp")}>
            <AutoHeightImage source={require("./assets/Header.png")}  resizeMode='contain' width={wp("100%")}/>
          </TouchableOpacity>
          </View>
        <ScrollView>
          <View style={{flexDirection:"row"}}>
            <UsefulBox backgroundColor={"#F89038"} icon="train-car" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/")}>駅・鉄道情報</UsefulBox>
            <UsefulBox backgroundColor={"#EA4752"} icon="google-spreadsheet" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box")}>運賃表</UsefulBox>
            <UsefulBox backgroundColor={"#91C31F"} icon="clipboard-list-outline" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/e5489/")}>予約</UsefulBox>
          </View>
          <TextBox backgroundColor="#0099CC" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/02_information/suspension/sp/")}>
            <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>新型コロナウイルスに関するお知らせ</Text>
            <Text style={{color:"white",fontSize:18}}>列車の運行計画・混雑状況・感染症対策への取り組み</Text>
          </TextBox>
          {stationName ? stationName.今 ?
          <TouchableOpacity style={{ width: wp("80%"), height: wp("80%")/20*9,borderColor:"#2E94BB",borderWidth:1,margin:10,marginHorizontal:wp("10%")}} /* onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)}  */onPress={() => {StationBoardAcSR.current?.setModalVisible()}}>
            <View style={{position:"absolute",bottom:"0%",left:"0%",width:"100%",height:'30%',backgroundColor:"#2E94BB"}} />
            <Text style={{position:"absolute",top:"2%",left:"2%",fontWeight:"bold",fontSize:parseInt("30%"),color:"#2E94BB"}}>JR</Text>
            <View style={{position:"absolute",alignContent:"center",alignItems:"center",top:"20%",right:'10%',width:wp("10%"),height:wp("10%"),borderColor:"#2E94BB",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
              <View style={{flex:1}} />
              <Text style={{fontSize:parseInt("20%")}}>{stationName.今.StationNumber}</Text>
              <View style={{flex:1}} />
            </View>
            <View style={{position:"absolute",top:"10%",alignContent:"center",flexDirection:"row"}}>
              <View style={{flex:1}}/>
              <View style={{alignItems:"center"}}>
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text> 
                <Text style={{fontWeight:"bold",fontSize:parseInt("40%"),color:"#005170"}}>{stationName.今.name}</Text> 
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.en}</Text>   
              </View> 
              <View style={{flex:1}}/>
            </View>
            <View style={{position:"absolute",bottom:"0%",height:"30%",width:"100%",alignItems:"center",flexDirection:"row"}}>
              {stationName.前 ? <Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10}}>◀</Text> : null}
              
              {stationName.前 ? 
              <View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
                <View style={{flex:1}} />
                <Text style={{fontSize:parseInt("10%"),color:"white"}}>{stationName.前.StationNumber}</Text>
                <View style={{flex:1}} />
              </View> : null}
              <View style={{flex:1,alignItems:"flex-start"}}>
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white"}}>{stationName.前.name}</Text> 
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white"}}>{stationName.前.en}</Text>    
              </View>
              <TouchableOpacity style={{alignItems:"center"}} onPress={()=>Linking.openURL(stationName.今.StationTimeTable)}>
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),backgroundColor:"white",color:"#005170",padding:5}}>時刻表</Text>
              </TouchableOpacity>
              <View style={{flex:1,alignItems:"flex-end"}}>
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white"}}>{stationName.次.name}</Text> 
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white"}}>{stationName.次.en}</Text>    
              </View>
              {stationName.次.name != null ? 
              <View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
                <View style={{flex:1}} />
                <Text style={{fontSize:parseInt("10%"),color:"white"}}>{stationName.次.StationNumber}</Text>
                <View style={{flex:1}} />
              </View> : null}
              {stationName.次.name != null ? <Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10}}>▶</Text>: null}
            </View>
            
          </TouchableOpacity>: null : null}
          {stationName ? stationName.今 ?
          <LED_vision stationName={stationName} />
          : null : null}
          <TouchableOpacity onPress={() => {JRSTraInfoEXAcSR.current?.setModalVisible()}}>
            <View style={{backgroundColor:"#0099CC",borderRadius:5,margin:10,borderColor:"black",borderWidth:2,overflow:"hidden"}}>
              <ScrollView scrollEnabled={false} style={{backgroundColor:"#0099CC",borderRadius:5,maxHeight:300,}}>
                <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>
                <View style={{padding:10,backgroundColor:"white",borderBottomLeftRadius:5,borderBottomRightRadius:5}}>
                  {loadingDelayData ?
                   <View style={{alignItems:"center"}}>
                    <LottieView ref={LottieRef} 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>
              </ScrollView>    
              <View style={{position:"absolute",top:250,alignItems:"center",width:"100%",height:50,backgroundColor:"#007FCC88"}}>
                <View style={{flex:1}}/>
                <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>詳細を見る</Text>
                <View style={{flex:1}}/>
              </View>
            </View>
            
            {/* <View style={{position:"absolute",bottom:0,alignItems:"center",width:"100%",height:"100%",backgroundColor:"#007FCC88"}}>
              <View style={{flex:1}}/>
              <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>準備中...</Text>
              <View style={{flex:1}}/>
            </View> */}
          </TouchableOpacity>
          

          <View style={{flexDirection:"row"}}>
            <TicketBox backgroundColor={"#AD7FA8"} icon={<Foundation name="ticket" color="white" size={50}/>} flex={1} onPressButton={()=>Linking.openURL("https://www.jr-eki.com/ticket/brand")}>トクトク切符</TicketBox>
            <TicketBox backgroundColor={"#8F5902"} icon={<FontAwesome name="first-order" color="white" size={50}/>} flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/event_train/sp/")}>観光列車</TicketBox>
            <TicketBox backgroundColor={"#888A85"} icon={<Ionicons name="flag" color="white" size={50}/>} flex={1} onPressButton={()=>Linking.openURL("https://www.jr-eki.com/tour/brand")}>旅行ツアー</TicketBox>
          </View>
          <TextBox backgroundColor="#0099CC" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/sp/index.html#menu-box")}>
            <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>臨時列車などのお知らせ</Text>
            <Text style={{color:"white",fontSize:18}}>区間縮小・計画運休・イベント・季節臨時列車など</Text>
          </TextBox>
          <TextBox backgroundColor="#0099CC" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/03_news/press/")}>
            <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>ニュースリリース</Text>
            <Text style={{color:"white",fontSize:18}}>公式プレス記事はこちら</Text>
          </TextBox>
          <TextBox backgroundColor="#0099CC" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/teiki/")}>
            <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>定期運賃計算</Text>
            <Text style={{color:"white",fontSize:18}}>通常/学生/快て〜き等はこちら</Text>
          </TextBox>
          <TextBox backgroundColor="#0099CC" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/04_company/group/sp/")}>
            <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>JR四国のお店・サービス</Text>
            <Text style={{color:"white",fontSize:18}}>JR四国グループの施設をご案内</Text>
          </TextBox>
          <View style={{flexDirection:"row"}}>
            <TouchableOpacity style={{flex:1,backgroundColor:"#729FCF",borderColor:"#0099CC",padding:10,borderWidth:1,margin:2,alignItems:"center"}} onPress={()=>Linking.openURL("https://www.jr-odekake.net/smt/")}>
              <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>時刻・運賃計算</Text>
              <Text style={{color:"white",fontWeight:"bold",fontSize:18}}>(マイ・ダイヤ)</Text>
              <Foundation name="yen" color="white" size={50}/>
              <Text style={{color:"white"}}>マイ・ダイヤはJR西日本提供のサービスです。</Text>
            </TouchableOpacity>
            <TouchableOpacity style={{flex:1,backgroundColor:"#8AE234",borderColor:"#0099CC",padding:10,borderWidth:1,margin:2,alignItems:"center"}} onPress={()=>Linking.openURL("tel:0570-00-4592")}>
              <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>JR四国案内センター</Text>
              <Foundation name="telephone" color="white" size={50}/>
              <Text style={{color:"white"}}>0570-00-4592</Text>
              <Text style={{color:"white"}}>(8:00~20:00 年中無休)</Text>
              <Text style={{color:"white"}}>(通話料がかかります)</Text>
            </TouchableOpacity>
          </View>
          <View style={{backgroundColor:"#0099CC",borderRadius:10,margin:10,borderColor:"black",borderWidth:2}}>
            <View style={{padding:10,flexDirection:"row",alignItems:"center"}}>
              <MaterialCommunityIcons name="twitter"style={{padding:5}} color="white" size={30}/>
              <Text style={{fontSize:30,fontWeight:"bold",color:"white"}}>公式Twitter一族</Text>
            </View>
            <View style={{padding:10,backgroundColor:"white",borderBottomLeftRadius:10,borderBottomRightRadius:10}}>
              <ListItem onPress={()=>Linking.openURL("https://twitter.com/JRshikoku_tokyo")}>
                  <Text>JR四国 東京営業情報【公式】</Text>
                  <View style={{flex:1}}/>
                  <Icon name="chevron-right" size={20}/>
              </ListItem>
              <ListItem onPress={()=>Linking.openURL("https://twitter.com/JRshikoku_osaka")}>
                  <Text>JR四国　大阪営業部【公式】</Text>
                  <View style={{flex:1}}/>
                  <Icon name="chevron-right" size={20}/>
              </ListItem>
              <ListItem onPress={()=>Linking.openURL("https://twitter.com/shikoku_DC")}>
                  <Text>JR四国営業部 四国DC情報【公式】</Text>
                  <View style={{flex:1}}/>
                  <Icon name="chevron-right" size={20}/>
              </ListItem>
              <ListItem onPress={()=>Linking.openURL("https://twitter.com/jr_shikoku_info")}>
                  <Text>JR四国運行情報Twitter</Text>
                  <View style={{flex:1}}/>
                  <Icon name="chevron-right" size={20}/>
              </ListItem>
              <ListItem onPress={()=>Linking.openURL("https://twitter.com/Smile_Eki_Chan")}>
                  <Text>JR四国いそうろう妖精 すまいるえきちゃん♡【公式】</Text>
                  <View style={{flex:1}}/>
                  <Icon name="chevron-right" size={20}/>
              </ListItem>
              <ListItem onPress={()=>Linking.openURL("https://twitter.com/JR_Shikoku_DPT")}>
                  <Text>JR四国デザインPT♡</Text>
                  <View style={{flex:1}}/>
                  <Icon name="chevron-right" size={20}/>
              </ListItem>
              <ListItem onPress={()=>Linking.openURL("https://twitter.com/PT2nd_Yuki")}>
                  <Text>JR四国デザインPT弐号◇</Text>
                  <View style={{flex:1}}/>
                  <Icon name="chevron-right" size={20}/>
              </ListItem>
            </View>
          </View> 
          <Text style={{fontWeight:"bold",fontSize:20}}>このアプリについて</Text>
          <Text>このアプリはXprocess(HARUKIN)が製作しているJR四国の完全非公式アシストアプリケーションです。このアプリに関することでのJR四国公式へ問合せすることはお控えください。以下のTwitterよりお願いします。</Text>
          <Text>2021/6/23 4.0公開！ホーム画面を大改造しました。</Text>
          <TextBox backgroundColor="#CC0000" flex={1} onPressButton={()=>Linking.openURL("https://twitter.com/Xprocess_main")}>
            <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>XprocessのTwitter</Text>
            <Text style={{color:"white",fontSize:18}}>制作運営のTwitterです。</Text>
          </TextBox>
          <SvgUri width="200" height="200" source={ require('./assets/トレインビジョン関係/1.svg') } />
        </ScrollView>
        <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 ref={LottieRef2} 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>
        <ActionSheet ref={StationBoardAcSR}gestureEnabled CustomHeaderComponent={()=>{}}>
          <View style={{backgroundColor:"white",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"}}>にゃー</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>
            {stationName ? stationName.今 ?
            <AutoHeightImage source={{uri:stationName.今.JrHpUrl+"images/illustration.png"}} resizeMode='contain' width={wp("80%")}/>
            : null : null}
            {stationName ? stationName.今 ?
          <TouchableOpacity style={{ width: wp("80%"), height: wp("80%")/20*9,borderColor:"#2E94BB",borderWidth:1,margin:10,marginHorizontal:wp("10%")}}  onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)} /* onPress={() => {StationBoardAcSR.current?.setModalVisible()}}*/>
            <View style={{position:"absolute",bottom:"0%",left:"0%",width:"100%",height:'30%',backgroundColor:"#2E94BB"}} />
            <Text style={{position:"absolute",top:"2%",left:"2%",fontWeight:"bold",fontSize:parseInt("30%"),color:"#2E94BB"}}>JR</Text>
            <View style={{position:"absolute",alignContent:"center",alignItems:"center",top:"20%",right:'10%',width:wp("10%"),height:wp("10%"),borderColor:"#2E94BB",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
              <View style={{flex:1}} />
              <Text style={{fontSize:parseInt("20%")}}>{stationName.今.StationNumber}</Text>
              <View style={{flex:1}} />
            </View>
            <View style={{position:"absolute",top:"10%",alignContent:"center",flexDirection:"row"}}>
              <View style={{flex:1}}/>
              <View style={{alignItems:"center"}}>
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text> 
                <Text style={{fontWeight:"bold",fontSize:parseInt("40%"),color:"#005170"}}>{stationName.今.name}</Text> 
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.en}</Text>   
              </View> 
              <View style={{flex:1}}/>
            </View>
            <View style={{position:"absolute",bottom:"0%",height:"30%",width:"100%",alignItems:"center",flexDirection:"row"}}>
              {stationName.前 ? <Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10}}>◀</Text> : null}
              
              {stationName.前 ? 
              <View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
                <View style={{flex:1}} />
                <Text style={{fontSize:parseInt("10%"),color:"white"}}>{stationName.前.StationNumber}</Text>
                <View style={{flex:1}} />
              </View> : null}
              <View style={{flex:1,alignItems:"flex-start"}}>
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white"}}>{stationName.前.name}</Text> 
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white"}}>{stationName.前.en}</Text>    
              </View>
              <TouchableOpacity style={{alignItems:"center"}} onPress={()=>Linking.openURL(stationName.今.StationTimeTable)}>
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),backgroundColor:"white",color:"#005170",padding:5}}>時刻表</Text>
              </TouchableOpacity>
              <View style={{flex:1,alignItems:"flex-end"}}>
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white"}}>{stationName.次.name}</Text> 
                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white"}}>{stationName.次.en}</Text>    
              </View>
              {stationName.次.name != null ? 
              <View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
                <View style={{flex:1}} />
                <Text style={{fontSize:parseInt("10%"),color:"white"}}>{stationName.次.StationNumber}</Text>
                <View style={{flex:1}} />
              </View> : null}
              {stationName.次.name != null ? <Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10}}>▶</Text>: null}
            </View>
            
          </TouchableOpacity>: null : null}
              
            </ScrollView>
          </View>    
         
        </ActionSheet>
      </View>
    );
}
