import { LoadingOutlined } from "@ant-design/icons";
import { useLazyQuery } from "@apollo/client/react";
import { Empty, Select } from "antd";
import _ from "lodash";
import { useEffect, useState } from "react";
import { SEARCH_OWNERS_BY_ID_FOR_AUTOCOMPLETE, SEARCH_OWNERS_FOR_AUTOCOMPLETE } from "../../graphql/owners.queries";
import AlertComponent from "../alert/alert.component";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";

const { Option } = Select;

const OwnerSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
  const [callSearch, { loading, error, data }] = useLazyQuery(SEARCH_OWNERS_FOR_AUTOCOMPLETE);

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

  const executeSearch = (variables) => {
    if (variables?.search !== "" && variables?.search?.length >= 2) callSearch({ variables });
  };

  const debouncedExecuteSearch = _.debounce(executeSearch, 500);

  const handleSearch = (value) => {
    debouncedExecuteSearch({ search: value });
  };

  const [option, setOption] = useState(value);

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

  // useEffect(() => {
  //   if (value !== option && onChange) {
  //     onChange(option);
  //   }
  // }, [value, option, onChange]);

  const handleSelect = (value) => {
    setOption(value);
    if (value !== option && onChange) {
      onChange(value);
    }
  };

  const theOptions = [
    ...(idData?.owners_by_pk ? [idData.owners_by_pk] : []),
    ...(data?.search_owners ? data.search_owners : [])
  ];

  return (
    <div>
      <Select
        ref={ref}
        disabled={disabled}
        showSearch={{
          filterOption: false,
          onSearch: handleSearch
        }}
        autoFocus
        value={option}
        style={{
          width: "100%"
        }}
        //     onChange={setOption}
        onChange={handleSelect}
        onSelect={handleSelect}
        notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
        onBlur={onBlur}
      >
        {theOptions
          ? theOptions.map((o) => (
              <Option key={o.id} value={o.id}>
                {`${OwnerNameDisplayFunction(o)} | ${o.ownr_addr1 || ""} `}
              </Option>
            ))
          : null}
      </Select>
      {idLoading || loading ? <LoadingOutlined /> : null}
      {error ? <AlertComponent title={error.message} type="error" /> : null}
      {idError ? <AlertComponent title={idError.message} type="error" /> : null}
    </div>
  );
};
export default OwnerSearchSelect;