import React, { FC, useEffect } from "react";
import { Platform, Text } from "react-native";
import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
type Props = {
  currentStation: any[];
  isMatsuyama: boolean;
};
export const AddressText: FC<Props> = (props) => {
  const { currentStation, isMatsuyama } = props;
  const {lodAddMigration} = useFavoriteStation();
  const [stationAddress, setStationAddress] = React.useState("");
  useEffect(() => {
    if (!!currentStation[0].jslodApi) {
      fetch(`${currentStation[0].jslodApi}.json`)
        .then((response) => response.json())
        .then((data) => {
          const c =
            data[currentStation[0].jslodApi][
              "http://dbpedia.org/ontology/address"
            ][0]["value"];
          setStationAddress(c);
        });
    }else{
      lodAddMigration();
    }
  }, [currentStation]);
  return (
    <Text
      style={{
        fontSize: parseInt("10%"),
        color: isMatsuyama ? "white" : "#005170",
        position: "absolute",
        bottom: isMatsuyama ? Platform.OS === "ios"?"25.5%":"26.5%" : "0%",
        textAlign: "center",
        width: "100%",
        fontWeight: "bold",
      }}
    >
      {stationAddress}
    </Text>
  );
};
