import { CloseCircleOutlined, LoadingOutlined } from "@ant-design/icons";
import { Empty, Select, Space } from "antd";
import { useTranslation } from "react-i18next";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";

export default function ChatTagRoComponent({ roOptions, loading, handleSearch, handleInsertTag, setOpen }) {
  const { t } = useTranslation();

  return (
    <Space>
      <div style={{ width: "15rem" }}>
        <Select
          showSearch={{
            filterOption: false,
            onSearch: handleSearch
          }}
          autoFocus
          popupMatchSelectWidth
          placeholder={t("general.labels.search")}
          onSelect={handleInsertTag}
          notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
          options={roOptions.map((item, idx) => ({
            key: item.id || idx,
            value: item.id || idx,
            label: ` ${item.ro_number || ""} | ${OwnerNameDisplayFunction(item)}`
          }))}
        />
      </div>
      {loading ? <LoadingOutlined /> : null}

      {loading ? <LoadingOutlined /> : <CloseCircleOutlined onClick={() => setOpen(false)} />}
    </Space>
  );
}
