import React, { FC, useState } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { useInterval } from "../../lib/useInterval";

import lineColorList from "../../assets/originData/lineColorList";

type StationProps = {
  DispNum: string;
  JrHpUrl: string;
  MyStation: string;
  StationMap: string;
  StationNumber: string | null;
  StationTimeTable: string;
  Station_EN: string;
  Station_JP: string;
  jslodApi: string;
  lat: number;
  lng: number;
};
type StationNumberProps = {
  currentStation: StationProps[];
  active: boolean;
  onPress: () => void;
};
export const StationNumber: FC<StationNumberProps> = (props) => {
  const { currentStation, active, onPress } = props;
  const [animation, setAnimation] = useState(0);
  const data = currentStation.filter((d) => (d.StationNumber ? true : false));
  useInterval(() => {
    if (!data) return;
    setAnimation(animation + 1 < data.length ? animation + 1 : 0);
  }, 2000);

  const lineID = data[animation].StationNumber.slice(0, 1);
  const lineName = data[animation].StationNumber.slice(1);
  const size = active ? 24 : 18;
  return (
    <TouchableOpacity
      onPress={onPress}
      style={{
        width: 28,
        height: 24,
        alignContent: "center",
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
      }}
    >
      {active && (
        <View
          style={{
            flex: 1,
            position: "absolute",
            width: 28,
            height: 28,
            marginHorizontal: 1,
            borderRadius: 22,
            borderColor: "black",
            borderWidth: 2,
            left: -1,
            top: -2,
            zIndex: 10,
          }}
        />
      )}
      <View
        style={{
          alignContent: "center",
          alignItems: "center",
          width: size,
          height: size,
          borderColor: lineColorList[lineID],
          backgroundColor: "white",
          borderWidth: active ? 2 : 1,
          borderRadius: 22,
        }}
        key={currentStation[0].StationNumber + lineID}
      >
        <View style={{ flex: 1 }} />
        <Text
          style={{
            fontSize: active ? 8 : 6,
            margin: 0,
            padding: 0,
            textAlign: "center",
            color: "black",
            fontWeight: active ? "bold" : "normal",
            textAlignVertical: "center",
          }}
        >
          {lineID + "\n" + lineName}
        </Text>
        <View style={{ flex: 1 }} />
      </View>
    </TouchableOpacity>
  );
};