import React, { useState, useEffect, useRef } from 'react';
import {View,Text,TouchableOpacity } from 'react-native';
import {WebView} from 'react-native-webview';
import StatusbarDetect from '../StatusbarDetect';
import AsyncStorage from '@react-native-async-storage/async-storage';
import MapView,{ Marker, Geojson, PROVIDER_GOOGLE } from 'react-native-maps';
import { FontAwesome, Fontisto, Foundation, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
var Status = StatusbarDetect();
export default function trainMenu({route:{params: {webview}}, navigation:{ navigate }}){
    const [stationData,setStationData] = useState(undefined);
    const mapRef = useRef();
    useEffect(()=>{
        const HeaderConfig = {headers:{'referer':'https://train.jr-shikoku.co.jp/sp.html'}}

        Promise.all([
            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan', HeaderConfig).then(response => response.json()),
            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima',HeaderConfig).then(response => response.json()),
            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima2',HeaderConfig).then(response => response.json()),
            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan',HeaderConfig).then(response => response.json()),
            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan2',HeaderConfig).then(response => response.json()),
            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=koutoku',HeaderConfig).then(response => response.json()),
            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=tokushima',HeaderConfig).then(response => response.json()),
            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=naruto',HeaderConfig).then(response => response.json())
        ]).then(values =>{
            let stationList = {};
            [stationList.yosan, stationList.uwajima, stationList.uwajima2, stationList.dosan, stationList.dosan2, stationList.koutoku, stationList.tokushima, stationList.naruto] = values;
            setStationData(stationList);
        })
    },[]);
    return(
        <View style={{height:"100%",backgroundColor:"#0099CC"}}>
            <MapView style={{flex:1,width:"100%",height: "100%"}} 
                showsUserLocation={true}
                loadingEnabled={true}
                showsMyLocationButton={false}
                moveOnMarkerPress={false}
                showsCompass={false}
                ref={mapRef}
                //provider={PROVIDER_GOOGLE}
                initialRegion={{
                latitude: 34.194594,
                longitude: 133.679633,
                latitudeDelta: 0.5, //小さくなるほどズーム
                longitudeDelta: 0.5,}}>
                    {stationData && Object.keys(stationData).map(d=>
                    stationData[d].map((D,index)=>{
                        if(!D.StationMap)return null;
                        const latlng = D.StationMap.replace("https://www.google.co.jp/maps/place/","").split(",");
                        if(latlng.length == 0)return null;
                        return(
                        <Marker key={index} coordinate={{latitude: parseFloat(latlng[0]),longitude: parseFloat(latlng[1])}}
                        onPress={()=>{
                            webview.current?.injectJavaScript("MoveDisplayStation('"+d+"_"+D.MyStation+"_"+D.Station_JP+"')");
                            navigate('Apps');
                        }}>
                        </Marker>
                        )
                    })
                    ) }
            </MapView>
          <View style={{flexDirection:"row"}}>
            <UsefulBox backgroundColor={"#F89038"} icon="train-car" flex={1} onPressButton={()=>navigate('howto')}>使い方</UsefulBox>
            <UsefulBox backgroundColor={"#EA4752"} icon="star" 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>
            <TouchableOpacity style={{padding:10,flexDirection:"row",borderColor:"white",borderWidth:1,margin:10,borderRadius:5,alignItems:"center"}} onPress={()=>{AsyncStorage.setItem('status', "2022/04/14");navigate('Apps');}}>
              <View style={{flex:1}} />
              <Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>閉じる</Text>
              <View style={{flex:1}} />
            </TouchableOpacity>
        </View>
    )
}
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:18}}>{children}</Text>
    </TouchableOpacity>
  )
}