import { openImagePicker } from "@/redux/photos/photos.actions";
import * as Haptics from "expo-haptics";
import { Stack, useGlobalSearchParams } from "expo-router";
import { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { Button } 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 } = useGlobalSearchParams();

  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: (props) => (
            <Button
              icon="cloud-upload-outline"
              style={{
                display: "flex",
                alignContent: "center",
                alignItems: "center",
                alignSelf: "center",
                justifyContent: "center",
                //margin: -10,
              }}
              onPress={handleUpload}
            >
              {t("general.labels.upload")}
            </Button>
          ),
        })}
      />
    </Stack>
  );
}