import React, { useRef, useState, useEffect } from "react";
import Carousel from "react-native-reanimated-carousel";
import {
  Platform,
  View,
  ScrollView,
  Linking,
  Text,
  TouchableOpacity,
  LayoutAnimation,
  Dimensions,
} 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 { 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";
import { useStationList } from "./stateBox/useStationList";
import { StationNumber } from "./components/Menu/StationPagination";
import lineColorList from "./assets/originData/lineColorList";
import { AS } from "./storageControl";
import { SimpleDot } from "./components/Menu/SimpleDot";

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

  //位置情報
  const [locationStatus, setLocationStatus] = useState(null);
  useEffect(() => {
    if (Platform.OS == "web") return;
    Location.requestForegroundPermissionsAsync().then((data) => {
      setLocationStatus(
        Platform.OS == "ios"
          ? data.status == "granted"
          : data.android.accuracy == "fine"
      );
    });
  }, []);

  const getCurrentPosition = () => {
    if (!locationStatus) return () => {};
    Location.getCurrentPositionAsync({}).then((location) =>
      makeCurrentStation(location)
    );
  };
  const makeCurrentStation = (location) => {
    if (!originalStationList) return () => {};
    const findStationEachLine = (selectLine) => {
      const searchArea = 0.002;
      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 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, allStationData]);
  useEffect(() => {
    if (!carouselRef.current) return;
    carouselRef?.current.scrollTo({
      count: selectedCurrentStation - carouselRef.current.getCurrentIndex(),
      animated: true,
    });
  }, [selectedCurrentStation]);

  //全列車ダイヤリストを作成するuseEffect
  const [trainDiagram, setTrainDiagram] = useState(null); // 全列車のダイヤを列番ベースで整理
  useEffect(() => {
    //全列車リストを生成する副作用[無条件初回実行]
    setTrainDiagram(trainList);
  }, []);

  const oPSign = () => {
    const payload = {
      currentStation:
        originalStationList &&
        allStationData.length != 0 &&
        allStationData[selectedCurrentStation],
      navigate: navigate,
      goTo: "menu",
      useShow: () => SheetManager.show("StationDetailView", { payload }),
      onExit: () => SheetManager.hide("StationDetailView"),
    };
    SheetManager.show("StationDetailView", { payload });
  };

  const [dotButton, setDotButton] = useState(false);

  useEffect(() => {
    AS.getItem("CarouselSettings/activeDotSettings").then((data) => {
      setDotButton(data === "true");
    });
  }, []);
  const oLPSign = () => {
    LayoutAnimation.configureNext({
      duration: 600,
      update: { type: "spring", springDamping: 0.5 },
    });
    AS.setItem(
      "CarouselSettings/activeDotSettings",
      !dotButton ? "true" : "false"
    );
    setDotButton(!dotButton);
  };
  const width = Dimensions.get("window").width;
  return (
    <View
      style={{
        height: "100%",
        backgroundColor: "white",
        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
      }}
    >
      <StatusbarDetect />
      <TitleBar />
      <ScrollView>
        <TopMenuButton />
        {originalStationList.length != 0 && allStationData.length != 0 && (
          <View style={{ flex: 1, paddingTop: 10 }}>
            <Carousel
              ref={carouselRef}
              data={originalStationList && allStationData}
              height={(wp("80%") / 20) * 9 + 10}
              pagingEnabled={true}
              snapEnabled={true}
              loop={false}
              width={width}
              style={{ width: width, alignContent: "center" }}
              mode="parallax"
              modeConfig={{
                parallaxScrollingScale: 1,
                parallaxScrollingOffset: 100,
                parallaxAdjacentItemScale: 0.8,
              }}
              onSnapToItem={setSelectedCurrentStation}
              renderItem={({ item, index }) => {
                return (
                  <View
                    style={{
                      backgroundColor: "#0000",
                      width: width,
                      flexDirection: "row",
                      marginLeft: 0,
                      marginRight: 0,
                    }}
                    key={item[0].StationNumber}
                  >
                    <View style={{ flex: 1 }} />
                    <Sign
                      currentStation={item}
                      isCurrentStation={item == currentStation}
                      oP={oPSign}
                      oLP={oLPSign}
                    />
                    <View style={{ flex: 1 }} />
                  </View>
                );
              }}
            />
            <View
              style={{
                flexDirection: "row",
                justifyContent: "center",
                alignContent: "center",
                alignItems: "center",
              }}
            >
              {originalStationList &&
                allStationData.map((d, index) => {
                  const active = index == selectedCurrentStation;
                  const numberIndex = d[0].StationNumber;
                  if (dotButton) {
                    return (
                      <StationNumber
                        onPress={() => setSelectedCurrentStation(index)}
                        currentStation={d}
                        active={active}
                        index={numberIndex}
                      />
                    );
                  } else {
                    return (
                      <SimpleDot
                        onPress={() => setSelectedCurrentStation(index)}
                        active={active}
                        index={numberIndex}
                      />
                    );
                  }
                })}
            </View>
          </View>
        )}
        {allStationData.length != 0 &&
          originalStationList.length != 0 &&
          allStationData[selectedCurrentStation] && (
            <LED_vision
              station={
                originalStationList && allStationData[selectedCurrentStation]
              }
              trainDiagram={trainDiagram}
              getCurrentTrain={getCurrentTrain}
              navigate={navigate}
              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, delayData, 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, index, array) => {
              let data = d.split(" ");
              return (
                <View
                  style={{ flexDirection: "row" }}
                  key={data[1] + "key" + index}
                >
                  <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>
  );
};