import { useLazyQuery } from "@apollo/client";
import { Select, Space, Tag } from "antd";
import _ from "lodash";
import React, { forwardRef, useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import {
  SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE,
  SEARCH_JOBS_FOR_AUTOCOMPLETE,
} from "../../graphql/jobs.queries";
import AlertComponent from "../alert/alert.component";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
const { Option } = Select;

const JobSearchSelect = (
  {
    disabled,
    convertedOnly = false,
    notInvoiced = false,
    notExported = true,
    clm_no = false,
    ...restProps
  },
  ref
) => {
  const { t } = useTranslation();
  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) => {
    console.log(v);
    if (v && v.variables?.search !== "" && v.variables.search.length >= 2)
      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 } }); // Sometimes results in a no-op. Not sure how to fix.
    }
  }, [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]);

  return (
    <div>
      <Select
        ref={ref}
        disabled={disabled}
        showSearch
        autoFocus
        allowClear
        style={{
          width: "100%",
        }}
        filterOption={false}
        onSearch={handleSearch}
        loading={loading || idLoading}
        //notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
        {...restProps}
      >
        {theOptions
          ? theOptions.map((o) => (
              <Option key={o.id} value={o.id} status={o.status}>
                <Space align="center">
                  <span>
                    {`${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 || ""}`}
                  </span>
                  <Tag>
                    <strong>{o.status}</strong>
                  </Tag>
                </Space>
              </Option>
            ))
          : null}
      </Select>
      {error ? <AlertComponent message={error.message} type="error" /> : null}
      {idError ? (
        <AlertComponent message={idError.message} type="error" />
      ) : null}
    </div>
  );
};
export default forwardRef(JobSearchSelect);