import React, { useRef, useState, useEffect } from "react";
import Carousel from "react-native-snap-carousel";
import {
  Platform,
  View,
  ScrollView,
  Linking,
  Text,
  TouchableOpacity,
} from "react-native";
import Constants from "expo-constants";
import * as Location from "expo-location";
import StatusbarDetect from "./StatusbarDetect";
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
import { Ionicons } from "@expo/vector-icons";
import LottieView from "lottie-react-native";
import { parseAllTrainDiagram } from "./lib/parseAllTrainDiagram";
import trainList from "./assets/originData/trainList";

import LED_vision from "./components/発車時刻表/LED_vidion";
import Sign from "./components/駅名表/Sign";
import { TitleBar } from "./components/Menu/TitleBar";
import { FixedContentBottom } from "./components/Menu/FixedContentBottom";

import { UsefulBox } from "./components/atom/UsefulBox";
import { getStationList, lineList } from "./lib/getStationList";
import useInterval from "./lib/useInterval";
import { HeaderConfig } from "./lib/HeaderConfig";
import { useFavoriteStation } from "./stateBox/useFavoriteStation";
import { SheetManager } from "react-native-actions-sheet";
import { useTrainDelayData } from "./stateBox/useTrainDelayData";
import { useNavigation } from "@react-navigation/native";

export default function Menu({ getCurrentTrain }) {
  const { navigate } = useNavigation();
  const { favoriteStation } = useFavoriteStation();

  //位置情報
  const [locationStatus, setLocationStatus] = useState(null);
  useEffect(() => {
    Location.requestForegroundPermissionsAsync().then((data) => {
      setLocationStatus(data.status);
    });
  }, []);

  const getCurrentPosition = () => {
    if (locationStatus !== "granted") return () => {};
    Location.getCurrentPositionAsync({}).then((location) =>
      makeCurrentStation(location)
    );
  };
  const makeCurrentStation = (location) => {
    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;
    };

    let returnDataBase = lineList
      .map((d) => findStationEachLine(originalStationList[d]))
      .filter((d) => d.length > 0)
      .reduce((pre, current) => {
        pre.push(...current);
        return pre;
      }, []);
    if (returnDataBase.length) {
      let currentStation = currentStation == undefined ? [] : currentStation;
      if (currentStation.toString() != returnDataBase.toString()) {
        setCurrentStation(returnDataBase);
      }
    } else {
      setCurrentStation(undefined);
    }
  };

  useEffect(getCurrentPosition, [locationStatus]);
  useInterval(getCurrentPosition, 5000);

  const [currentStation, setCurrentStation] = useState(undefined); //第三要素

  const [originalStationList, setOriginalStationList] = useState([]); // 第一要素
  useEffect(() => getStationList().then(setOriginalStationList), []);

  const carouselRef = useRef();
  const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);

  const [allStationData, setAllStationData] = useState([]);
  useEffect(() => {
    setAllStationData(
      [currentStation, ...favoriteStation].filter((d) => d != undefined)
    );
  }, [currentStation, favoriteStation]);
  useEffect(() => {
    if (allStationData.length == 0) {
      setSelectedCurrentStation(0);
      return;
    }
    if (allStationData[selectedCurrentStation] == undefined) {
      const count = selectedCurrentStation - 1;
      setSelectedCurrentStation(count);
    }
  }, [selectedCurrentStation, currentStation, favoriteStation]);
  useEffect(() => {
    if (!carouselRef.current) return;
    if (carouselRef.current?._itemToSnapTo != selectedCurrentStation) {
      carouselRef.current.snapToItem(0);
      carouselRef.current.snapToItem(selectedCurrentStation);
    }
  }, [selectedCurrentStation]);

  //全列車ダイヤリストを作成するuseEffect
  const [trainDiagram, setTrainDiagram] = useState(null); // 全列車のダイヤを列番ベースで整理
  useEffect(() => {
    //全列車リストを生成する副作用[無条件初回実行]
    fetch(
      "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=traintimeinfo&arg3=dia",
      HeaderConfig
    )
      .then((response) => response.text())
      .then((d) => {
        if (d.indexOf("<title>404 Not Found</title>") != -1) throw Error;
        setTrainDiagram(parseAllTrainDiagram(d));
      })
      .catch(() => {
        console.log("fallback");
        setTrainDiagram(trainList);
      });
  }, []);
  return (
    <View
      style={{
        height: "100%",
        backgroundColor: "white",
        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
      }}
    >
      <StatusbarDetect />
      <TitleBar />
      <ScrollView>
        <TopMenuButton />
        {originalStationList.length != 0 && allStationData.length != 0 && (
          <Carousel
            ref={carouselRef}
            layout={"default"}
            data={originalStationList && allStationData}
            sliderWidth={wp("100%")}
            itemWidth={wp("80%")}
            enableMomentum
            callbackOffsetMargin={1000}
            activeAnimationOptions={0.3}
            onSnapToItem={(d) => {
              setSelectedCurrentStation(d);
            }}
            renderItem={({ item }) => {
              return (
                <View
                  style={{ marginVertical: 10 }}
                  key={item[0].StationNumber}
                >
                  <Sign
                    currentStation={item}
                    originalStationList={originalStationList}
                    oP={() => {
                      const payload = {
                        currentStation:
                          originalStationList &&
                          allStationData.length != 0 &&
                          allStationData[selectedCurrentStation],
                        originalStationList: originalStationList,
                        navigate: navigate,
                        goTo: "menu",
                        useShow: () =>
                          SheetManager.show("StationDetailView", {
                            payload,
                          }),
                        onExit: () => {
                          SheetManager.hide("StationDetailView");
                        },
                      };
                      SheetManager.show("StationDetailView", {
                        payload,
                      });
                    }}
                  />
                </View>
              );
            }}
          />
        )}
        {allStationData.length != 0 &&
          originalStationList.length != 0 &&
          allStationData[selectedCurrentStation] && (
            <LED_vision
              station={
                originalStationList && allStationData[selectedCurrentStation][0]
              }
              trainDiagram={trainDiagram}
              getCurrentTrain={getCurrentTrain}
              navigate={navigate}
              originalStationList={originalStationList}
              openStationACFromEachTrainInfo={() => {}}
            />
          )}
        <JRSTraInfoBox />
        <FixedContentBottom navigate={navigate} />
      </ScrollView>
    </View>
  );
}

