import { Select, Space, Tag } from "antd";
import { useTranslation } from "react-i18next";

//To be used as a form element only.

const EmployeeSearchSelect = ({ options, showEmail, ...props }) => {
  const { t } = useTranslation();

  return (
    <Select
      showSearch={{
        optionFilterProp: "search"
      }}
      style={{
        width: 400
      }}
      options={options?.map((o) => ({
        key: o.id,
        value: o.id,
        search: `${o.employee_number}  ${o.first_name} ${o.last_name}`,
        label: (
          <Space size="small">
            {`${o.employee_number ?? ""}  ${o.first_name} ${o.last_name}`}
            <Tag color="green" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
              {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
            </Tag>
            {showEmail && o.user_email ? (
              <Tag color="blue" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
                {o.user_email}
              </Tag>
            ) : null}
          </Space>
        )
      }))}
      {...props}
    />
  );
};
export default EmployeeSearchSelect;
