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

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

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

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