const TopMenuButton = () => {
  const buttonList = [
    {
      backgroundColor: "#F89038",
      icon: "train-car",
      onPress: () =>
        Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
      title: "駅・鉄道情報",
    },
    {
      backgroundColor: "#EA4752",
      icon: "google-spreadsheet",
      onPress: () =>
        Linking.openURL(
          "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
        ),
      title: "運賃表",
    },
    {
      backgroundColor: "#91C31F",
      icon: "clipboard-list-outline",
      onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
      title: "予約",
    },
  ];
  return (
    <View style={{ flexDirection: "row" }}>
      {buttonList.map((d, index) => (
        <UsefulBox
          backgroundColor={d.backgroundColor}
          icon={d.icon}
          flex={1}
          onPressButton={d.onPress}
          key={index + d.icon}
        >
          {d.title}
        </UsefulBox>
      ))}
    </View>
  );
};

const JRSTraInfoBox = () => {
  const {
    getTime,
    setGetTime,
    delayData,
    setDelayData,
    loadingDelayData,
    setLoadingDelayData,
  } = useTrainDelayData();
  const styles = {
    touch: {
      backgroundColor: "#0099CC",
      borderRadius: 5,
      margin: 10,
      borderColor: "black",
      borderWidth: 2,
      overflow: "hidden",
    },
    scroll: {
      backgroundColor: "#0099CC",
      borderRadius: 5,
      maxHeight: 300,
    },
    bottom: {
      position: "absolute",
      top: 250,
      alignItems: "center",
      width: "100%",
      height: 50,
      backgroundColor: "#007FCC88",
    },
    box: {
      padding: 10,
      backgroundColor: "white",
      borderBottomLeftRadius: 5,
      borderBottomRightRadius: 5,
    },
  };
  return (
    <TouchableOpacity
      onPress={() => SheetManager.show("JRSTraInfo")}
      style={styles.touch}
    >
      <ScrollView scrollEnabled={false} style={styles.scroll}>
        <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={() => {
              setLoadingDelayData(true);
            }}
          />
        </View>
        <View style={styles.box}>
          {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" }} key={data[1] + "key"}>
                  <Text style={{ flex: 15, fontSize: 18 }}>
                    {data[0].replace("\n", "")}
                  </Text>
                  <Text style={{ flex: 5, fontSize: 18 }}>{data[1]}</Text>
                  <Text style={{ flex: 6, fontSize: 18 }}>{data[3]}</Text>
                </View>
              );
            })
          ) : (
            <Text>現在、5分以上の遅れはありません。</Text>
          )}
        </View>
      </ScrollView>
      <View style={styles.bottom}>
        <View style={{ flex: 1 }} />
        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
          詳細を見る
        </Text>
        <View style={{ flex: 1 }} />
      </View>
    </TouchableOpacity>
  );
};