imexmobile/components/jobs-list/job-list-item.jsx

import env from "@/env";
import { firstNames, getRandomIndex, lastNames } from "@/util/demodata";
import * as Haptics from "expo-haptics";
import { useRouter } from "expo-router";
import React, { memo, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { Pressable, StyleSheet, View } from "react-native";
import { IconButton, Text, useTheme } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.analytics";
import { openImagePicker } from "../../redux/photos/photos.actions";

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

function JobListItemComponent({ openImagePicker, item }) {
  const { t } = useTranslation();
  const router = useRouter();
  const theme = useTheme();

  const onPress = useCallback(() => {
    Haptics.selectionAsync();
    logImEXEvent("imexmobile_view_job_detail");
    router.navigate({
      pathname: `/jobs/${item.id}`,
      params: {
        title: item.ro_number || t("general.labels.na"),
      },
    });
  }, [item.id, item.ro_number, router, t]);

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

  const ownerName = env.DEMO_MODE
    ? `${firstNames[getRandomIndex()] || ""} ${
        lastNames[getRandomIndex()] || ""
      }`
    : `${item.ownr_fn || ""} ${item.ownr_ln || ""}`.trim();
  const company = item.ownr_co_nm || "";
  const vehicle = `${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
    item.v_model_desc || ""
  }`.trim();
  const roNumber = item.ro_number || t("general.labels.na");

  if (item.id === "footer-spacer") {
    return (
      //This has to be nested for some reason?
      <View>
        <View
          style={{
            height: item.height || 96,
          }}
        ></View>
      </View>
    );
  }
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [styles.pressable, pressed && { opacity: 0.85 }]}
    >
      <View style={styles.blurContainer}>
        {/* Translucent overlay for glass effect */}
        <View
          style={[
            styles.glassCard,
            {
              backgroundColor: theme.colors.surface,
              borderColor: theme.colors.outlineVariant,
            },
          ]}
        >
          <View style={styles.cardContents}>
            <View style={{ flex: 1, display: "flex" }}>
              <View style={styles.headerRow}>
                <View style={styles.leftHeader}>
                  <Text
                    numberOfLines={1}
                    style={[styles.roNumber, { color: theme.colors.primary }]}
                  >
                    {roNumber} • {ownerName}
                    {ownerName && company ? " • " : ""}
                    {company}
                  </Text>
                </View>
              </View>
              <View style={styles.body}>
                <Text
                  variant="bodyMedium"
                  numberOfLines={1}
                  style={{ marginTop: 4, flex: 1 }}
                >
                  {vehicle}
                </Text>
              </View>
              <View style={styles.body}>
                <Text variant="bodyMedium">{item.status}</Text>
              </View>
            </View>
            <IconButton
              onPress={handleUpload}
              icon="cloud-upload-outline"
              mode="contained-tonal"
              size={22}
              accessibilityLabel={t("joblist.actions.upload")}
              style={styles.uploadButton}
            />
          </View>
        </View>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  pressable: {
    marginVertical: 6,
  },
  outerShadow: {
    borderRadius: 20, //this one
    shadowColor: "#000",
    shadowOpacity: 0.12,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 4 },
    elevation: 3,
  },
  blurContainer: {
    overflow: "hidden",
    borderRadius: 20,
  },
  glassCard: {
    padding: 14,
    borderRadius: 20,
    borderWidth: StyleSheet.hairlineWidth,
    backdropFilter: "blur(20px)", // web only
  },
  cardContents: {
    flex: 1,
    flexDirection: "row",
    display: "flex",
    alignItems: "center",
  },
  headerRow: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "space-between",
    marginBottom: 4,
  },
  leftHeader: {
    flex: 1,
    paddingRight: 8,
  },
  roNumber: {
    fontSize: 18,
    fontWeight: "600",
    letterSpacing: 0.5,
  },
  ownerInfo: {
    marginTop: 2,
    fontSize: 15,
    fontWeight: "500",
    opacity: 0.9,
  },
  uploadButton: {
    marginLeft: 12,
  },
  body: {
    marginTop: 2,
    display: "flex",
    flex: 1,
    flexDirection: "row",
    gap: 8,
    alignItems: "center",
  },
  ownerText: {
    fontWeight: "600",
  },
});

const JobListItem = memo(
  JobListItemComponent,
  (prev, next) => prev.item.id === next.item.id
);

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