import React, { useEffect, useRef } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Platform,
  BackHandler,
} from "react-native";
import ActionSheet, { SheetManager } from "react-native-actions-sheet";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useTrainMenu } from "../../stateBox/useTrainMenu";
import lineColorList from "../../assets/originData/lineColorList";
import { stationIDPair } from "../../lib/getStationList2";
import { lineListPair } from "../../lib/getStationList";

export const TrainMenuLineSelector = () => {
  const {
    selectedLine,
    setSelectedLine,
    mapsStationData: stationData,
  } = useTrainMenu();
  const actionSheetRef = useRef(null);
  const insets = useSafeAreaInsets();
  const platformIs = Platform.OS == "android";
  return (
    <ActionSheet
      gestureEnabled
      CustomHeaderComponent={<></>}
      ref={actionSheetRef}
      isModal={Platform.OS == "ios"}
      containerStyle={platformIs ? { paddingBottom: insets.bottom } : {}}
      useBottomSafeAreaPadding={platformIs}
    >
      <Handler />
      <View style={{ height: 26, width: "100%", backgroundColor: "white" }}>
        <View
          style={{
            height: 6,
            width: 45,
            borderRadius: 100,
            backgroundColor: "#f0f0f0",
            marginVertical: 10,
            alignSelf: "center",
          }}
        />
      </View>
      {Object.keys(stationData).map((d) => (
        <TouchableOpacity
          style={{
            flexDirection: "row",
            backgroundColor: selectedLine == d ? "#0099CC33" : "white",
          }}
          onPress={() => {
            SheetManager.hide("TrainMenuLineSelector");
            setSelectedLine(selectedLine == d ? undefined : d);
          }}
        >
          <View
            style={{
              width: 35,
              position: "relative",
              marginHorizontal: 15,
              flexDirection: "row",
              height: "101%",
            }}
          >
            <View
              style={{
                backgroundColor: lineColorList[stationIDPair[d]],
                flex: 1,
              }}
            >
              <View style={{ flex: 1 }} />
              <Text
                style={{
                  color: "white",
                  textAlign: "center",
                  fontSize: 12,
                  fontWeight: "bold",
                }}
              >
                {stationIDPair[d]}
              </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 }}>
              {lineListPair[stationIDPair[d]]}
            </Text>
            <View style={{ flex: 1 }} />
          </View>
        </TouchableOpacity>
      ))}
    </ActionSheet>
  );
};
const Handler = () => {
  useEffect(() => {
    const backAction = () => {
      SheetManager.hide("TrainMenuLineSelector");
      return true;
    };
    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );
    return () => backHandler.remove();
  }, []);
  return <></>;
};