import { useQuery } from "@apollo/client/react";
import { Select } from "antd";
import { QUERY_TEAMS } from "../../graphql/employee_teams.queries";
import AlertComponent from "../alert/alert.component";

//To be used as a form element only.

const EmployeeTeamSearchSelect = ({ ref, ...props }) => {
  const { loading, error, data } = useQuery(QUERY_TEAMS);

  if (error) return <AlertComponent title={JSON.stringify(error)} type="error" />;
  return (
    <Select
      ref={ref}
      showSearch
      allowClear
      loading={loading}
      style={{
        width: 400
      }}
      options={
        data
          ? data.employee_teams.map((e) => ({
              value: JSON.stringify(e),
              label: e.name
            }))
          : []
      }
      {...props}
    />
  );
};
export default EmployeeTeamSearchSelect;
