import { useLazyQuery } from "@apollo/client";
import React, { forwardRef, useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import _ from "lodash";

import {
  SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE,
  SEARCH_JOBS_FOR_AUTOCOMPLETE,
} from "../../graphql/jobs.queries";
import { StyleSheet, Text, View } from "react-native";
import { Dropdown } from "react-native-element-dropdown";
import { connect } from "react-redux";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";

export function JobSearchSelect(
  convertedOnly = false,
  notInvoiced = false,
  notExported = true,
  clm_no = false,
  ...restProps
) {
  const { t } = useTranslation();
  const [selectorData, setSelectorData] = useState([]);
  const [selectedvalue, setSelectedValue] = useState(null);
  const [isFocus, setIsFocus] = useState(false);

  const [theOptions, setTheOptions] = useState([]);

  const [callSearch, { loading, error, data }] = useLazyQuery(
    SEARCH_JOBS_FOR_AUTOCOMPLETE,
    {}
  );
  const [callIdSearch, { loading: idLoading, error: idError, data: idData }] =
    useLazyQuery(SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE);

  const executeSearch = (v) => {
    if (v && v !== "") callSearch(v);
  };
  const debouncedExecuteSearch = _.debounce(executeSearch, 500);

  const handleSearch = (value) => {
    debouncedExecuteSearch({
      variables: {
        search: value,
        ...(convertedOnly || notExported
          ? {
              ...(convertedOnly ? { isConverted: true } : {}),
              ...(notExported ? { notExported: true } : {}),
              ...(notInvoiced ? { notInvoiced: true } : {}),
            }
          : {}),
      },
    });
  };

  useEffect(() => {
    if (restProps.value) {
      callIdSearch({ variables: { id: restProps.value } });
    }
  }, [restProps.value, callIdSearch]);

  useEffect(() => {
    setTheOptions(
      _.uniqBy(
        [
          ...(idData && idData.jobs_by_pk ? [idData.jobs_by_pk] : []),
          ...(data && data.search_jobs ? data.search_jobs : []),
        ],
        "id"
      )
    );
  }, [data, idData]);

  useEffect(() => {
    var count = Object.keys(theOptions).length;
    let selectDataArray = [];
    for (let i = 0; i < count; i++) {
     // let o = theOptions[i];
      selectDataArray.push({
        value: theOptions[i].id,
        label:  theOptions[i].ro_number,
        // `${clm_no && o.clm_no ? `${o.clm_no} | ` : ""}${
        //   o.ro_number || t("general.labels.na")
        // } | ${OwnerNameDisplayFunction(o)} | ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${
        //   o.v_model_desc || ""
        // }`,
        
      });
    }
    setSelectorData(selectDataArray);
  }, [theOptions]);
  return (
    <View style={styles.container}>
      <Dropdown
        style={[styles.dropdown, isFocus && { borderColor: "blue" }]}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        data={selectorData}
        search
        maxHeight={300}
        labelField="label"
        valueField="value"
        placeholder={!isFocus ? "Job to Post Against" : "..."}
        searchPlaceholder="Search..."
        value={selectedvalue}
        onFocus={() => setIsFocus(true)}
        onBlur={() => setIsFocus(false)}
        onChange={(item) => {
          console.log(item);
          setSelectedValue(item.value);
          setIsFocus(false);
        }}
        onChangeText={(search) => {
          handleSearch(search);
        }}
      />
      {/* {theOptions ? console.log(theOptions): null} */}
    </View>
  );
}

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

const styles = StyleSheet.create({
  container: {
    padding: 16,
    justifyContent: "center",
    alignContent: "center",
  },
  dropdown: {
    height: 50,
    borderColor: "gray",
    borderWidth: 0.5,
    borderRadius: 8,
    paddingHorizontal: 8,
  },
  icon: {
    marginRight: 5,
  },
  label: {
    position: "absolute",
    backgroundColor: "white",
    left: 22,
    top: 8,
    zIndex: 999,
    paddingHorizontal: 8,
    fontSize: 14,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
});