import React, { FC, useRef } from "react";
import { View, Platform } from "react-native";
import ActionSheet from "react-native-actions-sheet";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import { SpecialTrainInfoBox } from "../Menu/SpecialTrainInfoBox";

type props = {
  payload: { navigate: (screen: string, params?: object) => void };
};
export const SpecialTrainInfo: FC<props> = ({ payload }) => {
  const { navigate } = payload;
  const actionSheetRef = useRef(null);
  const insets = useSafeAreaInsets();

  return (
    <ActionSheet
      gestureEnabled
      CustomHeaderComponent={<></>}
      ref={actionSheetRef}
      isModal={Platform.OS == "ios"}
      containerStyle={
        Platform.OS == "android"
          ? {
              paddingBottom: insets.bottom,
            }
          : {}
      }
      useBottomSafeAreaPadding={Platform.OS == "android"}
    >
      <View
        style={{
          backgroundColor: "#0099CC",
          borderTopRadius: 5,
          borderColor: "dark",
          borderWidth: 1,
        }}
      >
        <View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
          <View
            style={{
              height: 6,
              width: 45,
              borderRadius: 100,
              backgroundColor: "#f0f0f0",
              marginVertical: 10,
              alignSelf: "center",
            }}
          />
        </View>
        <SpecialTrainInfoBox navigate={navigate} />
      </View>
    </ActionSheet>
  );
};