import React, { CSSProperties, FC, useEffect, useMemo, useState } from "react";
import { Text, View, LayoutAnimation, TextStyle } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { SheetManager } from "react-native-actions-sheet";
import { getType } from "../../../lib/eachTrainInfoCoreLib/getType";
import { migrateTrainName } from "../../../lib/eachTrainInfoCoreLib/migrateTrainName";
import { TrainIconStatus } from "./trainIconStatus";
import { TrainViewIcon } from "./trainViewIcon";

type Props = {
  data: { trainNum: string; limited: string };
  trainData: string[];
  showHeadStation: number[];
  showTailStation: number[];
  headStation: { id: string }[];
  tailStation: { id: string }[];
  navigate: any;
  from: string;
};

const textConfig: TextStyle = {
  fontSize: 20,
  fontWeight: "bold",
  color: "white",
};

export const HeaderText: FC<Props> = ({
  data,
  trainData,
  showHeadStation,
  showTailStation,
  headStation,
  tailStation,
  navigate,
  from,
}) => {
  const trainName = useMemo(() => {
    if (!data.limited) return "";
    const limitedArray = data.limited.split(":");
    const type = getType(limitedArray[0]);

    switch (true) {
      case !!limitedArray[1]:
        // 特急の場合は、列車名を取得
        return type + migrateTrainName(limitedArray[1]);
      case trainData.length == 0:
        // 特急以外の場合は、列車番号を取得
        return type;
      default:
        // 行先がある場合は、行先を取得
        return (
          type +
          migrateTrainName(
            trainData[trainData.length - 1].split(",")[0] + "行き"
          )
        );
    }
  }, [data.limited, trainData]);
  return (
    <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
      <TrainIconStatus {...{ data, navigate, from }}/>
      <Text style={textConfig}>{trainName}</Text>
      <View style={{ flex: 1 }} />
      <Text style={textConfig}>
        {showHeadStation.map((d) => `${headStation[d].id} + `)}
        {data.trainNum}
        {showTailStation.map((d) => ` + ${tailStation[d].id}`)}
      </Text>

      <TrainViewIcon {...{ data, navigate, from }} />
    </View>
  );
};