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 } from "react-redux";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
import { DateTimeFormatter } from "../../util/DateFormater";
import { setTmTicketJobId } from "../../redux/app/app.actions";

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

export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
  const { t } = useTranslation();
  const navigation = useNavigation();

  const makeNavToTimeTicketClockOff = () => (
    // console.log("makeNavToTimeTicketClockOff, checkHasDispatchCall:",setTmTicketJobIdRedux),
    setTmTicketJobIdRedux(ticket.job.id),
    navigation.navigate("TimeTicketClockOff", {
      // jobId: ticket.jobid, //item.id,
      timeTicketId:ticket.id,
      //completedCallback: refetch,
    })
  );

  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>
        <Button mode="outlined" onPress={makeNavToTimeTicketClockOff} >
          Clock Out
        </Button>
      </Card.Actions>
    </Card>
  );
}

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