import { useLazyQuery, useQuery } from "@apollo/client";
import { Ionicons } from "@expo/vector-icons";
import React from "react";
import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, Text, View } from "react-native";
import { Button, List, Modal, Portal, Searchbar } from "react-native-paper";
import { connect } from "react-redux";
// import { createStructuredSelector } from "reselect";
import { SEARCH_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
import ErrorDisplay from "../error-display/error-display.component";
// import LoadingDisplay from "../loading-display/loading-display.component";
import _ from "lodash";
import { useCallback } from "react";

export function JobSearchAndSelectModal(props) {
  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: "No Selection" };
  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 { t } = useTranslation();
  const [visible, setVisible] = React.useState(false);
  const [searchText, setSearchText] = React.useState("");

  // const [error, setError] = React.useState(null);
  // const [data, setData] = React.useState(null);
  // const [loading, setLoading] = React.useState(null);

  //TODO:Replace QUERY_ALL_ACTIVE_JOBS with SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE and update variables,  statuses: false || ["Open", "Open*"],
  // with search: value,
  // ...(convertedOnly || notExported
  //     ? {
  //         ...(convertedOnly ? { isConverted: true } : {}),
  //         ...(notExported ? { notExported: true } : {}),
  //         ...(notInvoiced ? { notInvoiced: true } : {}),
  //       }
  //     : {}),

  //orig works 7/20
  // const { loading, error, data, refetch } = useQuery(
  //   SEARCH_JOBS_FOR_AUTOCOMPLETE,
  //   {
  //     fetchPolicy: "cache-and-network",
  //     variables: {
  //       search: searchText,
  //       ...(jobSrchConvertedOnly || jobSrchNotExported
  //         ? {
  //             ...(jobSrchConvertedOnly ? { isConverted: true } : {}),
  //             ...(jobSrchNotExported ? { notExported: true } : {}),
  //             ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
  //           }
  //         : {}),
  //     },
  //   }
  // );
  //temp placeholder commented code
  // const searchQuery = useQuery([SEARCH_JOBS_FOR_AUTOCOMPLETE, debouncedSearchTerm], () => fetchSearchResults(debouncedSearchTerm));
  //2nd try with uselazyquery
  const [searchQuery, { loading, error, data, refetch }] = useLazyQuery(
    SEARCH_JOBS_FOR_AUTOCOMPLETE,
    {
       fetchPolicy: "cache-and-network",
      // variables: {
      //   search: searchText,
      //   ...(jobSrchConvertedOnly || jobSrchNotExported
      //     ? {
      //         ...(jobSrchConvertedOnly ? { isConverted: true } : {}),
      //         ...(jobSrchNotExported ? { notExported: true } : {}),
      //         ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
      //       }
      //     : {}),
      // },
    }
  );

  if (error) return <ErrorDisplay errorMessage={error.message} />;

  const showModal = () => setVisible(true);
  const hideModal = () => setVisible(false);
  const onRefresh = async () => {
    // searchDebouncer({
    //   variables: {
    //     search: searchText,
    //     ...(jobSrchConvertedOnly || jobSrchNotExported
    //       ? {
    //           ...(jobSrchConvertedOnly ? { isConverted: true } : {}),
    //           ...(jobSrchNotExported ? { notExported: true } : {}),
    //           ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
    //         }
    //       : {}),
    //   },
    // });
    refetch({
      notInvoiced: jobSrchNotInvoiced,
      notExported: jobSrchNotExported,
      isConverted: jobSrchConvertedOnly,
      search: searchText,
    });
  };

  const search = (v) => {
    console.log("execute search with :", v);
    if (v && v !== "") searchQuery(v);
  };
  const searchDebouncer = useCallback(
    _.debounce(search, 1000),
    []
  );

  const onChangeSearch = (query) => {
     setSearchText(query);
    searchDebouncer({
      variables: {
        search: query,
        ...(jobSrchConvertedOnly || jobSrchNotExported
          ? {
              ...(jobSrchConvertedOnly ? { isConverted: true } : {}),
              ...(jobSrchNotExported ? { notExported: true } : {}),
              ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
            }
          : {}),
      },
    });
  };

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

  return (
    <>
      <Portal>
        <Modal
          visible={visible}
          onDismiss={hideModal}
          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={searchText}
            />
          </View>
          <FlatList
            refreshControl={
              <RefreshControl refreshing={loading} onRefresh={onRefresh} />
            }
            data={data?.search_jobs}
            keyExtractor={(item) => item.id}
            renderItem={(object) => (
              <List.Item
                onPress={() => {
                  jobSrchOnSetCurrentValue(object.item);
                  // jobSrchOnSetCurrentValueId(object.item.id);
                  hideModal();
                  setSearchText("");
                }}
                left={() => {
                  if (object.item.id !== jobSrchCurrentValue?.id) return null;
                  return (
                    <Ionicons
                      name="ios-checkmark-circle"
                      size={24}
                      color="dodgerblue"
                      style={{ alignSelf: "center" }}
                    />
                  );
                }}
                titleStyle={{
                  ...(object.item.id === jobSrchCurrentValue?.id
                    ? { color: "dodgerblue" }
                    : {}),
                }}
                title={`${
                  object.item.ro_number ? `${object.item.ro_number} ` : ``
                }${object.item.ownr_fn || ""} ${object.item.ownr_ln || ""}${
                  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}
              />
            )}
            ListEmptyComponent={
              <View
                style={{
                  flex: 1,
                  padding: 10,
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <Text>No Data</Text>
              </View>
            }
          />
        </Modal>
      </Portal>
      <Button
        mode="outlined"
        style={{
          margin: 8,
          height: 50,
          borderColor: "gray",
          borderWidth: 0.5,
          borderRadius: 4,
          marginVertical: 4,
          marginHorizontal: 16,
          justifyContent: "center",
        }}
        onPress={showModal}
      >
        {jobSrchCurrentValue?.id
          ? jobSrchCurrentValue?.id === "temp"
            ? t("mediabrowser.labels.temporarystorage")
            : `${
                jobSrchCurrentValue.ro_number
                  ? `${jobSrchCurrentValue.ro_number} - `
                  : ``
              }${jobSrchCurrentValue.ownr_fn || ""} ${
                jobSrchCurrentValue.ownr_ln || ""
              } - ${jobSrchCurrentValue.v_model_yr || ""} ${
                jobSrchCurrentValue.v_make_desc || ""
              } ${jobSrchCurrentValue.v_model_desc || ""}`
          : t("mediabrowser.labels.selectjob")}
      </Button>
    </>
  );
}

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