import { useRouter } from "expo-router";
import { useTranslation } from "react-i18next";
import { Button, List, Text, useTheme } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.analytics";
import { setCameraJobId } from "../../redux/app/app.actions";
import { openImagePicker } from "../../redux/photos/photos.actions";

const mapStateToProps = createStructuredSelector({});
const mapDispatchToProps = (dispatch) => ({
  setCameraJobId: (id) => dispatch(setCameraJobId(id)),
  openImagePicker: (id) => dispatch(openImagePicker(id)),
});

export function JobListItem({ openImagePicker, item }) {
  const { t } = useTranslation();
  const router = useRouter();
  const theme = useTheme();
  const onPress = () => {
    logImEXEvent("imexmobile_view_job_detail");
    router.navigate({
      pathname: `/jobs/${item.id}`,
      params: {
        title: item.ro_number || t("general.labels.na"),
      },
    });
  };

  const handleUpload = () => {
    openImagePicker(item.id);
  };

  return (
    <List.Item
      onPress={onPress}
      title={`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
        item.ownr_co_nm || ""
      }`}
      description={`$${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
        item.v_model_desc || ""
      }`}
      left={(props) => (
        <Text variant="titleMedium" style={{ padding: 10 }}>
          {item.ro_number || t("general.labels.na")}
        </Text>
      )}
      right={() => (
        <Button onPress={handleUpload}>
          <List.Icon color={theme.colors.primary} icon="cloud-upload-outline" />
        </Button>
      )}
    />
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(JobListItem);