import { Select } from "antd";
import React, { forwardRef } from "react";
import { useTranslation } from "react-i18next";

//To be used as a form element only.
const { Option } = Select;
const BillLineSearchSelect = (
  { options, disabled, allowRemoved, ...restProps },
  ref
) => {
  const { t } = useTranslation();

  return (
    <Select
      disabled={disabled}
      ref={ref}
      showSearch
      dropdownMatchSelectWidth={false}
      //  optionFilterProp="line_desc"
      filterOption={(inputValue, option) => {
        return (
          (option.line_desc &&
            option.line_desc
              .toLowerCase()
              .includes(inputValue.toLowerCase())) ||
          (option.oem_partno &&
            option.oem_partno
              .toLowerCase()
              .includes(inputValue.toLowerCase())) ||
          (option.alt_partno &&
            option.alt_partno
              .toLowerCase()
              .includes(inputValue.toLowerCase())) ||
          (option.act_price &&
            option.act_price.toString().startsWith(inputValue.toString()))
        );
      }}
      notFoundContent={"Removed."}
      {...restProps}
    >
      <Select.Option key={null} value={"noline"} cost={0} line_desc={""}>
        {t("billlines.labels.other")}
      </Select.Option>
      {options
        ? options.map((item) => (
            <Option
              disabled={allowRemoved ? false : item.removed}
              key={item.id}
              value={item.id}
              cost={item.act_price ? item.act_price : 0}
              part_type={item.part_type}
              line_desc={item.line_desc}
              part_qty={item.part_qty}
              oem_partno={item.oem_partno}
              alt_partno={item.alt_partno}
              act_price={item.act_price}
              style={{
                ...(item.removed ? { textDecoration: "line-through" } : {}),
              }}
            >
              <span>
                {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
                  item.oem_partno ? ` - ${item.oem_partno}` : ""
                }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
              </span>
              <span style={{ float: "right", paddingleft: "1rem" }}>
                {item.act_price
                  ? `$${item.act_price && item.act_price.toFixed(2)}`
                  : ``}
              </span>
            </Option>
          ))
        : null}
    </Select>
  );
};
export default forwardRef(BillLineSearchSelect);
