'use strict';

var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var React = require('react');
var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
var Typography = require('@bigbinary/neetoui/Typography');
var Dropdown = require('@bigbinary/neetoui/Dropdown');
var Spinner = require('@bigbinary/neetoui/Spinner');
var ramda = require('ramda');
var reactI18next = require('react-i18next');
var index = require('../index-CiRk4n2b.js');
var Down = require('@bigbinary/neeto-icons/Down');
var Avatar = require('@bigbinary/neetoui/Avatar');
var Tooltip = require('@bigbinary/neetoui/Tooltip');
var jsxRuntime = require('react/jsx-runtime');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var neetoCist = require('@bigbinary/neeto-cist');
require('../inject-css-B6qYtOJe.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('classnames');
require('@bigbinary/neeto-icons/Check');
require('@bigbinary/neeto-icons/Search');
require('@bigbinary/neeto-icons/Close');
require('@bigbinary/neetoui/Input');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
var Typography__default = /*#__PURE__*/_interopDefault(Typography);
var Dropdown__default = /*#__PURE__*/_interopDefault(Dropdown);
var Spinner__default = /*#__PURE__*/_interopDefault(Spinner);
var Down__default = /*#__PURE__*/_interopDefault(Down);
var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
var Tooltip__default = /*#__PURE__*/_interopDefault(Tooltip);
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);

var AssignDropdownTarget = function AssignDropdownTarget(_ref) {
  var _ref$selectedMember = _ref.selectedMember,
    selectedMember = _ref$selectedMember === void 0 ? {} : _ref$selectedMember;
  var _selectedMember$label = selectedMember.label,
    label = _selectedMember$label === void 0 ? "--" : _selectedMember$label,
    _selectedMember$profi = selectedMember.profileImagePath,
    profileImagePath = _selectedMember$profi === void 0 ? "" : _selectedMember$profi;
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: "flex h-10 w-60 cursor-pointer select-none items-center gap-2",
    "data-testid": "assignee-dropdown",
    children: [label !== "--" && /*#__PURE__*/jsxRuntime.jsx(Avatar__default.default, {
      className: "shrink-0",
      user: {
        name: label,
        imageUrl: profileImagePath
      }
    }), /*#__PURE__*/jsxRuntime.jsx(Tooltip__default.default, {
      content: label,
      position: "top",
      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
        className: "truncate xl:block",
        style: "h5",
        weight: "normal",
        children: label
      })
    }), /*#__PURE__*/jsxRuntime.jsx(Down__default.default, {
      className: "shrink-0",
      size: 16
    })]
  });
};
var AssignDropdownTarget$1 = /*#__PURE__*/React.memo(AssignDropdownTarget);

var SEARCH_TYPES = {
  MEMBER: "agent",
  TEAM: "group"};
var TEAM_UNGROUPED = {
  value: "ungrouped"};

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var createMembersDropdownOptions = function createMembersDropdownOptions(_ref) {
  var selectedTeam = _ref.selectedTeam,
    searchTerm = _ref.searchTerm,
    availableTeams = _ref.availableTeams,
    _ref$onlyMembers = _ref.onlyMembers,
    onlyMembers = _ref$onlyMembers === void 0 ? false : _ref$onlyMembers;
  var tempOptions = [];
  var hasSelectedTeam = (selectedTeam === null || selectedTeam === void 0 ? void 0 : selectedTeam.value) && selectedTeam.value !== TEAM_UNGROUPED.value;
  var filteredTeams = availableTeams.filter(function (team) {
    return neetoCist.isNotEmpty(team.filteredMembers);
  });
  var addMembersInTeam = function addMembersInTeam(_ref2) {
    var filteredMembers = _ref2.filteredMembers;
    return filteredMembers.forEach(function (member) {
      tempOptions.push(_objectSpread(_objectSpread({}, member), {}, {
        type: SEARCH_TYPES.MEMBER
      }));
    });
  };
  var containsSearchTerm = ramda.includes(ramda.toLower(searchTerm));
  if (hasSelectedTeam) {
    var selectedTeamData = neetoCist.findBy({
      value: selectedTeam.value
    }, availableTeams);
    if (selectedTeamData) addMembersInTeam(selectedTeamData);
  }
  if (!hasSelectedTeam) {
    filteredTeams.forEach(function (team) {
      tempOptions.push(_objectSpread(_objectSpread({}, team), {}, {
        type: SEARCH_TYPES.TEAM
      }));
      addMembersInTeam(team);
    });
  }
  if (onlyMembers) {
    return neetoCist.removeBy({
      type: "group"
    }, tempOptions);
  }
  return searchTerm ? tempOptions.filter(function (_ref3) {
    var label = _ref3.label,
      _ref3$filteredMembers = _ref3.filteredMembers,
      filteredMembers = _ref3$filteredMembers === void 0 ? [] : _ref3$filteredMembers;
    var teamAndMembersLabels = ramda.map(ramda.toLower, ramda.append(label, ramda.pluck("label", filteredMembers)));
    return ramda.any(containsSearchTerm, teamAndMembersLabels);
  }) : tempOptions;
};

