import { useLazyQuery } from "@apollo/client";
import { AutoComplete, Divider, Input, Space } from "antd";
import _ from "lodash";
import React from "react";
import { useTranslation } from "react-i18next";
import { Link, useHistory } from "react-router-dom";
import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
import AlertComponent from "../alert/alert.component";
import OwnerNameDisplay, {
  OwnerNameDisplayFunction,
} from "../owner-name-display/owner-name-display.component";
import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
export default function GlobalSearch() {
  const { t } = useTranslation();
  const history = useHistory();
  const [callSearch, { loading, error, data }] =
    useLazyQuery(GLOBAL_SEARCH_QUERY);

  const executeSearch = (v) => {
    if (
      v &&
      v.variables.search &&
      v.variables.search !== "" &&
      v.variables.search.length >= 3
    )
      callSearch(v);
  };
  const debouncedExecuteSearch = _.debounce(executeSearch, 750);

  const handleSearch = (value) => {
    console.log("Handle Search");
    debouncedExecuteSearch({ variables: { search: value } });
  };

  const renderTitle = (title) => {
    return <span>{title}</span>;
  };

  const options = data
    ? [
        {
          label: renderTitle(t("menus.header.search.jobs")),
          options: data.search_jobs.map((job) => {
            return {
              key: job.id,
              value: job.ro_number || "N/A",
              label: (
                <Link to={`/manage/jobs/${job.id}`}>
                  <Space size="small" split={<Divider type="vertical" />}>
                    <strong>{job.ro_number || t("general.labels.na")}</strong>
                    <span>{`${job.status || ""}`}</span>
                    <span>
                      <OwnerNameDisplay ownerObject={job} />
                    </span>
                    <span>{`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
                      job.v_model_desc || ""
                    }`}</span>
                    <span>{`${job.clm_no || ""}`}</span>
                  </Space>
                </Link>
              ),
            };
          }),
        },
        {
          label: renderTitle(t("menus.header.search.owners")),
          options: data.search_owners.map((owner) => {
            return {
              key: owner.id,
              value: OwnerNameDisplayFunction(owner),
              label: (
                <Link to={`/manage/owners/${owner.id}`}>
                  <Space size="small" split={<Divider type="vertical" />} wrap>
                    <span>
                      <OwnerNameDisplay ownerObject={owner} />
                    </span>
                    <PhoneNumberFormatter>
                      {owner.ownr_ph1}
                    </PhoneNumberFormatter>
                    <PhoneNumberFormatter>
                      {owner.ownr_ph2}
                    </PhoneNumberFormatter>
                  </Space>
                </Link>
              ),
            };
          }),
        },
        {
          label: renderTitle(t("menus.header.search.vehicles")),
          options: data.search_vehicles.map((vehicle) => {
            return {
              key: vehicle.id,
              value: `${vehicle.v_model_yr || ""} ${
                vehicle.v_make_desc || ""
              } ${vehicle.v_model_desc || ""}`,
              label: (
                <Link to={`/manage/vehicles/${vehicle.id}`}>
                  <Space size="small" split={<Divider type="vertical" />}>
                    <span>
                      {`${vehicle.v_model_yr || ""} ${
                        vehicle.v_make_desc || ""
                      } ${vehicle.v_model_desc || ""}`}
                    </span>
                    <span>{vehicle.plate_no || ""}</span>
                    <span>
                      <VehicleVinDisplay>
                        {vehicle.v_vin || ""}
                      </VehicleVinDisplay>
                    </span>
                  </Space>
                </Link>
              ),
            };
          }),
        },
        {
          label: renderTitle(t("menus.header.search.payments")),
          options: data.search_payments.map((payment) => {
            return {
              key: payment.id,
              value: `${payment.job.ro_number} ${payment.payer} ${payment.amount}`,
              label: (
                <Link to={`/manage/jobs/${payment.job.id}`}>
                  <Space size="small" split={<Divider type="vertical" />}>
                    <span>{payment.paymentnum}</span>
                    <span>{payment.job.ro_number}</span>
                    <span>{payment.memo || ""}</span>
                    <span>{payment.amount || ""}</span>
                    <span>{payment.transactionid || ""}</span>
                  </Space>
                </Link>
              ),
            };
          }),
        },
        {
          label: renderTitle(t("menus.header.search.bills")),
          options: data.search_bills.map((bill) => {
            return {
              key: bill.id,
              value: `${bill.invoice_number} - ${bill.vendor.name}`,
              label: (
                <Link to={`/manage/bills?billid=${bill.id}`}>
                  <Space size="small" split={<Divider type="vertical" />}>
                    <span>{bill.invoice_number}</span>
                    <span>{bill.vendor.name}</span>
                    <span>{bill.date}</span>
                  </Space>
                </Link>
              ),
            };
          }),
        },
        {
          label: renderTitle(t("menus.header.search.phonebook")),
          options: data.search_phonebook.map((pb) => {
            return {
              key: pb.id,
              value: `${pb.firstname || ""} ${pb.lastname || ""} ${
                pb.company || ""
              }`,
              label: (
                <Link to={`/manage/phonebook?phonebookentry=${pb.id}`}>
                  <Space size="small" split={<Divider type="vertical" />}>
                    <span>{`${pb.firstname || ""} ${pb.lastname || ""} ${
                      pb.company || ""
                    }`}</span>
                    <PhoneNumberFormatter>{pb.phone1}</PhoneNumberFormatter>
                    <span>{pb.email}</span>
                  </Space>
                </Link>
              ),
            };
          }),
        },
      ]
    : [];

  if (error) return <AlertComponent message={error.message} type="error" />;

  return (
    <AutoComplete
      options={options}
      onSearch={handleSearch}
      defaultActiveFirstOption
      onSelect={(val, opt) => {
        history.push(opt.label.props.to);
      }}
    >
      <Input.Search
        size="large"
        placeholder={t("general.labels.globalsearch")}
        enterButton
        allowClear
        loading={loading}
      />
    </AutoComplete>
  );
}