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";
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 { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";

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";
import Sign from "./components/駅名表/Sign";

import { UsefulBox } from "./components/atom/UsefulBox";
import { TicketBox } from "./components/atom/TicketBox";
import { TextBox } from "./components/atom/TextBox";
import { getStationList } from "./lib/getStationList";
import { JRSTraInfo } from "./components/ActionSheetComponents/JRSTraInfo";

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

  //位置情報
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  useEffect(() => {
    Location.requestForegroundPermissionsAsync().then((data) => {
      if (data.status !== "granted") {
        setErrorMsg("Permission to access location was denied");
        return () => {};
      }
      Location.getCurrentPositionAsync({}).then((location) =>
        setLocation(location)
      );
    });
    setInterval(() => {
      Location.getCurrentPositionAsync({}).then((location) =>
        setLocation(location)
      );
    }, 10000);
  }, []);

  const [originalStationList, setOriginalStationList] = useState();
  useEffect(() => getStationList().then(setOriginalStationList), []);

  const [stationName, setStationName] = useState(undefined);
  const [currentStation, setCurrentStation] = useState(undefined);
  useEffect(() => {
    if (!location) return () => {};
    if (!originalStationList) return () => {};
    const findStationEachLine = (selectLine) => {
      const searchArea = 0.0015;
      const _calcDistance = (from, to) => {
        let lat = Math.abs(from.lat - to.lat);
        let lng = Math.abs(from.lng - to.lng);
        return Math.sqrt(lat * lat + lng * lng);
      };
      let NearStation = selectLine.filter(
        (d) =>
          _calcDistance(d, {
            lat: location.coords.latitude,
            lng: location.coords.longitude,
          }) < searchArea
      );
      return NearStation;
    };

    const lineList = [
      "予讃線",
      "松宇線",
      "伊予灘線",
      "土讃線",
      "窪川線",
      "高徳線",
      "徳島線",
      "鳴門線",
      "瀬戸大橋線",
    ];
    let returnDataBase = lineList
      .map((d) => findStationEachLine(originalStationList[d]))
      .filter((d) => d.length > 0)
      .reduce((pre, current) => {
        pre.push(...current);
        return pre;
      }, []);
    LayoutAnimation.spring();
    if (returnDataBase.length) {
      let currentStation = currentStation == undefined ? [] : currentStation;
      if (currentStation.toString() != returnDataBase.toString()) {
        setCurrentStation(returnDataBase);
      }
    } else {
      setCurrentStation(undefined);
      StationBoardAcSR.current?.hide();
    }
  }, [location, originalStationList]);

  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) => setDelayData(data !== "" ? data.split("^") : null))
      .then(LayoutAnimation.easeInEaseOut)
      .then(() => setGetTime(new Date()))
      .finally(() => setLoadingDelayData(false));
  }, [loadingDelayData]);

  return (
    <View
      style={{
        height: "100%",
        backgroundColor: "white",
        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
      }}
    >
      <StatusbarDetect />
      <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: 18 }}>
            新型コロナウイルスに関するお知らせ
          </Text>
          <Text style={{ color: "white", fontSize: 15 }}>
            列車の運行計画・混雑状況・感染症対策への取り組み
          </Text>
        </TextBox>
        {currentStation && (
          <>
            <Sign
              currentStation={currentStation}
              originalStationList={originalStationList}
              oP={StationBoardAcSR.current?.setModalVisible}
            />
            <LED_vision station={currentStation[0]} />
          </>
        )}
        <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 }} />
                <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
                      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>
            </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>
        </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-eki.com/smart-eki/index.html")
          }
        >
          <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
            スマートえきちゃん
          </Text>
          <Text style={{ color: "white", fontSize: 18 }}>
            JR四国のチケットレススマホアプリです。
          </Text>
        </TextBox>
        <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" }}>
              JR四国公式Twitter一族
            </Text>
          </View>
          <View
            style={{
              padding: 10,
              backgroundColor: "white",
              borderBottomLeftRadius: 10,
              borderBottomRightRadius: 10,
            }}
          >
            {((data) =>
              data.map((d) => (
                <ListItem onPress={() => Linking.openURL(d.url)}>
                  <Text>{d.name}</Text>
                  <View style={{ flex: 1 }} />
                  <Icon name="chevron-right" size={20} />
                </ListItem>
              )))([
              {
                url: "https://twitter.com/JRshikoku_eigyo",
                name: "JR四国営業部【公式】",
              },
              {
                url: "https://twitter.com/JRshikoku_tokyo",
                name: "JR四国 東京営業情報【公式】",
              },
              {
                url: "https://twitter.com/JRshikoku_osaka",
                name: "JR四国 大阪営業部【公式】",
              },
              {
                url: "https://twitter.com/jr_shikoku_info",
                name: "ＪＲ四国列車運行情報【公式】",
              },
              {
                url: "https://twitter.com/Smile_Eki_Chan",
                name: "すまいるえきちゃん♡JR四国【公式】",
              },
              {
                url: "https://twitter.com/jrs_matsuyama",
                name: "JR四国 松山駅 【公式】",
              },
              {
                url: "https://twitter.com/jrshikoku_kochi",
                name: "JR四国 高知駅【公式】",
              },
              {
                url: "https://twitter.com/jr_tokust",
                name: "JR四国 徳島駅【公式】",
              },
              {
                url: "https://twitter.com/jrshikoku_uwjm",
                name: "JR四国 宇和島駅【公式】",
              },
              {
                url: "https://twitter.com/JRshikoku_wkoch",
                name: "JR四国 ワープ高知支店【公式】",
              },
              {
                url: "https://twitter.com/jrshikoku_nihaw",
                name: "JR四国 ワープ新居浜営業所【公式】",
              },
              {
                url: "https://twitter.com/Yoakemonogatari",
                name: "志国土佐　時代の夜明けのものがたり【公式】",
              },
            ])}
          </View>
        </View>
        <Text style={{ fontWeight: "bold", fontSize: 20 }}>
          このアプリについて
        </Text>
        <Text>
          このアプリはXprocess(HARUKIN)が製作しているJR四国の完全非公式アシストアプリケーションです。このアプリに関することでのJR四国公式へ問合せすることはお控えください。以下のTwitterよりお願いします。
        </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>
        <TextBox
          backgroundColor="black"
          flex={1}
          onPressButton={() => navigate("setting")}
        >
          <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
            アプリの設定
          </Text>
          <Text style={{ color: "white", fontSize: 18 }}>
            アプリの設定画面を表示します。
          </Text>
        </TextBox>
        {/* 
        <SvgUri
          width="200"
          height="200"
          source={require("./assets/トレインビジョン関係/1.svg")}
        /> */}
      </ScrollView>
      <StationDeteilView
        StationBoardAcSR={StationBoardAcSR}
        currentStation={currentStation}
        originalStationList={originalStationList}
      />
      <JRSTraInfo
        JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
        getTime={getTime}
        loadingDelayData={loadingDelayData}
        setLoadingDelayData={setLoadingDelayData}
        delayData={delayData}
      />
    </View>
  );
}