import { FC, 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;
};
type specialDataType = { address: string; text: string; description: string };

export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
  const [specialData, setSpecialData] = useState<specialDataType[]>([]);
  useLayoutEffect(() => {
    fetch("https://n8n.haruk.in/webhook/sptrainfo")
      .then((res) => res.json())
      .then((data) => setSpecialData(data.data))
      .catch((err) => console.log(err));
  }, []);

  const onPressItem: (d: specialDataType) => void = (d) => {
    navigate("howto", {
      info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address),
      goTo: "menu",
    });
    SheetManager.hide("SpecialTrainInfo");
  };
  
  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={() => onPressItem(d)}
            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>
  );
};
