import React from "react";
import { View, Text, LayoutAnimation, TouchableOpacity } from "react-native";

export const ScrollStickyContent = (props) => {
  const { currentTrainData, showThrew, setShowThrew, haveThrough } = props;
  return (
    <View
      style={{
        alignItems: "center",
        backgroundColor: "white",
        flexDirection: "row",
      }}
    >
      <View
        style={{
          padding: 8,
          flexDirection: "row",
          borderBottomWidth: 1,
          borderBottomColor: "#f0f0f0",
          flex: 1,
        }}
      >
        <Text style={{ fontSize: 20 }}>停車駅</Text>
        <View style={{ flex: 1 }} />
        <View style={{ flexDirection: "row" }}>
          {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
            <Text
              style={{
                fontSize: 15,
                color: "black",
                position: "absolute",
                right: 110,
                textAlign: "right",
                textDecorationLine: "line-through",
              }}
            >
              (定刻)
            </Text>
          )}
          <Text
            style={{
              fontSize: 20,
              color: isNaN(currentTrainData?.delay)
                ? "black"
                : currentTrainData?.delay == 0
                ? "black"
                : "red",
              width: 60,
            }}
          >
            見込
          </Text>
          <TouchableOpacity
            onPress={() => {
              if (!haveThrough) return;
              LayoutAnimation.configureNext({
                duration: 200,
                update: { type: "easeInEaseOut", springDamping: 0.6 },
              });
              setShowThrew(!showThrew);
            }}
          >
            <View style={{ flex: 1 }} />
            <Text
              style={{
                fontSize: 12,
                width: 50,
                paddingBottom: 0,
                margin: "auto",
                textAlign: "center",
                textAlignVertical: "center",
                opacity: haveThrough ? 1 : 0,
              }}
            >
              (通過{showThrew ? "▼" : "▶"})
            </Text>
            <View style={{ flex: 1 }} />
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};