import { openImagePicker } from "@/redux/photos/photos.actions";
import * as Haptics from "expo-haptics";
import { Stack, useLocalSearchParams } from "expo-router";
import { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { IconButton } from "react-native-paper";
import { connect } from "react-redux";

const mapDispatchToProps = (dispatch) => ({
  openImagePicker: (id) => dispatch(openImagePicker(id)),
});
export default connect(null, mapDispatchToProps)(JobsStack);

function JobsStack({ openImagePicker }) {
  const { t } = useTranslation();
  const { jobId } = useLocalSearchParams();

  const handleUpload = useCallback(() => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    openImagePicker(jobId);
  }, [openImagePicker, jobId]);

  return (
    <Stack
      screenOptions={{
        headerTitleStyle: {
          fontWeight: "bold",
        },
      }}
    >
      <Stack.Screen
        name="index"
        options={{
          headerShown: false,
          title: t("joblist.titles.jobtab"),
        }}
      />
      <Stack.Screen
        name="[jobId]"
        options={({ route }) => ({
          //headerShown: false,
          title: (route.params as any)?.title || "Job Details",
          headerRight: () => (
            <IconButton
              icon="cloud-upload-outline"
              size={20}
              onPress={handleUpload}
            />
          ),
        })}
      />
    </Stack>
  );
}
