import { FC, useEffect, useState } from "react";
import {
  View,
  Text,
  ScrollView,
  TextInput,
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  TouchableOpacity,
  LayoutAnimation,
} 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 { getTrainType } from "@/lib/getTrainType";
import { trainTypeID } from "@/lib/CommonTypes";
import { SearchInputSuggestBox } from "./SearchBox/SearchInputSuggestBox";

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 [displayMode, setDisplayMode] = useState<"list" | "grid">("list");
  const [selectedTypeList, setSelectedTypeList] = useState<trainTypeID[]>([
    "Normal",
    "OneMan",
    "Rapid",
    "OneManRapid",
    "LTDEXP",
    "NightLTDEXP",
  ]);
  type hoge = {
    trainNumber: string;
    array: string;
    name: string;
    timeType: string;
    time: string;
  }[];
  const [showTypeFiltering, setShowTypeFiltering] = useState(false);
  const [showLastStop, setShowLastStop] = useState(false);
  const [threw, setIsThrew] = 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 isStopPos = -1;
          let isInput = false;
          let isInputPos = -1;

          boolData.split("#").forEach((d, index, array) => {
            const [station, type, time] = d.split(",");
            if (station === stationName) {
              isStop = true;
              isStopPos = index;
            }
            if (station === input && type && !type.includes("通")) {
              isInput = true;
              isInputPos = index;
            }
          });
          if (input && input.length > 0) {
            if (isInput && isStop) {
              return isInputPos > isStopPos;
            }
            return false;
          }
          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 (!threw && timeType && timeType.includes("通")) return;
              if (!showLastStop && timeType && timeType.includes("着")) return;
              if (
                selectedTypeList.findIndex((item) => item === "SPCL") === -1
              ) {
                if (d.match(/9\d\d\d[D,M,S]/)) return;
              }
              if (
                selectedTypeList.length > 0 &&
                selectedTypeList.findIndex((item) => item === type) === -1
              ) {
                if (
                  selectedTypeList.findIndex(
                    (item) => item === "Forwarding"
                  ) !== -1
                ) {
                  if (!d.match(/[A,B,R,H,E,T,L]/)) return;
                } else if (
                  selectedTypeList.findIndex((item) => item === "SPCL") !== -1
                ) {
                  if (!d.match(/9\d\d\d[D,M,S]/)) return;
                } else {
                  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, threw, input, selectedTypeList]);

  useEffect(() => {
    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
      LayoutAnimation.configureNext({
        duration: 600,
        update: { type: "spring", springDamping: 0.6 },
      });
      setKeyBoardVisible(true);
    });
    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
      LayoutAnimation.configureNext({
        duration: 600,
        update: { type: "spring", springDamping: 0.6 },
      });
      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>
      {displayMode === "list" ? (
        <ListView data={currentStationDiagram} />
      ) : (
        <ExGridView data={currentStationDiagram} />
      )}
      {/* <Text
        style={{
          backgroundColor: "white",
          borderWidth: 1,
          borderStyle: "solid",
        }}
      >
        お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
      </Text> */}
      <KeyboardAvoidingView
        behavior="padding"
        keyboardVerticalOffset={80}
        enabled={Platform.OS === "ios"}
      >
        {!keyBoardVisible ? (
          <ScrollView
            horizontal
            style={{
              height: 35,
              flexDirection: "row",
              display: "flex",
            }}
          >
            <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>
            <View
              style={{
                height: "auto",
                borderLeftWidth: 1,
                margin: 5,
                borderColor: "white",
              }}
            />
            {showTypeFiltering ? (
              <>
                <TypeSelectorBox
                  selectedTypeList={selectedTypeList}
                  setSelectedTypeList={setSelectedTypeList}
                  typeID="Normal"
                  relativeID={["OneMan"]}
                />
                <TypeSelectorBox
                  selectedTypeList={selectedTypeList}
                  setSelectedTypeList={setSelectedTypeList}
                  typeID="Rapid"
                  relativeID={["OneManRapid"]}
                />
                <TypeSelectorBox
                  selectedTypeList={selectedTypeList}
                  setSelectedTypeList={setSelectedTypeList}
                  typeID="LTDEXP"
                  relativeID={["NightLTDEXP"]}
                />
                <TypeSelectorBox
                  selectedTypeList={selectedTypeList}
                  setSelectedTypeList={setSelectedTypeList}
                  typeID="SPCL"
                  relativeID={[
                    "SPCL_Normal",
                    "SPCL_Rapid",
                    "SPCL_EXP",
                    "Party",
                  ]}
                />
                <TypeSelectorBox
                  selectedTypeList={selectedTypeList}
                  setSelectedTypeList={setSelectedTypeList}
                  typeID="Freight"
                />
                <TypeSelectorBox
                  selectedTypeList={selectedTypeList}
                  setSelectedTypeList={setSelectedTypeList}
                  typeID="Forwarding"
                  relativeID={["FreightForwarding"]}
                />
                <TouchableOpacity
                  style={{
                    alignItems: "center",
                    marginHorizontal: 5,
                    backgroundColor: "#ffffff00",
                    alignSelf: "center",
                    borderColor: "white",
                    borderWidth: 1,
                    borderRadius: 100,
                  }}
                  onPress={() => {
                    LayoutAnimation.configureNext(
                      LayoutAnimation.Presets.easeInEaseOut
                    );
                    setShowTypeFiltering(false);
                  }}
                >
                  <Text
                    style={{
                      color: "white",
                      fontSize: 14,
                      margin: 5,
                    }}
                  >
                    ＜
                  </Text>
                </TouchableOpacity>
              </>
            ) : (
              <TouchableOpacity
                style={{
                  alignItems: "center",
                  marginHorizontal: 5,
                  backgroundColor: "#ffffff00",
                  alignSelf: "center",
                  borderColor: "white",
                  borderWidth: 1,
                  borderRadius: 100,
                }}
                onPress={() => {
                  LayoutAnimation.configureNext(
                    LayoutAnimation.Presets.easeInEaseOut
                  );
                  setShowTypeFiltering(true);
                }}
              >
                <Text
                  style={{
                    color: "white",
                    fontSize: 14,
                    margin: 5,
                  }}
                >
                  ＞
                </Text>
              </TouchableOpacity>
            )}

            <TouchableOpacity
              style={{
                alignItems: "center",
                marginHorizontal: 5,
                backgroundColor: "#ffffff00",
                alignSelf: "center",
                borderColor: "white",
                borderWidth: 1,
                borderRadius: 100,
              }}
              onPress={() => {
                setDisplayMode(displayMode === "list" ? "grid" : "list");
              }}
            >
              <Text
                style={{
                  color: "white",
                  fontSize: 14,
                  margin: 5,
                }}
              >
                {displayMode === "list" ? "横並びモード" : "リストモード"}
              </Text>
            </TouchableOpacity>
          </ScrollView>
        ) : (
          <View style={{ position: "relative", display: "flex" }}>
            <SearchInputSuggestBox
              input={input}
              setInput={setInput}
              currentStationDiagram={currentStationDiagram}
            />
          </View>
        )}
        <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>
  );
};

