import { FC, useEffect, useState } from "react";
import { View, Text, ScrollView } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { BigButton } from "../atom/BigButton";
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
import { ListView } from "@/components/StationDiagram/ListView";
import dayjs from "dayjs";
import { ExGridView } from "./ExGridView";

type props = {
  route: {
    params: {
      currentStation: {
        Station_JP: string;
        Station_EN: string;
        StationName?: string;
        MyStation?: string;
        StationNumber: string;
        DispNum?: string;
        StationTimeTable: string;
        StationMap?: string;
        JrHpUrl?: string;
        lat: number;
        lng: number;
        jslodApi: string;
      }[];
    };
  };
};
export const StationDiagramView: FC<props> = ({ route }) => {
  if (!route.params) {
    return null;
  }
  const { currentStation } = route.params;
  // 必要な情報：駅情報、全ダイヤ、カスタム列車情報
  // 表示モード：縦並びリスト、横並びグリッド(時刻分割)、横並び単純左詰め
  // フィルタリング：終点路線、種別、行先、関係停車駅

  const { allTrainDiagram } = useAllTrainDiagram();

  const { navigate, addListener, goBack, canGoBack } = useNavigation();
  type hoge = {
    trainNumber: string;
    array: string;
    name: string;
    type: string;
    time: string;
  }[];
  const [currentStationDiagram, setCurrentStationDiagram] = useState<hoge>([]);
  useEffect(() => {
    if (allTrainDiagram && currentStation.length > 0) {
      const stationName = currentStation[0].Station_JP;
      let returnDataArray = [];
      Object.keys(allTrainDiagram).forEach((d) => {
          allTrainDiagram[d]
            .split("#")
            .filter((d) => {
              const [station,type,time] = d.split(",");
              return station === stationName;
            })
            .forEach((x) => {
              const [name, type, time] = x.split(",");
              if (!name || !type || !time) return;
              const arrayData = {
                trainNumber: d,
                array: allTrainDiagram[d],
                name,
                type,
                time,
              };
              // //条件によってフィルタリング
              // if(type && type.includes("通")) return;
              // if(type && type.includes("着")) return;
              returnDataArray.push(arrayData);
            });
      });
      setCurrentStationDiagram(
        returnDataArray.sort((a, b) => {
          const adjustTime = (t: string) => {
            const [h, m] = t.split(":").map(Number);
            // 4時未満は翌日の時刻とみなして+24時間
            return h < 4
              ? dayjs().add(1, "day").hour(h).minute(m)
              : dayjs().hour(h).minute(m);
          };
          const aa = adjustTime(a.time);
          const bb = adjustTime(b.time);
          const x = aa.isAfter(bb);
          return x ? 1 : -1;
          //return true;
        })
      );
    }
  }, [currentStation]);
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <Text
        style={{
          textAlign: "center",
          fontSize: 20,
          color: "white",
          fontWeight: "bold",
          paddingVertical: 10,
        }}
      >
        {currentStation[0].Station_JP}駅 時刻表
      </Text>
        {/* <ListView data={currentStationDiagram} /> */}
        <ExGridView data={currentStationDiagram} />
      {/* <Text
        style={{
          backgroundColor: "white",
          borderWidth: 1,
          borderStyle: "solid",
        }}
      >
        お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
      </Text> */}
      <BigButton onPress={() => goBack()} string="閉じる" />
    </View>
  );
};