import { useCallback, useContext } from "react";
import { AppContext, AppStyles } from "../../../../../utils";
import { useTranslation } from "react-i18next";
import { useFocusEffect } from "@react-navigation/native";
import { RenderHeaderRight } from "..";
import { Text, View } from "react-native";

export default function StopEditActionModalContent({ navigation, route }) {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();

  const { action } = route.params;

  useFocusEffect(
    useCallback(() => {
      navigation.setOptions({
        headerRight: () => (
          <RenderHeaderRight
            action={action}
            appContext={appContext}
            navigation={navigation}
            t={t}
          />
        ),
      });
    }, [])
  );

  return (
    <View style={{ margin: 40 }}>
      <Text
        style={[
          { textAlign: "center", color: appContext.appTheme.text },
          AppStyles.typography16,
        ]}
      >
        {t("screens.device.scenes.editActions.modalStopEditAction.description")}
      </Text>
    </View>
  );
}