export const TypeSelectorBox: FC<{
  selectedTypeList: trainTypeID[];
  setSelectedTypeList: (list: trainTypeID[]) => void;
  typeID: trainTypeID;
  relativeID?: trainTypeID[];
}> = (props) => {
  const { selectedTypeList, setSelectedTypeList, typeID, relativeID } = props;
  const isSelected =
    selectedTypeList.findIndex((item) => item === typeID) !== -1;
  const { color, shortName } = getTrainType({ type: typeID, whiteMode: true });
  return (
    <TouchableOpacity
      style={{
        alignItems: "center",
        marginHorizontal: 5,
        opacity: isSelected ? 1 : 0.8,
        backgroundColor: isSelected ? "white" : color,
        alignSelf: "center",
        borderColor: color,
        borderWidth: 1,
        borderRadius: 100,
      }}
      onPress={() => {
        if (selectedTypeList.findIndex((item) => item === typeID) === -1) {
          setSelectedTypeList([
            ...selectedTypeList,
            typeID,
            ...(relativeID ?? []),
          ]);
        } else {
          setSelectedTypeList(
            selectedTypeList.filter(
              (item) => item !== typeID && !relativeID?.includes(item)
            )
          );
        }
      }}
    >
      <Text
        style={{
          color: isSelected ? color : "white",
          fontSize: 14,
          margin: 5,
        }}
      >
        {shortName}
      </Text>
    </TouchableOpacity>
  );
};
