import lineColorList from "@/assets/originData/lineColorList";
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
import { useStationList, StationProps } from "@/stateBox/useStationList";
import { useEffect, useState } from "react";
import { Text, TouchableOpacity, View } from "react-native";

export const FixedStation = ({ stationID }) => {
  const { fixedPosition, setFixedPosition } = useCurrentTrain();
  const { getStationDataFromId } = useStationList();
  const [station, setStation] = useState<StationProps[]>([]);
  useEffect(() => {
    const data = getStationDataFromId(stationID);
    setStation(data);
  }, [stationID]);
  console.log(station);
  const lineColor =
    station.length > 0
      ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
      : "white";
  return (
    <TouchableOpacity
      style={{ flex: 1, flexDirection: "column" }}
      onPress={() => {
        setFixedPosition({ type: null, value: null });
      }}
    >
      <View style={{ flex: 1, flexDirection: "row" }}>
        <View
          style={{
            paddingHorizontal: 5,
            backgroundColor: lineColor,
            flexDirection: "row",
          }}
        >
          {station.map((s) => {
            if (s.StationNumber === null) return null;
            return (
              <View
                key={s.StationNumber}
                style={{
                  flexDirection: "column",
                  alignItems: "center",
                  borderColor: lineColor,
                  backgroundColor: "white",
                  borderWidth: 1,
                  borderRadius: 30,
                  width: 25,
                  height: 25,
                }}
              >
                <Text style={{ fontSize: 10, margin: 0, padding: 0 }}>
                  {s.StationNumber?.slice(0, 1)}
                </Text>
                <Text style={{ fontSize: 10, margin: 0, padding: 0 }}>
                  {s.StationNumber?.slice(1)}
                </Text>
              </View>
            );
          })}
        </View>
        <View
          style={{
            backgroundColor: lineColor,
          }}
        >
          <Text style={{ fontSize: 20 }}>{station[0]?.Station_JP}</Text>
        </View>
        <View
          style={{
            backgroundColor: lineColor,
            width: 10,
            borderLeftColor: lineColor,
            borderBottomColor: "white",
            borderBottomWidth: 25,
            borderLeftWidth: 10,
            borderRightWidth: 0,
            borderTopWidth: 0,
          }}
        ></View>
        <View style={{ backgroundColor: "white", flex: 1 }}>
          <Text style={{ fontSize: 20 }}>駅情報固定中</Text>
        </View>
      </View>

      <View
        style={{
          flex: 1,
          flexDirection: "row",
          backgroundColor: lineColor,
        }}
      >
        <View style={{ backgroundColor: "white", flex: 1 }}>
          <Text style={{ fontSize: 20 }}>次：15:00 快速マリン　岡山</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
};