import { HeartOutlined } from "@ant-design/icons";
import { Select, Space, Tag } from "antd";
import React, { forwardRef, useEffect, useState } from "react";
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
const { Option } = Select;

//To be used as a form element only.

const VendorSearchSelect = (
  { value, onChange, options, onSelect, disabled, preferredMake, showPhone },
  ref
) => {
  const [option, setOption] = useState(value);

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

  const favorites =
    preferredMake && options
      ? options.filter(
          (o) =>
            o.favorite.filter(
              (f) => f.toLowerCase() === preferredMake.toLowerCase()
            ).length > 0
        )
      : [];

  return (
    <Select
      ref={ref}
      showSearch
      value={option}
      style={{
        width: "100%",
      }}
      dropdownMatchSelectWidth={false}
      onChange={setOption}
      optionFilterProp="name"
      onSelect={onSelect}
      disabled={disabled || false}
    >
      {favorites
        ? favorites.map((o) => (
            <Option
              key={`favorite-${o.id}`}
              value={o.id}
              name={o.name}
              discount={o.discount}
            >
              <div className="imex-flex-row">
                <div style={{ flex: 1 }}>{o.name}</div>
                <Space style={{ marginLeft: "1rem" }}>
                  <HeartOutlined style={{ color: "red" }} />
                  {o.phone && showPhone && (
                    <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>
                  )}
                  {o.discount && o.discount !== 0 ? (
                    <Tag color="green">{`${o.discount * 100}%`}</Tag>
                  ) : null}
                </Space>
              </div>
            </Option>
          ))
        : null}
      {options
        ? options.map((o) => (
            <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
              <div className="imex-flex-row" style={{ width: "100%" }}>
                <div style={{ flex: 1 }}>{o.name}</div>

                <Space style={{ marginLeft: "1rem" }}>
                  {o.phone && showPhone && (
                    <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>
                  )}
                  {o.discount && o.discount !== 0 ? (
                    <Tag color="green">{`${o.discount * 100}%`}</Tag>
                  ) : null}
                </Space>
              </div>
            </Option>
          ))
        : null}
    </Select>
  );
};
export default forwardRef(VendorSearchSelect);
