"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
var _Header = _interopRequireDefault(require("./components/Header"));
var _CheckBox = require("../../../../core/components/CheckBox");
var _Typography = require("../../../../core/components/Typography/Typography");
var _Avatar = _interopRequireDefault(require("../../../components/Avatar"));
var _reactHookForm = require("react-hook-form");
var _useAddMember = _interopRequireDefault(require("./hooks/useAddMember"));
var _SearchInput = _interopRequireDefault(require("../../../components/SearchInput"));
var _MemberChip = require("../../../components/MemberChip/MemberChip");
var _MemberSkeleton = _interopRequireDefault(require("../shared/components/MemberSkeleton"));
var _LimitCharacterSearch = _interopRequireDefault(require("../../../components/LimitCharacterSearch"));
var _NoResult = _interopRequireDefault(require("../../../components/NoResult"));
var _ActionButton = _interopRequireDefault(require("../../../elements/ActionButton"));
var _components = require("../../../components");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const AddMember = () => {
  const {
    collection,
    handleSubmit,
    isDirty,
    control,
    isSubmitting,
    onSubmit,
    isValid,
    styles,
    values
  } = (0, _useAddMember.default)();
  return /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaView, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(_Header.default, null), /*#__PURE__*/React.createElement(_reactHookForm.Controller, {
    control: control,
    name: "search",
    render: ({
      field: {
        value,
        onChange
      }
    }) => /*#__PURE__*/React.createElement(_reactNative.View, {
      style: styles.searchInputContainer
    }, /*#__PURE__*/React.createElement(_SearchInput.default, {
      inputProps: {
        value,
        onChangeText: onChange,
        placeholder: 'Search user'
      }
    }))
  }), /*#__PURE__*/React.createElement(_reactHookForm.Controller, {
    control: control,
    name: "users",
    render: ({
      field: {
        onChange,
        value
      }
    }) => {
      var _values$search, _values$search2, _values$search3, _values$search4;
      return /*#__PURE__*/React.createElement(_react.Fragment, null, value.length > 0 && /*#__PURE__*/React.createElement(_reactNative.View, {
        style: styles.selectedUsersContainer
      }, /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
        horizontal: true,
        showsHorizontalScrollIndicator: false,
        contentContainerStyle: styles.selectedUsersContentContainer
      }, value.map(selectedUser => /*#__PURE__*/React.createElement(_MemberChip.MemberChip, {
        member: selectedUser,
        key: selectedUser.userId,
        onPress: () => onChange(value.filter(cat => cat.userId !== selectedUser.userId))
      })))), collection.isLoading && /*#__PURE__*/React.createElement(_reactNative.View, {
        style: styles.skeletonContainer
      }, /*#__PURE__*/React.createElement(_MemberSkeleton.default, null), /*#__PURE__*/React.createElement(_MemberSkeleton.default, null), /*#__PURE__*/React.createElement(_MemberSkeleton.default, null)), ((_values$search = values.search) === null || _values$search === void 0 ? void 0 : _values$search.length) > 0 && ((_values$search2 = values.search) === null || _values$search2 === void 0 ? void 0 : _values$search2.length) < 3 && !collection.isLoading && !collection.isFetching && /*#__PURE__*/React.createElement(_reactNative.KeyboardAvoidingView, {
        behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : 'height',
        style: styles.keyboardAvoidContainer,
        keyboardVerticalOffset: _reactNative.Platform.OS === 'ios' ? 0 : 24
      }, /*#__PURE__*/React.createElement(_reactNative.View, {
        style: styles.limitCharacterSearchContainer
      }, /*#__PURE__*/React.createElement(_LimitCharacterSearch.default, null))), ((_values$search3 = values.search) === null || _values$search3 === void 0 ? void 0 : _values$search3.length) > 0 && collection.data.length === 0 && !collection.isLoading && !collection.isFetching && /*#__PURE__*/React.createElement(_reactNative.KeyboardAvoidingView, {
        behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : 'height',
        style: styles.keyboardAvoidContainer,
        keyboardVerticalOffset: _reactNative.Platform.OS === 'ios' ? 0 : 24
      }, /*#__PURE__*/React.createElement(_reactNative.View, {
        style: styles.limitCharacterSearchContainer
      }, /*#__PURE__*/React.createElement(_NoResult.default, null))), ((_values$search4 = values.search) === null || _values$search4 === void 0 ? void 0 : _values$search4.length) === 0 && collection.data.length === 0 && !collection.isLoading && !collection.isFetching && /*#__PURE__*/React.createElement(_reactNative.KeyboardAvoidingView, {
        behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : 'height',
        style: styles.keyboardAvoidContainer,
        keyboardVerticalOffset: _reactNative.Platform.OS === 'ios' ? 0 : 24
      }, /*#__PURE__*/React.createElement(_reactNative.View, {
        style: styles.limitCharacterSearchContainer
      }, /*#__PURE__*/React.createElement(_components.Empty.Content, {
        icon: "list",
        title: "No users available"
      }))), /*#__PURE__*/React.createElement(_CheckBox.CheckBox.Group, {
        value: value,
        onChange: onChange,
        extractKey: item => item.userId,
        select: (list, option) => !!list.find(cat => cat.userId === option.userId)
      }, /*#__PURE__*/React.createElement(_reactNative.FlatList, {
        data: collection.data,
        keyExtractor: item => item.userId,
        contentContainerStyle: styles.userContainer,
        onEndReached: () => {
          var _collection$fetchNext;
          if (collection.hasNextPage && !collection.isFetchingNextPage) (_collection$fetchNext = collection.fetchNextPage) === null || _collection$fetchNext === void 0 || _collection$fetchNext.call(collection);
        },
        ListFooterComponent: collection.isFetchingNextPage ? /*#__PURE__*/React.createElement(_reactNative.View, {
          style: styles.skeletonContainer
        }, /*#__PURE__*/React.createElement(_MemberSkeleton.default, null), /*#__PURE__*/React.createElement(_MemberSkeleton.default, null), /*#__PURE__*/React.createElement(_MemberSkeleton.default, null)) : null,
        renderItem: ({
          item
        }) => {
          var _item$avatar;
          return /*#__PURE__*/React.createElement(_CheckBox.CheckBox.Option, {
            value: item,
            style: () => styles.userOption
          }, /*#__PURE__*/React.createElement(_CheckBox.CheckBox.Label, {
            style: styles.userOptionLabel
          }, /*#__PURE__*/React.createElement(_Avatar.default.User, {
            uri: (_item$avatar = item.avatar) === null || _item$avatar === void 0 ? void 0 : _item$avatar.fileUrl,
            imageStyle: styles.userImage,
            userName: item.displayName || item.userId
          }), /*#__PURE__*/React.createElement(_Typography.Typography.BodyBold, {
            numberOfLines: 1,
            ellipsizeMode: "tail",
            style: styles.userName
          }, item.displayName || item.userId)), /*#__PURE__*/React.createElement(_CheckBox.CheckBox.Icon, null));
        }
      })));
    }
  }), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.submitButtonContainer
  }, /*#__PURE__*/React.createElement(_ActionButton.default, {
    label: "Add Member",
    onPress: handleSubmit(onSubmit),
    disabled: !isDirty || !isValid || isSubmitting
  })));
};
var _default = exports.default = AddMember;
//# sourceMappingURL=AddMember.js.map