import React, { useRef } from 'react';
import {View, Platform} from 'react-native';
import {WebView} from 'react-native-webview';
import Constants from 'expo-constants';/* 
import StatusbarDetect from './StatusbarDetect';
var Status = StatusbarDetect(); */
export var webview = null;
export default function Apps (props) {
  const { navigation: { navigate } } = props;
  var urlcache="";
  const webview = useRef();
  return (
    <View style={{height:"100%",paddingTop: Constants.statusBarHeight,}}>
      {/* {Status} */}
      <WebView 
      useWebKit={true}
      ref={webview}
      source={{uri: 'https://train.jr-shikoku.co.jp/sp.html'}} 
      originWhitelist={['https://train.jr-shikoku.co.jp','https://train.jr-shikoku.co.jp/sp.html']} 
      mixedContentMode={'compatibility'}
      javaScriptEnabled={true}
      allowsBackForwardNavigationGestures={true}
      setSupportMultipleWindows={false}
      onNavigationStateChange={
        event =>{
          console.log(event);
          if(event.url != urlcache){//URL二重判定回避
            urlcache = event.url;
            
            if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) {
              if(Platform.OS==="android")navigate('howto');
              webview?.current.goBack();
              //Actions.howto();
            }
            else if (event.url.includes("https://train.jr-shikoku.co.jp/train.html")) {
              //Actions.trainbase({info: event.url});
              if(Platform.OS==="android")navigate('trainbase', {info: event.url});
              webview?.current.goBack();
            }
          }
        }
      } 
      onMessage={(event)=>{}}
      injectedJavaScript={INJECTED_JAVASCRIPT}/>
    </View>
  );
}
const INJECTED_JAVASCRIPT = `
  const setStationIcon = (行き先アイコン,img) =>{
    let newItem = document.createElement("div");
    if(行き先アイコン.getAttribute("style").includes("left")){
      行き先アイコン.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:left;height:20px;'>");
    }
    else{
      行き先アイコン.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:right;height:20px;'>");
    }
    行き先アイコン.remove();
  }
  var observer = new MutationObserver(()=>console.log(elem));
  const elem = document.querySelector('#modal_content');
  console.log(elem);
  const config = { 
    attributes: true, 
    childList: true, 
    characterData: true 
  };

  observer.observe(elem, config);
  document.getElementById('header').querySelector('a').style.display = 'none';
  document.getElementById('header').style.height = '50px';
  document.getElementById('main').style.paddingTop = '54px';

  document.getElementById('headerStr').style.display = 'none';
  
  setStrings();
  function setStrings(){
    try {
      document.getElementById('refreshIcon').click();
      var elements = document.querySelectorAll('[onclick]');
      for (let element of elements) {
        if(element.getAttribute('onclick').indexOf('ShowTrainTimeInfo') != -1){
          var 行き先情報 = element.getElementsByTagName("p")[0];
          var 列番データ = element.getAttribute('onclick').split('"')[1];
          var flag=false;
          var TrainType = undefined;

          
          switch(列番データ){
            //しおかぜメイン
            //8000 ノーマル
            case "2M":
            case "4M":
            case "6M":
            case "14M":
            case "16M":
            case "18M":
            case "26M":
            case "28M":
            case "30M":
            case "1M":
            case "3M":
            case "5M":
            case "13M":
            case "15M":
            case "17M":
            case "25M":
            case "27M":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000nr.png');
              break;
            //8000 アンパン
            case "10M":
            case "22M":
            case "9M":
            case "21M":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000ap.png');
              break;


            //8600
            case "8M":
            case "12M":
            case "20M":
            case "24M":
            case "7M":
            case "11M":
            case "19M":
            case "23M":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600.png');
              break;

            //いしづちメイン
            //8000 ノーマル

            case "1004M":
            case "1006M":
            case "1014M":
            case "1016M":
            case "1018M":
            case "1026M":
            case "1028M":
            case "1030M":
            case "1001M":
            case "1003M":
            case "1005M":
            case "1013M":
            case "1015M":
            case "1017M":
            case "1025M":
            case "1027M":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000no.png');
              break;

            //8000 アンパン
            case "1010M":
            case "1022M":
            case "1009M":
            case "1021M":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000ap.png');
              break;

            //8600
            case "1008M":
            case "1012M":
            case "1020M":
            case "1024M":
            case "1007M":
            case "1011M":
            case "1019M":
            case "1023M":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600_isz.png');
              break;

            //MEXP
            //8000
            case "1092M":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000no.png');
              break;
            //8600
            case "1091M":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600_isz.png');
              break;
            //三桁いしづち
            //8000 アンパン
            case "1041M":
            case "1044M":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000ap.png');
              break;
            //8600
            case "1043M":
            case "1042M":
            case "1046M":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600_isz.png');
              break;


            //南風 2700ノーマル
            case "34D":
            case "38D":
            case "40D":
            case "42D":
            case "46D":
            case "50D":
            case "52D":
            case "54D":
            case "58D":
            case "31D":
            case "35D":
            case "39D":
            case "41D":
            case "43D":
            case "47D":
            case "51D":
            case "53D":
            case "55D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700.png');
              break;
            //2700アンパン
            case "32D":
            case "36D":
            case "44D":
            case "48D":
            case "56D":
            case "33D":
            case "37D":
            case "45D":
            case "49D":
            case "57D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s2700apr.png');
              break;
            

            
            //うずしお
            //2700
            case "5006D":
            case "5022D":
            case "5013D":
            case "5029D":
            case "3002D":
            case "3004D":
            case "3010D":
            case "3012D":
            case "3016D":
            case "3018D":
            case "3024D":
            case "3028D":
            case "3030D":
            case "3003D":
            case "3005D":
            case "3007D":
            case "3015D":
            case "3019D":
            case "3021D":
            case "3025D":
            case "3027D":
            case "3031D":
            case "3033D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700_uzu.png');
              break;
            
            //2600
            case "3008D":
            case "3014D":
            case "3020D":
            case "3026D":
            case "3001D":
            case "3011D":
            case "3017D":
            case "3023D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2600.png');
              break;
            
            //キハ185
            case "3009D":
            case "3032D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185tu_uzu.png');
              break;
              
            //マリンライナー
            case "3104M":
            case "3106M":
            case "3108M":
            case "3110M":
            case "3112M":
            case "3114M":
            case "3116M":
            case "3118M":
            case "3120M":
            case "3122M":
            case "3124M":
            case "3126M":
            case "3128M":
            case "3130M":
            case "3132M":
            case "3134M":
            case "3136M":
            case "3138M":
            case "3140M":
            case "3142M":
            case "3144M":
            case "3146M":
            case "3148M":
            case "3150M":
            case "3152M":
            case "3154M":
            case "3156M":
            case "3158M":
            case "3160M":
            case "3162M":
            case "3164M":
            case "3166M":
            case "3168M":
            case "3170M":
            case "3105M":
            case "3107M":
            case "3109M":
            case "3111M":
            case "3113M":
            case "3115M":
            case "3117M":
            case "3119M":
            case "3121M":
            case "3123M":
            case "3125M":
            case "3127M":
            case "3129M":
            case "3131M":
            case "3133M":
            case "3135M":
            case "3137M":
            case "3139M":
            case "3141M":
            case "3143M":
            case "3145M":
            case "3147M":
            case "3149M":
            case "3151M":
            case "3153M":
            case "3155M":
            case "3157M":
            case "3159M":
            case "3161M":
            case "3163M":
            case "3165M":
            case "3167M":
            case "3169M":
            case "3175M":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s5001.png');
              break;
            case "3102M":
            case "3101M":
            case "3103M":
            case "3171M":
            case "3173M":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s5001k.png');
              break;

            //サンライズ瀬戸
            case "5032M":
            case "5031M":
            case "8041M": //琴平延長高松迄
            case "8031M": //琴平延長高松以降
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/w285.png');
              break;

            //宇和海
            //2000 ノーマル
            case "1052D":
            case "1056D":
            case "1058D":
            case "1064D":
            case "1070D":
            case "1074D":
            case "1076D":
            case "1078D":
            case "1080D":
            case "1082D":
            case "1051D":
            case "1059D":
            case "1065D":
            case "1071D":
            case "1073D":
            case "1075D":
            case "1077D":
            case "1079D":
            case "1053D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2000_uwa.png');
            break;
            //2000 アンパン込み
            case "1054D":
            case "1060D":
            case "1062D":
            case "1066D":
            case "1068D":
            case "1072D":
            case "1055D":
            case "1057D":
            case "1061D":
            case "1063D":
            case "1067D":
            case "1069D":
            case "1081D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s2002a.png');
            break;
            //しまんと
            case "2002D":
            case "2004D":
            case "2006D":
            case "2008D":
            case "2001D":
            case "2003D":
            case "2005D":
            case "2007D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700_smn.png');
            break;

            //あしずり 2000
            case "2074D":
            case "2076D":
            case "2080D":
            case "2084D":
            case "2086D":
            case "2071D":
            case "2075D":
            case "2077D":
            case "2081D":
            case "2083D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2000_asi.png');
            break;
            
            //あしずり 2700
            case "2078D":
            case "2082D":
            case "2088D":
            case "2073D":
            case "2079D":
            case "2085D":
            case "2072D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700_asi.png');
            break;
            //剣山
            case "4002D":
            case "4004D":
            case "4006D":
            case "4008D":
            case "4010D":
            case "4001D":
            case "4003D":
            case "4005D":
            case "4007D":
            case "4009D":
            case "4011D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185tu.png');
            break;
            //むろと
            case "5051D":
            case "5052D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185_mrt.png');
            break;

            
            //よしのがわトロッコ
            case "8452D":
            case "8451D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s185to_ai.png');
            break;

            //岡山高松アントロ
            case "8176D":
            case "8179D":
            //岡山琴平アントロ
            case "8277D":
            case "8278D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s32to4.png');
            break;

            //伊予灘ものがたり
            case "8901D":
            case "8903D":
            case "8902D":
            case "8904D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185iyoy.png');
            break;


            //千年ものがたり
            case "8011D":
            case "8012D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185mm1.png');
            break;

            //夜明けものがたり
            case "8053D":
            case "8054D":
            case "8062D":
            case "8063D":
              setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185ym1.png');
            break;
            default:
              break;
          }
          



          
          console.log(列番データ);
          if(new RegExp(/^4[1-9]\\d\\d[DM]$/).test(列番データ) || new RegExp(/^5[1-7]\\d\\d[DM]$/).test(列番データ)){
            行き先情報.innerText = "ワンマン\\n"+行き先情報.innerText;
            flag=true;
          }
          if(new RegExp(/^49[0-4]\\dD$/).test(列番データ) || new RegExp(/^9[0-4]\\dD$/).test(列番データ)){
            行き先情報.innerText = "(海経由)"+(flag ? "" : "\\n")+行き先情報.innerText;
          }
          if(new RegExp(/^46\\d\\dD$/).test(列番データ) || new RegExp(/^6\\d\\dD$/).test(列番データ)){
            行き先情報.innerText = "(内子経由)"+(flag ? "" : "\\n")+行き先情報.innerText;
          }
          if(列番データ.indexOf("H") != -1){
            行き先情報.innerText = 行き先情報.innerText+"試運転\\n";
          }
          else if(列番データ.indexOf("R") != -1){
            行き先情報.innerText = 行き先情報.innerText+"回送\\n";
          }
          else if(列番データ.indexOf("S") != -1){
            行き先情報.innerText = 行き先情報.innerText+"臨時列車\\n";
          }

          //貨物データ
          let JRF = false;
          switch(列番データ){
            case "71":
              行き先情報.innerText = "東京(タ)→高松(タ)"+"\\n"+行き先情報.innerText;
              break;
            case "73":
            case "75":
              行き先情報.innerText = "大阪(タ)→高松(タ)"+"\\n"+行き先情報.innerText;
              break;
            case "3079":
              行き先情報.innerText = "高松(タ)→伊予三島"+"\\n"+行き先情報.innerText;
              break;
            case "3071":
            case "3077":
              行き先情報.innerText = "高松(タ)→新居浜"+"\\n"+行き先情報.innerText;
              break;
            case "3073":
              行き先情報.innerText = "高松(タ)→松山貨物"+"\\n"+行き先情報.innerText;
              break;
            case "70":
              行き先情報.innerText = "高松(タ)→東京(タ)"+"\\n"+行き先情報.innerText;
              break;
            case "74":
            case "76":
              行き先情報.innerText = "高松(タ)→大阪(タ)"+"\\n"+行き先情報.innerText;
              break;
            case "3078":
              行き先情報.innerText = "伊予三島→高松(タ)"+"\\n"+行き先情報.innerText;
              break;
            case "3070":
              行き先情報.innerText = "新居浜→高松(タ)"+"\\n"+行き先情報.innerText;
              break;
            case "3076":
              行き先情報.innerText = "新居浜→高松(タ)"+"\\n"+行き先情報.innerText;
              break;
            case "3072":
              行き先情報.innerText = "松山貨物→高松(タ)"+"\\n"+行き先情報.innerText;
              break;
            case "9070":
              行き先情報.innerText = "臨時貨物"+"\\n"+行き先情報.innerText;
              break;
            default:
              JRF = true;
          }

          //土佐くろ
          //安芸行と併結列車を個別に表示、それ以外をdefaultで下りなら既定の行き先を、上りなら奈半利行を設定
          switch(列番データ){
            case "2086D":
              行き先情報.innerText = "[特]あしずり16号\\n高知行";
              break;
            case "2088D":
              行き先情報.innerText = "[特]あしずり18号\\n高知行";
              break;
            case "5814D":
            case "5816D":
              行き先情報.innerText = "ごめん・なはり線直通\\n快速 奈半利行";
              break;
            case "5812D":
              行き先情報.innerText = "ごめん・なはり線直通\\n快速 安芸行";
              break;
            case "5874D":
            case "5882D":
              行き先情報.innerText = "ごめん・なはり線直通\\n各停 安芸行";
              break;
            case "742D":
            case "746D":
              行き先情報.innerText = "土佐山田/奈半利行\\n(御免にて解結)\\nごめん・なはり線快速";
              break;
            default:
              if(new RegExp(/^58[1-3][1,3,5,7,9][DM]$/).test(列番データ)){
                行き先情報.innerText = "ごめん・なはり線直通\\n快速 "+行き先情報.innerText;
              }
              else if(new RegExp(/^58[4-9][1,3,5,7,9][DM]$/).test(列番データ)){
                行き先情報.innerText = "ごめん・なはり線直通\\n各停 "+行き先情報.innerText;
              }

              else if(new RegExp(/^58[3-4][0,2,4,6,8][DM]$/).test(列番データ)){
                行き先情報.innerText = "ごめん・なはり線直通\\n快速 奈半利行";
              }
              else if(new RegExp(/^58[5-9][0,2,4,6,8][DM]$/).test(列番データ)){
                行き先情報.innerText = "ごめん・なはり線直通\\n各停 奈半利行";
              }
              break;
          }

          //列番付与
          行き先情報.innerText = 行き先情報.innerText+列番データ+(JRF ? "":"レ");
          JRF || setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/ef210a.png');
        }
      }
      try{

        for(let d of document.getElementById('disp').childNodes){
          if(d.id == 'pMENU_2'){
            continue;
          }
          if(d.id == 'pMENU_2_En'){
            continue;
          }
          if(d.id == 'pMENU_3'){
            continue;
          }
          if(d.id == 'pMENU_3_En'){
            continue;
          }
          if(d.id == 'pMENU_k'){
            continue;
          }
          if(d.id == 'pMENU_k_En'){
            continue;
          }
          d.style.width = '100vw';
          for(let f of d.childNodes){
            try{
              
              if(f.style.alignItems || f.style.textAlign){
                f.style.width = '38vw';
              }
              else{
                if(f.id == 'upTrainCrossBar'){

                  f.style.width = '38vw';
                }
                else if(f.id == 'dwTrainCrossBar'){
                  f.style.left = '62vw';
                  f.style.width = '38vw';

                }
                else{
                  f.style.width = '0vw';
                }
                
              }
              if(f.style.textAlign == 'center'){
                f.style.width = '24vw';
                f.style.display = 'flex';
                for(let i of f.childNodes){
                  i.style.width = 'unset';
                  i.style.left = 'unset';
                  i.style.top = 'unset';
                  i.style.position = 'unset';
                  i.style.flex = '1';
                  i.style.margin = '5px'

                  if(i.style.backgroundColor != 'rgb(247, 247, 247)'){
                    for(let m of i.childNodes){
                      m.style.width = '20vw'
                    }
                  }
                }
              }
              
            }catch(e){}
          }
        }


        document.querySelector('#pMENU_2').style.borderStyle='solid';
        document.querySelector('#pMENU_2').style.borderColor='#00d3e8';
        document.querySelector('#pMENU_2').style.borderWidth='2px';
        document.querySelector('#pMENU_2').style.borderRadius='10%';
        document.querySelector('#pMENU_3').style.borderStyle='solid';
        document.querySelector('#pMENU_3').style.borderColor='#00d3e8';
        document.querySelector('#pMENU_3').style.borderWidth='2px';
        document.querySelector('#pMENU_3').style.borderRadius='10%';
        document.querySelectorAll('#pMENU_2 div').forEach((d)=>d.style.padding = '10px'); 
        document.querySelectorAll('#pMENU_3 div').forEach((d)=>d.style.padding = '10px'); 
        document.querySelectorAll('#topHeader div').forEach((d)=>d.style.width = '100vw'); 
        document.querySelectorAll('#disp div')[0].style.width = '100vw'; 
        document.getElementById('disp').style.width = '100vw';
        document.getElementById('disp').style.overflowX = 'hidden';


          
      }catch(e){
        alert("にゃー");
      }
    } catch (e) {}
    setTimeout(setStrings, 10000);
  }
`;