imexmobile/components/Modals/JobSearchAndSelectModal.jsx

import { useQuery } from "@apollo/client";
import { Ionicons } from "@expo/vector-icons";
import React from "react";
import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, View } from "react-native";
import { Button, List, Modal, Portal, Searchbar } from "react-native-paper";
import { connect } from "react-redux";
// import { createStructuredSelector } from "reselect";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
// import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
// import {
//   selectCurrentCameraJob,
//   selectCurrentCameraJobId,
// } from "../../redux/app/app.selectors";
// import { selectBodyshop } from "../../redux/user/user.selectors";
import ErrorDisplay from "../error-display/error-display.component";
import LoadingDisplay from "../loading-display/loading-display.component";

// const mapStateToProps = createStructuredSelector({
//   cameraJobId: selectCurrentCameraJobId,
//   cameraJob: selectCurrentCameraJob,
// });

// const mapDispatchToProps = (dispatch) => ({
//   setCameraJobId: (id) => dispatch(setCameraJobId(id)),
//   setCameraJob: (job) => dispatch(setCameraJob(job)),
// });

export function JobSearchAndSelectModal(
  props,
//   cameraJobId,
//   setCameraJobId,
//   cameraJob,
//   setCameraJob,
) {
  const jobSrchNotExported =
    props?.notExported !== undefined ? props.notExported : true;
  const jobSrchNotInvoiced =
    props?.notInvoiced !== undefined ? props.notInvoiced : false;
  const jobSrchConvertedOnly =
    props?.convertedOnly !== undefined ? props.convertedOnly : false;

    const jobSrchCurrentValue = props?.currentValue !== undefined ? props.currentValue : { id: "temp", ro_number: "Temporary Storage" };
    const jobSrchOnSetCurrentValue = props?.onSetCurrentValue !== undefined ? props.onSetCurrentValue : (e) => { console.info("onSetCurrentValue was called",e);};
    const jobSrchCurrentValueId = props?.currentValueId !== undefined ? props.currentValueId : "temp";
    const jobSrchOnSetCurrentValueId = props?.onSetCurrentValueId !== undefined ? props.onSetCurrentValueId : () => { console.info("onSetCurrentValueId was called"); };
  
  console.log(" ");
  console.log("*****JobSearchAndSelectModal*****");
  console.log("props:", props);//works
//   console.log("notExported:", jobSrchNotExported);//works
//   console.log("notInvoiced:", jobSrchNotInvoiced);//works
//   console.log("convertedOnly:", jobSrchConvertedOnly);//works
  console.log("jobSrchCurrentValue:", jobSrchCurrentValue); //{"id": "temp", "ro_number": "Temporary Storage"}
  console.log("jobSrchOnSetCurrentValue:", jobSrchOnSetCurrentValue);  
  console.log("jobSrchCurrentValueId:", jobSrchCurrentValueId); //temp  will be currentValue
  console.log("jobSrchOnSetCurrentValueId:", jobSrchOnSetCurrentValueId); // will be onSetCurrentValue
  

  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
    fetchPolicy: "cache-and-network",
    variables: {
      statuses: false || ["Open", "Open*"],
    },
  });
  const { t } = useTranslation();
  const [visible, setVisible] = React.useState(false);
  const [searchQuery, setSearchQuery] = React.useState("");
  if (loading) return <LoadingDisplay />;
  if (error) return <ErrorDisplay errorMessage={error.message} />;

  const showModal = () => setVisible(true);
  const hideModal = () => setVisible(false);

  const onRefresh = async () => {
    console.log("onRefresh was called");
    return refetch();
  };

  const onChangeSearch = (query) => setSearchQuery(query);

  const jobs = data
    ? searchQuery === ""
      ? data.jobs
      : data.jobs.filter(
          (j) =>
            (j.ro_number || "")
              .toString()
              .toLowerCase()
              .includes(searchQuery.toLowerCase()) ||
            (j.ownr_co_nm || "")
              .toLowerCase()
              .includes(searchQuery.toLowerCase()) ||
            (j.ownr_fn || "")
              .toLowerCase()
              .includes(searchQuery.toLowerCase()) ||
            (j.ownr_ln || "")
              .toLowerCase()
              .includes(searchQuery.toLowerCase()) ||
            (j.plate_no || "")
              .toLowerCase()
              .includes(searchQuery.toLowerCase()) ||
            (j.v_model_desc || "")
              .toLowerCase()
              .includes(searchQuery.toLowerCase()) ||
            (j.v_make_desc || "")
              .toLowerCase()
              .includes(searchQuery.toLowerCase())
        )
    : [];

  return (
    <>
      <Portal>
        <Modal
          visible={visible}
          onDismiss={hideModal}
          // eslint-disable-next-line react-native/no-color-literals
          contentContainerStyle={{
            paddingTop: 20,
            paddingBottom: 20,
            margin: 12,
            flex: 1,
            backgroundColor: "white",
          }}
        >
          <View
            style={{
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              margin: 8,
            }}
          >
            <Button onPress={() => hideModal()}>
              <Ionicons name="ios-arrow-back" size={32} color="dodgerblue" />
            </Button>
            <Searchbar
              style={{ flex: 1 }}
              onChangeText={onChangeSearch}
              value={searchQuery}
            />
          </View>
          <FlatList
            refreshControl={
              <RefreshControl refreshing={loading} onRefresh={onRefresh} />
            }
            data={[{ id: "temp", ro_number: "Temporary Storage" }, ...jobs]}
            keyExtractor={(item) => item.id}
            renderItem={(object) => (
              <List.Item
                onPress={() => {
                  //setCameraJob(object.item);
                  //setCameraJobId(object.item.id);
                  jobSrchOnSetCurrentValue(object.item);
                  jobSrchOnSetCurrentValueId(object.item.id);
                  hideModal();
                  setSearchQuery("");
                }}
                left={() => {
                  if (object.item.id !== jobSrchCurrentValueId) return null;
                  return (
                    <Ionicons
                      name="ios-checkmark-circle"
                      size={24}
                      color="dodgerblue"
                      style={{ alignSelf: "center" }}
                    />
                  );
                }}
                titleStyle={{
                  ...(object.item.id === jobSrchCurrentValueId
                    ? { color: "dodgerblue" }
                    : {}),
                }}
                title={`${
                  object.item.ro_number ? `${object.item.ro_number} ` : ``
                }${object.item.ownr_fn || ""} ${object.item.ownr_ln || ""} ${
                  object.item.ownr_co_nm || ""
                } ${
                  object.item.v_model_yr ? `- ${object.item.v_model_yr}` : ""
                } ${
                  object.item.v_make_desc ? `- ${object.item.v_make_desc}` : ""
                } ${
                  object.item.v_model_desc
                    ? `- ${object.item.v_model_desc}`
                    : ""
                }`}
                key={object.item.id}
              />
            )}
          />
        </Modal>
      </Portal>
      <Button mode="outlined" style={{ margin: 8 }} onPress={showModal}>
        {jobSrchCurrentValueId
          ? jobSrchCurrentValueId === "temp"
            ? t("mediabrowser.labels.temporarystorage")
            : `${jobSrchCurrentValue.ro_number ? `${jobSrchCurrentValue.ro_number} - ` : ``}${
                jobSrchCurrentValue.ownr_fn || ""
              } ${jobSrchCurrentValue.ownr_ln || ""} ${jobSrchCurrentValue.ownr_co_nm || ""} - ${
                jobSrchCurrentValue.v_model_yr || ""
              } ${jobSrchCurrentValue.v_make_desc || ""} ${jobSrchCurrentValue.v_model_desc || ""}`
          : t("mediabrowser.labels.selectjob")}
      </Button>
    </>
  );
}

export default connect(null, null)(JobSearchAndSelectModal);