import React, { FC, useEffect } from "react";
import { Text, TextStyle, View, TouchableOpacity } from "react-native";
import { useStationList } from "../../../stateBox/useStationList";
import {
  trainDataType,
  trainPosition,
} from "../../../lib/trainPositionTextArray";
import { lineList } from "../../../lib/getStationList";
import { getStationID } from "../../../lib/eachTrainInfoCoreLib/getStationData";
import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";

const descriptionStyle: TextStyle = {
  fontSize: parseInt("16%"),
  fontWeight: "bold",
};

type Props = {
  numberOfLines?: number;
  trainIDSwitch: boolean;
  currentTrainData: trainDataType;
  setStationInput: (station: string) => void;
  setStationNumberInput: (station: string) => void;
  setDescInput: (desc: string) => void;
  setPosInput: (pos: string) => void;
  setDialog: (dialog: boolean) => void;
  setDeleteDialog: (dialog: boolean) => void;
  platformDescription: string;
  platformNumber: number;
  setPlatformDescription: (desc: string) => void;
  setPlatformNumber: (num: number) => void;
};

export const TrainPosition: FC<Props> = ({
  numberOfLines = 0,
  trainIDSwitch,
  currentTrainData,
  setStationInput,
  setStationNumberInput,
  setDescInput,
  setPosInput,
  setDialog,
  setDeleteDialog,
  setPlatformDescription,
  setPlatformNumber,
  platformDescription,
  platformNumber,
}) => {
  const { currentTrain } = useCurrentTrain();
  const { stationList } = useStationList();

  useEffect(() => {
    fetch(
      `https://n8n.haruk.in/webhook/JR-shikoku-PosID?PosNum=${currentTrainData?.PosNum}&Line=${currentTrainData?.Line}`
    )
      .then((res) => res.json())
      .then((data: { type: string; platform: number; description: string }) => {
        setPlatformNumber(data?.type == "Station" ? data?.platform : undefined);
        setPlatformDescription(
          data?.type == "Station" ? data?.description : undefined
        );
      });
  }, [currentTrainData, currentTrain]);

  const trainPositionText = (trainData: trainDataType) => {
    const { isBetween, Pos } = trainPosition(trainData);
    if (isBetween === true) return `現在地：${Pos.from}→${Pos.to}間を走行中`;
    else return Pos.Pos == "" ? "" : `現在地：${Pos.Pos}`;
  };

  return (
    <TouchableOpacity
      style={{
        alignContent: "center",
        alignItems: "center",
        width: "94%",
        marginVertical: 5,
        marginHorizontal: "3%",
        backgroundColor: "#000",
        flexDirection: "row",
        overflow: "hidden",
      }}
      onLongPress={() => {
        const { isBetween, Pos } = trainPosition(currentTrainData);
        if (isBetween === true) {
          if (platformNumber == undefined && platformDescription == undefined)
            return;
          setStationInput(`${Pos.from}→${Pos.to}間`);
          setStationNumberInput(
            getStationID(currentTrainData?.Pos, stationList)
          );
          setPosInput(platformNumber?.toString() || "");
          setDeleteDialog(true);
        } else {
          setStationInput(Pos.Pos);
          setStationNumberInput(
            getStationID(currentTrainData?.Pos, stationList)
          );
          setDescInput(platformDescription || "");
          setPosInput(platformNumber?.toString() || "");
          setDialog(true);
        }
      }}
    >
      <View style={{ flex: 4, flexDirection: "row" }}>
        <Text
          style={{ ...descriptionStyle, color: "green" }}
          numberOfLines={numberOfLines}
        >
          {`${
            trainIDSwitch
              ? currentTrainData?.PosNum + currentTrainData?.Line
              : trainPositionText(currentTrainData)
          } ${platformNumber ? platformNumber + "番線" : ""} ${
            platformDescription ? "(" + platformDescription + ")" : ""
          }`}
        </Text>
      </View>
    </TouchableOpacity>
  );
};