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

const useIsMounted = () => {
  const isMounted = useRef(false);
  useEffect(() => {
    isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
  }, []);

  return isMounted.current;
};

export function JobSearchAndSelectModal(props) {
  const { t } = useTranslation();
  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: t("selectjobid.labels.noselection") };
  const jobSrchOnSetCurrentValue =
    props?.onSetCurrentValue !== undefined
      ? props.onSetCurrentValue
      : (e) => {
          console.info("onSetCurrentValue was called", e);
        };

  const [visible, setVisible] = React.useState(false);
  const [searchText, setSearchText] = React.useState("");

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

  const [searchQuery, { loading, error, data, refetch }] = useLazyQuery(
    SEARCH_JOBS_FOR_AUTOCOMPLETE,
    { fetchPolicy: "cache-and-network" }
  );
  if (error) return <ErrorDisplay errorMessage={error.message} />;
  const onRefresh = async () => {
    refetch({
      notInvoiced: jobSrchNotInvoiced,
      notExported: jobSrchNotExported,
      isConverted: jobSrchConvertedOnly,
      search: searchText,
    });
  };
  const search = (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 inputSearch = useRef(null);
  const isMounted = useIsMounted();
  const setFocus = useCallback(() => {
    if (inputSearch.current) {
      inputSearch.current.focus();
    }
  }, []);

  useEffect(() => {
    setTimeout(() => {
      if (visible) {
        setFocus();
      }
    }, 300);
  }, [visible, isMounted]);

  return (
    <>
      <KeyboardAvoidingView>
        <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}
                ref={inputSearch}
                placeholder={t("selectjobid.labels.searchplaceholder")}
              />
            </View>
            <FlatList
              refreshControl={
                <RefreshControl refreshing={loading} onRefresh={onRefresh} />
              }
              data={data?.search_jobs}
              keyExtractor={(item) => item.id}
              renderItem={(object) => (
                <List.Item
                  onPress={() => {
                    jobSrchOnSetCurrentValue(object.item);
                    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>{t("selectjobid.labels.nodata")}</Text>
                </View>
              }
            />
          </Modal>
        </Portal>
      </KeyboardAvoidingView>

      <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("selectjobid.labels.noselection")
            : `${
                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("selectjobid.labels.placeholder")}
      </Button>
    </>
  );
}

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