import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React from 'react';
import { connect } from '../../../redux/store';
import { compose, lifecycle, withHandlers, withProps, withState } from 'recompose';
import { Modal, ModalBody, ModalFooter, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { List } from 'immutable';
import { AttributeSelectors, InfoMessage, StateListWrapper } from '@kineticdata/bundle-common';
import { actions } from '../../../redux/modules/techBarApp';
import { I18n } from '@kineticdata/react';

var TechBarDisplayMembersComponent = function TechBarDisplayMembersComponent(_ref) {
  var hasManagerAccess = _ref.hasManagerAccess,
      team = _ref.team,
      error = _ref.error,
      fetchDisplayTeamRequest = _ref.fetchDisplayTeamRequest,
      techBarName = _ref.techBarName,
      openDropdown = _ref.openDropdown,
      toggleDropdown = _ref.toggleDropdown,
      openModal = _ref.openModal,
      toggleModal = _ref.toggleModal,
      handleAdd = _ref.handleAdd,
      usernames = _ref.usernames,
      setUsernames = _ref.setUsernames,
      user = _ref.user,
      setUser = _ref.setUser,
      processAdd = _ref.processAdd,
      openConfirm = _ref.openConfirm,
      toggleConfirm = _ref.toggleConfirm,
      handleRemove = _ref.handleRemove,
      processRemove = _ref.processRemove;
  return /*#__PURE__*/React.createElement("div", {
    className: "list-wrapper list-wrapper--users"
  }, /*#__PURE__*/React.createElement(StateListWrapper, {
    data: team ? team.memberships : null,
    loading: !team,
    error: error,
    emptyTitle: "No Front Desk Users Found",
    emptyMessage: "Front Desk Users are the users who have access to the check-in, feedback, and overhead display pages.",
    emptyActions: hasManagerAccess ? [{
      label: 'Add User',
      onClick: handleAdd
    }] : undefined,
    errorTitle: "The team for front desk users is being created.",
    errorMessage: "This may take a few minutes.",
    errorActions: [{
      icon: 'fa-refresh',
      onClick: function onClick() {
        fetchDisplayTeamRequest({
          techBarName: techBarName
        });
      }
    }],
    components: {
      ErrorMessage: InfoMessage
    }
  }, function (data) {
    return /*#__PURE__*/React.createElement("table", {
      className: "table table-sm table-striped table-users table--settings"
    }, /*#__PURE__*/React.createElement("thead", {
      className: "header"
    }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
      scope: "col"
    }, /*#__PURE__*/React.createElement(I18n, null, "Display Name")), /*#__PURE__*/React.createElement("th", {
      scope: "col"
    }, /*#__PURE__*/React.createElement(I18n, null, "Username")), hasManagerAccess && /*#__PURE__*/React.createElement("th", {
      className: "text-right",
      width: "1%"
    }, /*#__PURE__*/React.createElement("button", {
      className: "btn btn-primary",
      onClick: handleAdd
    }, /*#__PURE__*/React.createElement(I18n, null, "Add User"))))), /*#__PURE__*/React.createElement("tbody", null, List(data).sortBy(function (a) {
      return a.user.displayName;
    }).map(function (displayUser) {
      return /*#__PURE__*/React.createElement("tr", {
        key: displayUser.user.username
      }, /*#__PURE__*/React.createElement("td", null, displayUser.user.displayName), /*#__PURE__*/React.createElement("td", null, displayUser.user.username), hasManagerAccess && /*#__PURE__*/React.createElement("td", {
        className: "text-right"
      }, /*#__PURE__*/React.createElement(Dropdown, {
        toggle: toggleDropdown(displayUser.user.username),
        isOpen: openDropdown === displayUser.user.username
      }, /*#__PURE__*/React.createElement(DropdownToggle, {
        color: "link",
        className: "btn-sm"
      }, /*#__PURE__*/React.createElement("span", {
        className: "fa fa-ellipsis-h fa-2x"
      })), /*#__PURE__*/React.createElement(DropdownMenu, {
        right: true
      }, /*#__PURE__*/React.createElement(DropdownItem, {
        onClick: handleRemove(displayUser.user.username)
      }, /*#__PURE__*/React.createElement(I18n, null, "Remove"))))));
    })));
  }), openModal && /*#__PURE__*/React.createElement(Modal, {
    isOpen: !!openModal,
    toggle: toggleModal
  }, /*#__PURE__*/React.createElement("div", {
    className: "modal-header"
  }, /*#__PURE__*/React.createElement("h4", {
    className: "modal-title"
  }, /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "btn btn-link",
    onClick: toggleModal
  }, /*#__PURE__*/React.createElement(I18n, null, "Cancel")), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n, null, "New User")))), /*#__PURE__*/React.createElement(ModalBody, {
    className: "modal-body--padding"
  }, !user && /*#__PURE__*/React.createElement("div", {
    className: "form overflow-visible"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    htmlFor: "add-user-select"
  }, /*#__PURE__*/React.createElement(I18n, null, "Select Users to Add to Front Desk")), /*#__PURE__*/React.createElement(AttributeSelectors.PeopleSelect, {
    id: "walkin-account-select",
    users: true,
    value: usernames,
    valueMapper: function valueMapper(value) {
      return value.user.username;
    },
    onChange: function onChange(e) {
      return setUsernames(e.target.value);
    },
    props: {
      minLength: 3
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group text-center"
  }, /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "btn btn-link",
    onClick: function onClick() {
      setUser({
        firstName: '',
        lastName: '',
        email: ''
      });
      setUsernames([]);
    }
  }, /*#__PURE__*/React.createElement(I18n, null, "or Create New User")))), user && /*#__PURE__*/React.createElement("div", {
    className: "form"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    htmlFor: "first-name-input required"
  }, /*#__PURE__*/React.createElement(I18n, null, "First Name")), /*#__PURE__*/React.createElement("input", {
    type: "text",
    className: "form-control",
    value: user.firstName,
    onChange: function onChange(e) {
      return setUser(_objectSpread(_objectSpread({}, user), {}, {
        firstName: e.target.value
      }));
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    htmlFor: "last-name-input required"
  }, /*#__PURE__*/React.createElement(I18n, null, "Last Name")), /*#__PURE__*/React.createElement("input", {
    type: "text",
    className: "form-control",
    value: user.lastName,
    onChange: function onChange(e) {
      return setUser(_objectSpread(_objectSpread({}, user), {}, {
        lastName: e.target.value
      }));
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    htmlFor: "email-input required"
  }, /*#__PURE__*/React.createElement(I18n, null, "Email Address")), /*#__PURE__*/React.createElement("input", {
    type: "text",
    className: "form-control",
    value: user.email,
    onChange: function onChange(e) {
      return setUser(_objectSpread(_objectSpread({}, user), {}, {
        email: e.target.value
      }));
    }
  })))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "btn btn-primary",
    onClick: processAdd,
    disabled: user && (!user.firstName || !user.lastName || !user.email) || !user && usernames.length === 0
  }, /*#__PURE__*/React.createElement(I18n, null, "Add")))), openConfirm && /*#__PURE__*/React.createElement(Modal, {
    isOpen: !!openConfirm,
    toggle: toggleConfirm
  }, /*#__PURE__*/React.createElement("div", {
    className: "modal-header"
  }, /*#__PURE__*/React.createElement("h4", {
    className: "modal-title"
  }, /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "btn btn-link",
    onClick: toggleConfirm
  }, /*#__PURE__*/React.createElement(I18n, null, "Cancel")), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n, null, "Confirm Remove")))), /*#__PURE__*/React.createElement(ModalBody, {
    className: "modal-body--padding"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n, null, "Are you sure you want to remove the user"), ' '), /*#__PURE__*/React.createElement("strong", null, openConfirm), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n, null, "?")))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "btn btn-primary",
    onClick: processRemove(openConfirm)
  }, /*#__PURE__*/React.createElement(I18n, null, "Remove")))));
};

