import React, { useEffect, useState } from "react";
import { View, Linking } from "react-native";
import { FontAwesome, Foundation, Ionicons } from "@expo/vector-icons";
import ActionSheet from "react-native-actions-sheet";
import Sign from "../../components/駅名表/Sign";

import { TicketBox } from "../atom/TicketBox";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";

export const StationDeteilView = (props) => {
  const {
    StationBoardAcSR,
    currentStation,
    originalStationList,
    favoriteStation,
    setFavoriteStation,
    busAndTrainData,
  } = props;
  const [trainBus, setTrainBus] = useState();
  useEffect(() => {
    if (!currentStation) return () => {};
    const data = busAndTrainData.filter((d) => {
      return d.name === currentStation[0].Station_JP;
    });
    if (data.length == 0) {
      setTrainBus();
      return () => {};
    }
    setTrainBus(data[0]);
  }, [currentStation]);

  return (
    <ActionSheet
      ref={StationBoardAcSR}
      gestureEnabled
      CustomHeaderComponent={<></>}
    >
      <View
        key={currentStation}
        style={{
          backgroundColor: "white",
          borderRadius: 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}
                originalStationList={originalStationList}
                favoriteStation={favoriteStation}
                setFavoriteStation={setFavoriteStation}
                oP={() => Linking.openURL(currentStation[0].StationTimeTable)}
              />
            </View>
          )}
          {currentStation && (
            <View style={{ flexDirection: "row" }}>
              {!currentStation[0].JrHpUrl || (
                <TicketBox
                  backgroundColor={"#AD7FA8"}
                  icon={<Foundation name="web" color="white" size={50} />}
                  flex={1}
                  onPressButton={() =>
                    Linking.openURL(currentStation[0].JrHpUrl)
                  }
                >
                  web
                </TicketBox>
              )}
              {!currentStation[0].StationTimeTable || (
                <TicketBox
                  backgroundColor={"#8F5902"}
                  icon={<FontAwesome name="table" color="white" size={50} />}
                  flex={1}
                  onPressButton={() =>
                    Linking.openURL(currentStation[0].StationTimeTable)
                  }
                >
                  時刻表
                </TicketBox>
              )}
              {!currentStation[0].StationMap || (
                <TicketBox
                  backgroundColor={"#888A85"}
                  icon={<Ionicons name="map" color="white" size={50} />}
                  flex={1}
                  onPressButton={() =>
                    Linking.openURL(currentStation[0].StationMap)
                  }
                >
                  Map
                </TicketBox>
              )}
              {!trainBus || (
                <TicketBox
                  backgroundColor={"#CE5C00"}
                  icon={<Ionicons name="bus" color="white" size={50} />}
                  flex={1}
                  onPressButton={() => Linking.openURL(trainBus.address)}
                >
                  平行バス
                </TicketBox>
              )}
            </View>
          )}
        </View>
      </View>
    </ActionSheet>
  );
};