import { Select } from "antd";
import { useTranslation } from "react-i18next";
import InstanceRenderMgr from "../../utils/instanceRenderMgr";

const BillLineSearchSelect = ({ options, disabled, allowRemoved, ref, ...restProps }) => {
  const { t } = useTranslation();

  return (
    <Select
      disabled={disabled}
      ref={ref}
      showSearch={{
        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()))
          );
        }
      }}
      popupMatchSelectWidth={true}
      optionLabelProp={"name"}
      //  optionFilterProp="line_desc"
      notFoundContent={"Removed."}
      options={[
        { value: "noline", label: t("billlines.labels.other"), name: t("billlines.labels.other") },
        ...options.map((item) => ({
          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" } : {})
          },
          name: generateLineName(item),
          label: generateLineName(item)
        }))
      ]}
      {...restProps}
    ></Select>
  );
};

function generateLineName(item) {
  return (
    <div style={{ whiteSpace: "normal", wordBreak: "break-word" }}>
      <span>
        {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
          item.oem_partno ? ` - ${item.oem_partno}` : ""
        }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
      </span>
      {InstanceRenderMgr({
        rome: item.act_price === 0 && item.mod_lb_hrs > 0 && (
          <span style={{ float: "right", paddingleft: "1rem" }}>{`${item.mod_lb_hrs} units`}</span>
        )
      })}
      <span style={{ float: "right", paddingleft: "1rem" }}>
        {item.act_price ? `$${item.act_price && item.act_price.toFixed(2)}` : ``}
      </span>
    </div>
  );
}
export default BillLineSearchSelect;