var MembersDropdown = function MembersDropdown(_ref) {
  var _config$closeOnSelect;
  var config = _ref.config;
  var _useState = React.useState(false),
    _useState2 = _slicedToArray__default.default(_useState, 2),
    isDropdownOpen = _useState2[0],
    setIsDropdownOpen = _useState2[1];
  var _useState3 = React.useState(""),
    _useState4 = _slicedToArray__default.default(_useState3, 2),
    searchTerm = _useState4[0],
    setSearchTerm = _useState4[1];
  var dropdownRef = React.useRef(null);
  var _useTranslation = reactI18next.useTranslation(),
    t = _useTranslation.t;
  reactUtils.useOnClickOutside(dropdownRef, function () {
    return setIsDropdownOpen(false);
  });
  var options = React.useMemo(function () {
    return createMembersDropdownOptions({
      searchTerm: searchTerm,
      selectedTeam: config === null || config === void 0 ? void 0 : config.selectedTeam,
      availableTeams: (config === null || config === void 0 ? void 0 : config.availableTeams) || []
    });
  }, [config === null || config === void 0 ? void 0 : config.selectedTeam, searchTerm, config === null || config === void 0 ? void 0 : config.availableTeams]);
  var handleClick = function handleClick(value) {
    setIsDropdownOpen(false);
    config === null || config === void 0 || config.handleUpdate({
      id: (config === null || config === void 0 ? void 0 : config.selectedMember.value) === value ? null : value
    });
  };
  return /*#__PURE__*/jsxRuntime.jsx("div", {
    ref: dropdownRef,
    children: /*#__PURE__*/jsxRuntime.jsx(Dropdown__default.default, {
      className: "w-full",
      closeOnSelect: (_config$closeOnSelect = config === null || config === void 0 ? void 0 : config.closeOnSelect) !== null && _config$closeOnSelect !== void 0 ? _config$closeOnSelect : true,
      isOpen: isDropdownOpen,
      position: "bottom-end",
      ref: dropdownRef,
      targetClassName: "w-full",
      customTarget: function customTarget() {
        return /*#__PURE__*/jsxRuntime.jsx(AssignDropdownTarget$1, {
          selectedMember: config === null || config === void 0 ? void 0 : config.selectedMember
        });
      },
      onClick: function onClick() {
        return setIsDropdownOpen(ramda.not);
      },
      onClose: function onClose() {
        return setSearchTerm("");
      },
      children: /*#__PURE__*/jsxRuntime.jsxs(index.AssignList, {
        children: [/*#__PURE__*/jsxRuntime.jsx(index.AssignList.Search, {
          searchTerm: searchTerm,
          handleClearSearchTerm: function handleClearSearchTerm() {
            return setSearchTerm("");
          },
          placeholder: config === null || config === void 0 ? void 0 : config.searchPlaceholder,
          onChange: function onChange(_ref2) {
            var value = _ref2.target.value;
            return setSearchTerm(value);
          }
        }), config !== null && config !== void 0 && config.isLoading ? /*#__PURE__*/jsxRuntime.jsx("div", {
          className: "flex w-full items-center justify-center py-8",
          children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default.default, {})
        }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "ntm-assign-droplist__list-wrapper flex flex-col px-3",
          children: [options.map(function (_ref3, index$1) {
            var label = _ref3.label,
              value = _ref3.value,
              type = _ref3.type,
              profileImagePath = _ref3.profileImagePath;
            return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
              children: [type === SEARCH_TYPES.TEAM && /*#__PURE__*/jsxRuntime.jsx(index.AssignList.TeamsListItem, {
                active: (config === null || config === void 0 ? void 0 : config.selectedTeam.id) === value,
                teamName: label,
                onClick: function onClick() {
                  return config === null || config === void 0 ? void 0 : config.handleUpdate({
                    id: (config === null || config === void 0 ? void 0 : config.selectedTeam.value) === value ? null : value,
                    isTeam: true
                  });
                }
              }), type === SEARCH_TYPES.MEMBER && /*#__PURE__*/jsxRuntime.jsx(index.AssignList.MembersListItem, {
                active: (config === null || config === void 0 ? void 0 : config.selectedMember.value) === value,
                imageUrl: profileImagePath,
                memberName: label,
                onClick: function onClick() {
                  return handleClick(value);
                }
              })]
            }, index$1);
          }), ramda.isEmpty(options) && /*#__PURE__*/jsxRuntime.jsx("div", {
            className: "flex w-full items-center justify-center p-2",
            children: /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
              "data-testid": "ticket-details-member-no-records-message",
              style: "body2",
              children: t("neetoTeamMembers.helpers.noRecords")
            })
          })]
        }, searchTerm)]
      })
    })
  });
};

module.exports = MembersDropdown;
//# sourceMappingURL=MembersDropdown.js.map
