import React, { FC, useEffect, useState } from "react";
import { Ionicons } from "@expo/vector-icons";
import { LayoutAnimation } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { getType } from "../../../lib/eachTrainInfoCoreLib/getType";

type Props = {
  data: { trainNum: string; limited: string };
  navigate: any;
  from: string;
};
export const TrainViewIcon: FC<Props> = ({ data, navigate, from }) => {
  const [isTrainView, setIsTrainView] = useState(false);
  //トレインビュー表示対象(特急、マリン)かを判定
  useEffect(() => {
    if (!data.limited) return () => {};
    setIsTrainView(
      getType(data.limited.split(":")[0]) &&
        !data.limited.split(":")[1].match("サンポート")
    );
  }, [data.limited]);
  const onPressTrainView = () => {
    LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
    navigate("trainbase", {
      info: "train.html?tn=" + data.trainNum,
      from,
    });
    SheetManager.hide("EachTrainInfo");
  };
  return isTrainView ? (
    <Ionicons
      name="subway"
      color="white"
      size={30}
      style={{ margin: 5 }}
      onPress={onPressTrainView}
    />
  ) : (
    <></>
  );
};