import React, { useState, useEffect } from "react";
import { View } from "react-native";
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
import { useInterval } from "../../lib/useInterval";
import { objectIsEmpty } from "../../lib/objectIsEmpty";
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
import { useAreaInfo } from "../../stateBox/useAreaInfo";
import { AS } from "../../storageControl";
import { Footer } from "./LED_Vision_Component/Footer";
import { Header } from "./LED_Vision_Component/Header";
import { Description } from "./LED_inside_Component/Description";
import { EachData } from "./EachData";



/**
 *
 * 1-30M しおかぜ
 * 31-58D 南風
 * 1001-1030M いしづち(併結)
 * 1041-1046M いしづち(単独)
 * 1051-1082D 宇和海
 * 1091M MX松山
 * 1092M MX高松
 * 2001-2010D しまんと
 * 2071-2086D あしずり
 * 3001-3033D うずしお
 * 3101-3177M マリンライナー
 * 4001-4011D 剣山
 * 5006,13,22,29 うずしお(岡山直通南風併結)
 * 5831-5843D 土佐くろしお鉄道ごめん・なはり線直通快速
 * 5853-5892D 土佐くろしお鉄道ごめん・なはり線直通普通
 * 8011,8012D 四国まんなか千年ものがたり
 * 8031,(8041) サンライズ瀬戸, 琴平(延長)
 * 8053,8054D トキの夜明けのものがたり
 * 8176,8179D アンパントロッコタカマツ
 * 8277,8278D アンパントロッココトヒラ
 * 8451,8452D よしの川トロッコ
 * 8814,8819D しまんトロッコ
 * 8911-8914D 伊予灘ものがたり
 * 9001-9030* いしづち(リレー)
 * 9031M サンライズ瀬戸琴平(延長)(臨時？)
 * 9062D 四国まんなか千年ものがたり(臨時？)
 */
export default function LED_vision(props) {
  const {
    station,
    trainDiagram,
    getCurrentTrain,
    navigate,
    openStationACFromEachTrainInfo,
  } = props;
  const { currentTrain } = useCurrentTrain();
  const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
  const [finalSwitch, setFinalSwitch] = useState(false);
  const [trainIDSwitch, setTrainIDSwitch] = useState(false);
  const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
  const [isInfoArea, setIsInfoArea] = useState(false);
  const { areaInfo, areaStationID } = useAreaInfo();

  useEffect(() => {
    AS.getItem("LEDSettings/trainIDSwitch").then((data) => {
      setTrainIDSwitch(data === "true");
    });
    AS.getItem("LEDSettings/trainDescriptionSwitch").then((data) => {
      setTrainDescriptionSwitch(data == "true");
    });
    AS.getItem("LEDSettings/finalSwitch").then((data) => {
      setFinalSwitch(data == "true");
    });
  }, []);

  useEffect(() => {
    // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
    if (!trainDiagram) {
      setStationDiagram({});
      return;
    }
    let returnData = {};
    Object.keys(trainDiagram).forEach((key) => {
      if (trainDiagram[key].match(station[0].Station_JP + ",")) {
        returnData[key] = trainDiagram[key];
      }
    });
    setStationDiagram(returnData);
    setIsInfoArea(station.some((s) => areaStationID.includes(s.StationNumber)));
  }, [trainDiagram, station]);

  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);

  useEffect(() => {
    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
    if (objectIsEmpty(stationDiagram)) return () => {};
    const getTimeData = getTime(stationDiagram, station[0]);
    setTrainTimeAndNumber(getTimeData);
  }, [stationDiagram]);

  const [selectedTrain, setSelectedTrain] = useState([]);
  useEffect(() => {
    if (!trainTimeAndNumber) return () => {};
    if (!currentTrain) return () => {};
    const data = trainTimeAndNumber
      .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
      .filter(timeFiltering)
      .filter((d) => !!finalSwitch || d.lastStation != "当駅止");
    setSelectedTrain(data);
  }, [trainTimeAndNumber, currentTrain, finalSwitch]);

  const getTime = (stationDiagram, station) => {
    const returnData = Object.keys(stationDiagram).map((trainNum) => {
      let trainData = {};
      stationDiagram[trainNum].split("#").forEach((data) => {
        if (data.match("着")) {
          trainData.lastStation = data.split(",着,")[0];
        }
        if (data.split(",")[0] === station.Station_JP) {
          if (data.match(",発,")) {
            trainData.time = data.split(",発,")[1];
          } else {
            trainData.time = data.split(",着,")[1];
            trainData.lastStation = "当駅止";
          }
        }
      });
      return {
        train: trainNum,
        time: trainData.time,
        lastStation: trainData.lastStation,
      };
    });
    return returnData.sort((a, b) => {
      switch (true) {
        case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]):
          return -1;
        case parseInt(a.time.split(":")[0]) > parseInt(b.time.split(":")[0]):
          return 1;
        case parseInt(a.time.split(":")[1]) < parseInt(b.time.split(":")[1]):
          return -1;
        case parseInt(a.time.split(":")[1]) > parseInt(b.time.split(":")[1]):
          return 1;
      }
    });
  };

  const timeFiltering = (d) => {
    const date = new Date();
    const newDate = new Date();
    let data = d.time.split(":");
    let delay = isNaN(currentTrain.filter((t) => t.num == d.train)[0].delay)
      ? 0
      : currentTrain.filter((t) => t.num == d.train)[0].delay;

    date.setHours(parseInt(data[0]));
    date.setMinutes(parseInt(data[1]) + parseInt(delay));
    return !(newDate > date);
  };

  const [areaString, setAreaString] = useState("");
  const [areaStringLength, setAreaStringLength] = useState(0);
  const [move, setMove] = useState(0);
  useInterval(
    () => {
      if (areaInfo != "") {
        setMove(areaStringLength < move ? 0 : move + 1);
      }
    },
    350,
    true
  );
  useEffect(() => {
    if (!areaInfo) {
      setAreaString("");
      return () => {};
    }
    setAreaString(
      areaInfo.substring(move, areaInfo.length) + areaInfo.substring(0, move)
    );
  }, [move]);

  useEffect(() => {
    if (!areaInfo) {
      setAreaStringLength(0);
      return () => {};
    }
    setAreaStringLength(areaInfo.length);
  }, [areaInfo]);

  return (
    <View
      style={{
        width: wp("98%"),
        /*  height: wp("98%")/10*9, */ backgroundColor: "#432",
        borderWidth: 1,
        margin: 10,
        marginHorizontal: wp("1%"),
      }}
    >
      <Header getCurrentTrain={getCurrentTrain} />
      {selectedTrain.map((d) => (
        <EachData
          {...{
            d,
            trainIDSwitch,
            trainDescriptionSwitch,
            navigate,
            openStationACFromEachTrainInfo,
          }}
          station={station[0]}
          key={d.train}
        />
      ))}
      {areaString != "" && isInfoArea && (
        <Description
          numberOfLines={1}
          info={areaString.replaceAll("\n", "").replaceAll("\r", "")}
          onClick={() => alert(areaInfo)}
        />
      )}

      <Footer
        {...{
          trainIDSwitch,
          setTrainIDSwitch,
          trainDescriptionSwitch,
          setTrainDescriptionSwitch,
          finalSwitch,
          setFinalSwitch,
        }}
      />
    </View>
  );
}