export var mapStateToProps = function mapStateToProps(state) {
  return {
    error: state.techBarApp.displayTeamError,
    team: state.techBarApp.displayTeam
  };
};
export var mapDispatchToProps = {
  addDisplayTeamUser: actions.createDisplayTeamMembershipRequest,
  removeDisplayTeamUser: actions.deleteDisplayTeamMembershipRequest,
  createUserAsDisplayTeamUser: actions.createDisplayTeamUserRequest,
  fetchDisplayTeamRequest: actions.fetchDisplayTeamRequest
};

var toggleDropdown = function toggleDropdown(_ref2) {
  var setOpenDropdown = _ref2.setOpenDropdown,
      openDropdown = _ref2.openDropdown;
  return function (dropdownSlug) {
    return function () {
      return setOpenDropdown(dropdownSlug === openDropdown ? false : dropdownSlug);
    };
  };
};

var handleAdd = function handleAdd(_ref3) {
  var setOpenModal = _ref3.setOpenModal;
  return function () {
    return setOpenModal(true);
  };
};

var toggleModal = function toggleModal(_ref4) {
  var setOpenModal = _ref4.setOpenModal,
      setUsernames = _ref4.setUsernames,
      setUser = _ref4.setUser;
  return function () {
    setOpenModal(false);
    setUsernames([]);
    setUser(null);
  };
};

