import { FC, useEffect, useLayoutEffect, useState } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { getPDFViewURL } from "@/lib/getPdfViewURL";
import { ScrollView, SheetManager } from "react-native-actions-sheet";

type props = {
  navigate: (screen: string, params?: object) => void;
};
export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
  const [specialData, setSpecialData] = useState([]);
  useLayoutEffect(() => {
    fetch("https://n8n.haruk.in/webhook/sptrainfo")
      .then((res) => res.json())
      .then((data) => setSpecialData(data.data))
      .catch((err) => console.log(err));
  }, []);
  return (
    <View
      style={{
        backgroundColor: "#0099CC",
      }}
    >
      <View style={{ flexDirection: "row", alignItems: "center" }}>
        <Text
          style={{
            fontSize: 30,
            fontWeight: "bold",
            color: "white",
            paddingHorizontal: 10,
            paddingVertical: 5,
          }}
        >
          臨時列車情報
        </Text>
      </View>
      <ScrollView
        style={{
          backgroundColor: "white",
        }}
      >
        {specialData.map((d) => (
          <TouchableOpacity
            onPress={() => {
              navigate("howto", {
                info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address),
                goTo: "menu",
              });
              SheetManager.hide("SpecialTrainInfo");
            }}
            onLongPress={() => alert(d.description)}
            key={d.address}
            style={{
              padding: 10,
              borderBottomWidth: 1,
              borderBottomColor: "#ccc",
              flexDirection: "row",
              alignItems: "center",
            }}
          >
            <Text style={{ color: "black", fontSize: 20 }}>{d.text}</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
};