import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useState, useMemo } from 'react';
import { Typography, DropdownMenu, Spinner } from '@bigbinary/neeto-atoms';
import { isEmpty } from 'ramda';
import { useTranslation } from 'react-i18next';
import { ChevronDown } from 'lucide-react';
import { jsxs, jsx } from 'react/jsx-runtime';
import { A as AssignList } from '../index-BMb0DElQ.js';
import '@babel/runtime/helpers/defineProperty';
import '@babel/runtime/helpers/objectWithoutProperties';

var AssignDropdownTarget = function AssignDropdownTarget(_ref) {
  var _config$selectedTeam;
  var config = _ref.config;
  return /*#__PURE__*/jsxs("div", {
    className: "flex h-10 cursor-pointer select-none items-center gap-2",
    "data-testid": "group-dropdown",
    children: [/*#__PURE__*/jsx(Typography, {
      variant: "h5",
      weight: "normal",
      children: (config === null || config === void 0 || (_config$selectedTeam = config.selectedTeam) === null || _config$selectedTeam === void 0 ? void 0 : _config$selectedTeam.label) || "--"
    }), /*#__PURE__*/jsx(ChevronDown, {
      size: 16
    })]
  });
};

var TeamsDropdown = function TeamsDropdown(_ref) {
  var _config$closeOnSelect;
  var config = _ref.config;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useState = useState(""),
    _useState2 = _slicedToArray(_useState, 2),
    searchTerm = _useState2[0],
    setSearchTerm = _useState2[1];
  var trimmedSearchTerm = searchTerm.trim();
  var teamSelectOptions = useMemo(function () {
    var _config$availableTeam;
    return config === null || config === void 0 || (_config$availableTeam = config.availableTeams) === null || _config$availableTeam === void 0 ? void 0 : _config$availableTeam.filter(function (_ref2) {
      var label = _ref2.label;
      return label === null || label === void 0 ? void 0 : label.toLowerCase().includes(trimmedSearchTerm.toLowerCase());
    });
  }, [config === null || config === void 0 ? void 0 : config.availableTeams, trimmedSearchTerm]);
  var handleTeamClick = function handleTeamClick(value) {
    config === null || config === void 0 || config.handleChange({
      id: (config === null || config === void 0 ? void 0 : config.selectedTeam.value) === value ? null : value,
      isTeam: true
    });
  };
  return /*#__PURE__*/jsx(DropdownMenu, {
    closeOnSelect: (_config$closeOnSelect = config === null || config === void 0 ? void 0 : config.closeOnSelect) !== null && _config$closeOnSelect !== void 0 ? _config$closeOnSelect : true,
    dropdownProps: {
      className: "w-64 p-0"
    },
    position: "bottom-end",
    customTarget: /*#__PURE__*/jsx("div", {
      className: "w-full",
      children: /*#__PURE__*/jsx(AssignDropdownTarget, {
        config: config
      })
    }),
    onClose: function onClose() {
      return setSearchTerm("");
    },
    children: /*#__PURE__*/jsxs(AssignList, {
      children: [/*#__PURE__*/jsx(AssignList.Search, {
        searchTerm: searchTerm,
        handleClearSearchTerm: function handleClearSearchTerm() {
          return setSearchTerm("");
        },
        placeholder: (config === null || config === void 0 ? void 0 : config.searchPlaceholder) || t("neetoTeamMembers.placeholders.search"),
        onChange: function onChange(_ref3) {
          var value = _ref3.target.value;
          return setSearchTerm(value);
        }
      }), config !== null && config !== void 0 && config.isLoading ? /*#__PURE__*/jsx("div", {
        className: "flex w-full items-center justify-center py-8",
        children: /*#__PURE__*/jsx(Spinner, {})
      }) : /*#__PURE__*/jsx("div", {
        className: "flex max-h-56 flex-col overflow-y-auto px-3",
        children: isEmpty(teamSelectOptions) ? /*#__PURE__*/jsx("div", {
          className: "flex w-full items-center justify-center p-2",
          children: /*#__PURE__*/jsx(Typography, {
            variant: "body2",
            children: t("neetoTeamMembers.helpers.noRecords")
          })
        }) : teamSelectOptions === null || teamSelectOptions === void 0 ? void 0 : teamSelectOptions.map(function (_ref4) {
          var _config$selectedTeam;
          var label = _ref4.label,
            value = _ref4.value;
          return /*#__PURE__*/jsx(AssignList.TeamsListItem, {
            teamName: label,
            active: (config === null || config === void 0 ? void 0 : config.selectedTeam.value) === value || !(config !== null && config !== void 0 && (_config$selectedTeam = config.selectedTeam) !== null && _config$selectedTeam !== void 0 && _config$selectedTeam.value) && value === "ungrouped",
            onClick: function onClick() {
              return handleTeamClick(value);
            }
          }, value);
        })
      })]
    })
  });
};

export { TeamsDropdown as default };
//# sourceMappingURL=TeamsDropdown.js.map