var processAdd = function processAdd(_ref5) {
  var addDisplayTeamUser = _ref5.addDisplayTeamUser,
      createUserAsDisplayTeamUser = _ref5.createUserAsDisplayTeamUser,
      setOpenModal = _ref5.setOpenModal,
      techBarName = _ref5.techBarName,
      usernames = _ref5.usernames,
      setUsernames = _ref5.setUsernames,
      user = _ref5.user,
      setUser = _ref5.setUser;
  return function () {
    user ? createUserAsDisplayTeamUser({
      user: user,
      techBarName: techBarName
    }) : addDisplayTeamUser({
      usernames: usernames,
      techBarName: techBarName
    });
    setOpenModal(false);
    setUsernames([]);
    setUser(null);
  };
};

var handleRemove = function handleRemove(_ref6) {
  var setOpenConfirm = _ref6.setOpenConfirm;
  return function (id) {
    return function () {
      return setOpenConfirm(id);
    };
  };
};

var toggleConfirm = function toggleConfirm(_ref7) {
  var setOpenConfirm = _ref7.setOpenConfirm;
  return function () {
    return setOpenConfirm(false);
  };
};

var processRemove = function processRemove(_ref8) {
  var removeDisplayTeamUser = _ref8.removeDisplayTeamUser,
      setOpenConfirm = _ref8.setOpenConfirm,
      techBarName = _ref8.techBarName;
  return function (username) {
    return function () {
      removeDisplayTeamUser({
        username: username,
        techBarName: techBarName
      });
      setOpenConfirm(false);
    };
  };
};

export var TechBarDisplayMembers = compose(connect(mapStateToProps, mapDispatchToProps), withProps(function (_ref9) {
  var techBar = _ref9.techBar;
  return {
    techBarName: techBar ? techBar.values['Name'] : ''
  };
}), withState('openDropdown', 'setOpenDropdown', false), withState('openModal', 'setOpenModal', false), withState('usernames', 'setUsernames', []), withState('user', 'setUser', null), withState('openConfirm', 'setOpenConfirm', false), withHandlers({
  toggleDropdown: toggleDropdown,
  handleAdd: handleAdd,
  toggleModal: toggleModal,
  processAdd: processAdd,
  handleRemove: handleRemove,
  toggleConfirm: toggleConfirm,
  processRemove: processRemove
}), lifecycle({
  componentDidMount: function componentDidMount() {
    this.props.fetchDisplayTeamRequest({
      techBarName: this.props.techBarName
    });
  }
}))(TechBarDisplayMembersComponent);