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%"
      }}
      labelRender={({ label, value, ...rest }) => {
        if (!value || !options) return label;
        const discount = options?.find((o) => o.id === value)?.discount;
        return (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              flexWrap: "nowrap",
              width: "100%"
            }}
          >
            <div
              style={{
                flex: 1,
                minWidth: 0,
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap"
              }}
            >
              {label}
            </div>
            {discount && discount !== 0 ? <Tag color="green">{`${discount * 100}%`}</Tag> : null}
          </div>
        );
      }}
      popupMatchSelectWidth={false}
      onChange={setOption}
      optionFilterProp="name"
      onSelect={onSelect}
      disabled={disabled || false}
      optionLabelProp="name"
    >
      {favorites &&
        favorites.map((o) => (
          <Option key={`favorite-${o.id}`} value={o.id} name={o.name} discount={o.discount}>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                flexWrap: "nowrap",
                width: "100%"
              }}
            >
              <div
                style={{
                  flex: 1,
                  minWidth: 0,
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap"
                }}
              >
                {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>
        ))}
      {options &&
        options.map((o) => (
          <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                flexWrap: "nowrap",
                width: "100%"
              }}
            >
              <div
                style={{
                  flex: 1,
                  minWidth: 0,
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap"
                }}
              >
                {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>
        ))}
    </Select>
  );
};
export default forwardRef(VendorSearchSelect);