import lineColorList from "@/assets/originData/lineColorList";
import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker";
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]);
  const lineColor =
    station.length > 0
      ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
      : "white";
  return (
    <TouchableOpacity
      style={{ flex: 1, flexDirection: "row" }}
      onPress={() => {
        setFixedPosition({ type: null, value: null });
      }}
    >
      <View
        style={{
          flex: 3,
          flexDirection: "column",
          alignContent: "center",
          alignSelf: "center",
          alignItems: "center",
          height: "100%",
          backgroundColor: "white",
        }}
      >
        <View
          style={{
            backgroundColor: lineColor,
            flexDirection: "row",
            width: "100%",

          }}
        >
          <StationNumberMaker
            currentStation={station}
            singleSize={20}
            useEach={true}
          />
          <Text
            style={{
              fontSize: 20,
              textAlignVertical: "center",
              margin: 0,
              padding: 0,
              flex:1
            }}
          >
            {station[0]?.Station_JP}
          </Text>
          <View
            style={{
              backgroundColor: "white",
              width: 10,
              borderLeftColor: lineColor,
              borderBottomColor: "white",
              borderBottomWidth: 24,
              borderLeftWidth: 10,
              borderRightWidth: 0,
              borderTopWidth: 0,
              height: "100%",
            }}
            />
        </View>
        <View
          style={{
            height: "100%",
            backgroundColor: "white",
            flex: 1,
          }}
        >
          <Text style={{ fontSize: 20 }}>駅情報固定中</Text>
        </View>
      </View>

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