imexmobile/components/time-ticket-items/clockedin-list-item.component.jsx

import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import { useTranslation } from "react-i18next";
import { Button, Card, Text } from "react-native-paper";
import { connect, useSelector, useDispatch } from "react-redux";
import { createSelector, createStructuredSelector } from "reselect";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
import { DateTimeFormatter } from "../../util/DateFormater";
// import { setTimeTicketJobId } from "../../redux/timetickets/timetickets.actions";
import { setTmTicketJobId } from "../../redux/app/app.actions";
import { logImEXEvent } from "../../firebase/firebase.analytics";
import { employeeSignInStart } from "../../redux/employee/employee.actions";
import { useRef } from "react";

// const selectNumCompletedTodos = createSelector(
//     (state) => state.timeTickets,
//     (timeTickets) => timeTickets.timeTicketJobId
//   );
//const mapStateToProps = createStructuredSelector({});
// // setTimeTicketJobId: (jobId) =>dispatch(setTimeTicketJobId({jobId})),
//employeeSignInStart:(idjob) => dispatch(employeeSignInStart(idjob)),

const mapDispatchToProps = (dispatch) => ({
  setTmTicketJobIdRedux: (jobId) => dispatch(setTmTicketJobId(jobId)),
});

export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
  console.log("ClockedinListItem, ticket", ticket);
  console.log("ClockedinListItem, setTmTicketJobId", setTmTicketJobId);

  const { t } = useTranslation();
  const navigation = useNavigation();

  console.log("ClockedinListItem, ticket job id", ticket.job.id);
  const jbId = ticket.job.id;
  console.log("ClockedinListItem, jbId: ", jbId);
  // const te = useRef(jbId);

  const makeNavToTimeTicketClockOff = () => (
    console.log(
      "*** THIS IS THE ONE WE ARE TESTING. ClockedinListItem, makeNavToTimeTicketClockOff, setTmTicketJobId :",
      setTmTicketJobIdRedux
    ),
    //console.log("ClockedinListItem, makeNavToTimeTicketClockOff, jobId :", jbId)
    setTmTicketJobIdRedux(ticket.job.id),
    //,
    navigation.navigate("TimeTicketClockOff")
  );
  //   const onPress = (ticket, setCameraJobId) => {
  //     console.log("ClockedinListItem, onPress called");
  //     console.log("ClockedinListItem, ticket", ticket);
  //     setTimeTicketJobId(ticket.jobid);
  //     // logImEXEvent("imexmobile_view_job_detail");
  //     navigation.push("TimeTicketClockOff", {
  //       jobId: ticket.jobid, //item.id,
  //       timeTicketId: ticket.id,
  //       //completedCallback: refetch,
  //     });
  //     // navigation.push("JobDetail", {
  //     //     jobId: item.id,
  //     //     timeTicketId: item.ro_number || t("general.labels.na"),
  //     //     job: item,
  //     //   });
  //     // () => {navigation.navigate("TimeTicketClockOff");}
  //   };

  return (
    <Card style={{ margin: 8 }}>
      <Card.Title
        title={`${
          ticket.job.ro_number || t("general.labels.na")
        } ${OwnerNameDisplayFunction(ticket.job)}`}
      />
      <Card.Content>
        <Text>
          Vehicle :
          {`${ticket.job.v_model_yr || ""} ${ticket.job.v_make_desc || ""} ${
            ticket.job.v_model_desc || ""
          }`}
        </Text>
        <Text>
          Clocked In : <DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
        </Text>
        <Text>
          Cost Center :{" "}
          {ticket.cost_center === "timetickets.labels.shift"
            ? t(ticket.cost_center)
            : ticket.cost_center}
        </Text>
      </Card.Content>
      <Card.Actions>
        {/* <TechClockOffButton
                      jobId={ticket.jobid}
                      timeTicketId={ticket.id}
                      completedCallback={refetch}
                    /> */}
        <Button
          // key={ticket.id}
          mode="outlined"
          onPress={makeNavToTimeTicketClockOff}
          //     {
          //     logImEXEvent("imexmobile_setcamerajobid_row");
          //     // setTmTicketJobId(ticket.id);
          //     // console.log("ticket.jobid is :",ticket.jobid );
          //     // console.log("setTimeTicketJobId is :",setTimeTicketJobId );
          //     // console.log("ham is :",setTimeTicketJobId );
          //     // if (typeof ham === 'undefined') {
          //     //     console.error("yo dog, setTimeTicketJobId is undefined!");
          //     //     return;
          //     // }
          //     const { id, jobid } = e;
          //     console.log("ticket.jobid is :", ticket.jobid);
          //     setTmTicketJobId(ticket.jobid);
          //     // setTimeTicketJobId(ticket.jobid);
          //     //navigation.navigate("TimeTicketClockOff");
          //   }}
        >
          Clock Out
        </Button>
      </Card.Actions>
    </Card>
    // <List.Item
    //   onPress={onPress}
    //   title={<Title>{item.ro_number || t("general.labels.na")}</Title>}
    //   descriptionNumberOfLines={2}
    //   description={`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
    //     item.ownr_co_nm || ""
    //   } - ${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
    //     item.v_model_desc || ""
    //   }`}
    //   right={({ style }) => (
    //     <Button
    //       style={[style, { alignSelf: "center" }]}
    //       onPress={() => {
    //         logImEXEvent("imexmobile_setcamerajobid_row");
    //         setCameraJobId(item.id);
    //         setCameraJob(item);
    //         navigation.navigate("MediaBrowserTab");
    //       }}
    //     >
    //       <Ionicons
    //         style={[style, { alignSelf: "center" }]}
    //         name="ios-add"
    //         size={32}
    //         color="dodgerblue"
    //       />
    //     </Button>
    //   )}
    // />
  );
}

export default connect(null, mapDispatchToProps)(ClockedinListItem);