import { FC, useEffect, useState } from "react";
import {
  View,
  Text,
  ScrollView,
  TextInput,
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  TouchableOpacity,
} 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";
import { Switch } from "react-native-elements";
import { customTrainDataDetector } from "../custom-train-data";
import { typeID } from "@/lib/getStringConfig";

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 { keyList, allTrainDiagram, allCustomTrainData } = useAllTrainDiagram();

  const { navigate, addListener, goBack, canGoBack } = useNavigation();
  const [keyBoardVisible, setKeyBoardVisible] = useState(false);
  const [input, setInput] = useState("");
  const [selectedTypeList, setSelectedTypeList] = useState<typeID[]>([]);
  type hoge = {
    trainNumber: string;
    array: string;
    name: string;
    timeType: string;
    time: string;
  }[];
  const [showLastStop, setShowLastStop] = useState(false);
  const [isSpecial, setIsSpecial] = useState(false);
  const [threw, setIsThrew] = useState(false);
  const [isOutOfService, setIsOutOfService] = useState(false);
  const [currentStationDiagram, setCurrentStationDiagram] = useState<hoge>([]);
  useEffect(() => {
    if (allTrainDiagram && currentStation.length > 0) {
      const stationName = currentStation[0].Station_JP;
      let returnDataArray: hoge = [];
      keyList
        .filter((s) => {
          const boolData = allTrainDiagram[s];
          let isStop = false;
          let isInput = false;

          boolData.split("#").forEach((d) => {
            const [station, type, time] = d.split(",");
            if (station === stationName) isStop = true;
            if (station === input && type && !type.includes("通"))
              isInput = true;
          });
          if (input && input.length > 0) {
            return isInput && isStop;
          }
          return isStop;
        })
        .forEach((d) => {
          allTrainDiagram[d]
            .split("#")
            .filter((d) => {
              const [station, type, time] = d.split(",");
              return station === stationName;
            })
            .forEach((x) => {
              const [name, timeType, time] = x.split(",");
              if (!name || !timeType || !time) return;

              const { img, trainName, type, trainNumDistance, infogram } =
                customTrainDataDetector(d, allCustomTrainData);
              const arrayData = {
                trainNumber: d,
                array: allTrainDiagram[d],
                name,
                timeType,
                time,
              };
              // //条件によってフィルタリング
              if (
                selectedTypeList.length > 0 &&
                selectedTypeList.findIndex((item) => item === type) !== -1
              )
                return;
              if (!threw && timeType && timeType.includes("通")) return;
              if (!isOutOfService && !!d.match(/[A,B,R,H,E,T,L]/)) return;
              if (!isSpecial && !!d.match(/9\d\d\d[D,M,S]/)) return;
              if (!showLastStop && timeType && timeType.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, showLastStop, isSpecial, isOutOfService, threw, input]);

  useEffect(() => {
    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
      setKeyBoardVisible(true);
    });
    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
      setKeyBoardVisible(false);
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);
  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> */}
      <KeyboardAvoidingView
        behavior="padding"
        keyboardVerticalOffset={80}
        enabled={Platform.OS === "ios"}
      >
        <ScrollView horizontal style={{ height: 35, flexDirection: "row" }}>
          <TouchableOpacity
            style={{
              alignItems: "center",
              marginHorizontal: 5,
              backgroundColor: threw ? "white" : "#ffffff00",
              alignSelf: "center",
              borderColor: "white",
              borderWidth: 1,
              borderRadius: 100,
            }}
            onPress={() => {
              setIsThrew(!threw);
            }}
          >
            <Text
              style={{
                color: threw ? "#0099CC" : "white",
                fontSize: 14,
                margin: 5,
              }}
            >
              通過
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              alignItems: "center",
              marginHorizontal: 5,
              backgroundColor: showLastStop ? "white" : "#ffffff00",
              alignSelf: "center",
              borderColor: "white",
              borderWidth: 1,
              borderRadius: 100,
            }}
            onPress={() => {
              setShowLastStop(!showLastStop);
            }}
          >
            <Text
              style={{
                color: showLastStop ? "#0099CC" : "white",
                fontSize: 14,
                margin: 5,
              }}
            >
              当駅止
            </Text>
          </TouchableOpacity>
          <Switch
            value={isSpecial}
            onValueChange={setIsSpecial}
            color="red"
            style={{ marginVertical: 5 }}
          />
          <Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>
            臨時
          </Text>
          <Switch
            value={isOutOfService}
            onValueChange={setIsOutOfService}
            color="red"
            style={{ marginVertical: 5 }}
          />
          <Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>
            回送
          </Text>
        </ScrollView>
        <View
          style={{
            height: 35,
            margin: 5,
            alignItems: "center",
            backgroundColor: "#F4F4F4",
            flexDirection: "row",
            paddingLeft: 10,
            paddingRight: 10,
            borderRadius: 25,
            borderColor: "#F4F4F4",
          }}
        >
          <TextInput
            placeholder="列番・列車名を入力してフィルタリングします。"
            onFocus={() => setKeyBoardVisible(true)}
            onEndEditing={() => {}}
            onChange={(ret) => setInput(ret.nativeEvent.text)}
            value={input}
            style={{ flex: 1 }}
          />
        </View>
      </KeyboardAvoidingView>
      {keyBoardVisible || (
        <BigButton onPress={() => goBack()} string="閉じる" />
      )}
    </View>
  );
};