import React, { useState, useEffect } from "react";
import {
  View,
  Linking,
  Text,
  TouchableOpacity,
  BackHandler,
  Platform,
} from "react-native";
import AutoHeightImage from "react-native-auto-height-image";
import { FontAwesome, Foundation, Ionicons } from "@expo/vector-icons";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import ActionSheet, { SheetManager } from "react-native-actions-sheet";
import Sign from "../../components/駅名表/Sign";

import { TicketBox } from "../atom/TicketBox";
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
import { getPDFViewURL } from "../../lib/getPdfViewURL";
import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
import { AS } from "../../storageControl";
import { StationMapButton } from "./StationDeteilView/StationMapButton";
import { TrainBusButton } from "./StationDeteilView/TrainBusButton";
import { 駅構内図 } from "./StationDeteilView/StationInsideMapButton";
import { WebSiteButton } from "./StationDeteilView/WebSiteButton";
import { StationTimeTableButton } from "./StationDeteilView/StationTimeTableButton";

export const StationDeteilView = (props) => {
  if (!props.payload) return <></>;
  const { currentStation, navigate, onExit, goTo, useShow } = props.payload;
  const { busAndTrainData } = useBusAndTrainData();
  const [trainBus, setTrainBus] = useState();

  useEffect(() => {
    if (!currentStation) return () => {};
    const data = busAndTrainData.filter((d) => 
      d.name === currentStation[0].Station_JP
    );
    if (data.length == 0) {
      setTrainBus();
    }
    setTrainBus(data[0]);
  }, [currentStation]);

  const [usePDFView, setUsePDFView] = useState(undefined);
  useEffect(() => {
    AS.getItem("usePDFView").then(setUsePDFView);
  }, []);
  const info =
    currentStation &&
    (currentStation[0].StationTimeTable.match(".pdf")
      ? getPDFViewURL(currentStation[0].StationTimeTable)
      : currentStation[0].StationTimeTable);
  const insets = useSafeAreaInsets();
  return (
    <ActionSheet
      gestureEnabled
      CustomHeaderComponent={<></>}
      isModal={Platform.OS == "ios"}
      containerStyle={
        Platform.OS == "android"
          ? {
              paddingBottom: insets.bottom,
            }
          : {}
      }
      useBottomSafeAreaPadding={Platform.OS == "android"}
    >
      <Handler />
      <View
        key={currentStation}
        style={{
          backgroundColor: "white",
          borderTopRadius: 5,
          borderColor: "dark",
          borderWidth: 1,
        }}
      >
        <View style={{ height: 26, width: "100%" }}>
          <View
            style={{
              height: 6,
              width: 45,
              borderRadius: 100,
              backgroundColor: "#f0f0f0",
              marginVertical: 10,
              alignSelf: "center",
            }}
          />
        </View>
        <View>
          {currentStation && (
            <View style={{ margin: 10, marginHorizontal: wp("10%") }}>
              <Sign
                currentStation={currentStation}
                oP={() => {
                  usePDFView == "true"
                    ? Linking.openURL(currentStation[0].StationTimeTable)
                    : navigate("howto", {
                        info,
                        goTo,
                        useShow,
                      });
                  onExit();
                }}
                oLP={() => Linking.openURL(currentStation[0].StationTimeTable)}
              />
            </View>
          )}
          {currentStation &&
            currentStation[0].JrHpUrl &&
            currentStation[0].StationNumber != "M12" && (
              <駅構内図 //児島例外/
                navigate={navigate}
                goTo={goTo}
                useShow={useShow}
                address={currentStation[0].JrHpUrl}
                onExit={onExit}
              />
            )}
          {currentStation && (
            <View style={{ flexDirection: "row" }}>
              {!currentStation[0].JrHpUrl || (
                <WebSiteButton
                  navigate={navigate}
                  info={currentStation[0].JrHpUrl}
                  goTo={goTo}
                  useShow={useShow}
                  onExit={onExit}
                />
              )}
              {!currentStation[0].StationTimeTable || (
                <StationTimeTableButton
                  info={info}
                  address={currentStation[0].StationTimeTable}
                  usePDFView={usePDFView}
                  navigate={navigate}
                  onExit={onExit}
                  goTo={goTo}
                  useShow={useShow}
                />
              )}
              {!currentStation[0].StationMap || (
                <StationMapButton stationMap={currentStation[0].StationMap} />
              )}
              {!trainBus || (
                <TrainBusButton
                  address={trainBus.address}
                  press={() => {
                    navigate("howto", {
                      info: trainBus.address,
                      goTo,
                      useShow,
                    });
                    onExit();
                  }}
                />
              )}
            </View>
          )}
        </View>
      </View>
    </ActionSheet>
  );
};

const Handler = () => {
  useEffect(() => {
    const backAction = () => {
      SheetManager.hide("StationDetailView");
      return true;
    };
    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );
    return () => backHandler.remove();
  }, []);
  return <></>;
};