import React, { useEffect, useState } from "react";
import Icon from "react-native-vector-icons/Entypo";
import { View, Text, TouchableOpacity, LayoutAnimation } from "react-native";
import lineColorList from "../../../assets/originData/lineColorList";
import { AS } from "../../../storageControl";

export const FavoriteSettingsItem = ({
  currentStation,
  setFavoriteStation,
  index,
  array,
}) => {
  const lineIDs = [];
  const EachIDs = [];
  console.log(currentStation);
  currentStation.forEach((d) => {
    if (!d.StationNumber) return;
    const textArray = d.StationNumber.split("");
    lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
    EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
  });
  const [head, setHead] = useState(false);
  const [tail, setTail] = useState(false);
  useEffect(() => {
    switch (true) {
      case array.length == 1:
        setHead(true);
        setTail(true);
        break;
      case index == 0:
        setHead(true);
        setTail(false);
        break;
      case index == array.length - 1:
        setHead(false);
        setTail(true);
        break;
      default:
        setHead(false);
        setTail(false);
    }
  }, [array]);

  return (
    <View style={{ flexDirection: "row", backgroundColor: "white" }}>
      <View
        style={{
          width: 35,
          position: "relative",
          marginHorizontal: 15,
          flexDirection: "row",
          height: "101%",
        }}
      >
        {lineIDs.map((lineID, index) => (
          <View
            style={{
              backgroundColor: lineColorList[lineID],
              flex: 1,
            }}
            key={lineID}
          >
            <View style={{ flex: 1 }} />
            <Text
              style={{
                color: "white",
                textAlign: "center",
                fontSize: 12,
                fontWeight: "bold",
              }}
            >
              {lineIDs[index]}
              {"\n"}
              {EachIDs[index]}
            </Text>
            <View style={{ flex: 1 }} />
          </View>
        ))}
      </View>

      <View
        style={{
          padding: 8,
          flexDirection: "row",
          borderBottomWidth: 1,
          borderBottomColor: "#f0f0f0",
          flex: 1,
          alignContent: "center",
          alignItems: "center",
        }}
      >
        <Text style={{ fontSize: 20 }}>{currentStation[0].Station_JP}</Text>
        <View style={{ flex: 1 }} />
        <TouchableOpacity
          style={{ marginHorizontal: 10, marginVertical: 4, width: 30 }}
          onPress={() => {
            console.log("up");
            LayoutAnimation.configureNext(
              LayoutAnimation.Presets.easeInEaseOut
            );
            const removedStation = [...array].filter((d, i) => {
              if (i == index) return false;
              return true;
            });
            removedStation.splice(index - 1, 0, currentStation);
            setFavoriteStation(removedStation);

            AS.setItem("favoriteStation", JSON.stringify(removedStation));
          }}
        >
          {head ? null : <Icon name="chevron-up" size={26} />}
        </TouchableOpacity>
        <TouchableOpacity
          style={{ marginHorizontal: 10, marginVertical: 4, width: 30 }}
          onPress={() => {
            console.log("down");
            LayoutAnimation.configureNext(
              LayoutAnimation.Presets.easeInEaseOut
            );
            const removedStation = [...array].filter((d, i) => {
              if (i == index) return false;
              return true;
            });
            removedStation.splice(index + 1, 0, currentStation);
            setFavoriteStation(removedStation);
            AS.setItem("favoriteStation", JSON.stringify(removedStation));
          }}
        >
          {tail ? null : <Icon name="chevron-down" size={26} />}
        </TouchableOpacity>
      </View>
    </View>
  );
};