import { Fragment } from 'react';
import { FlatList, KeyboardAvoidingView, Platform, ScrollView, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Header from './components/Header';
import { CheckBox } from '../../../../core/components/CheckBox';
import { Typography } from '../../../../core/components/Typography/Typography';
import Avatar from '../../../components/Avatar';
import { Controller } from 'react-hook-form';
import useAddMember from './hooks/useAddMember';
import SearchInput from '../../../components/SearchInput';
import { MemberChip } from '../../../components/MemberChip/MemberChip';
import MemberSkeleton from '../shared/components/MemberSkeleton';
import LimitCharacterSearch from '../../../components/LimitCharacterSearch';
import NoResult from '../../../components/NoResult';
import ActionButton from '../../../elements/ActionButton';
import { Empty } from '../../../components';
const AddMember = () => {
  const {
    collection,
    handleSubmit,
    isDirty,
    control,
    isSubmitting,
    onSubmit,
    isValid,
    styles,
    values
  } = useAddMember();
  return /*#__PURE__*/React.createElement(SafeAreaView, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "search",
    render: ({
      field: {
        value,
        onChange
      }
    }) => /*#__PURE__*/React.createElement(View, {
      style: styles.searchInputContainer
    }, /*#__PURE__*/React.createElement(SearchInput, {
      inputProps: {
        value,
        onChangeText: onChange,
        placeholder: 'Search user'
      }
    }))
  }), /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "users",
    render: ({
      field: {
        onChange,
        value
      }
    }) => {
      var _values$search, _values$search2, _values$search3, _values$search4;
      return /*#__PURE__*/React.createElement(Fragment, null, value.length > 0 && /*#__PURE__*/React.createElement(View, {
        style: styles.selectedUsersContainer
      }, /*#__PURE__*/React.createElement(ScrollView, {
        horizontal: true,
        showsHorizontalScrollIndicator: false,
        contentContainerStyle: styles.selectedUsersContentContainer
      }, value.map(selectedUser => /*#__PURE__*/React.createElement(MemberChip, {
        member: selectedUser,
        key: selectedUser.userId,
        onPress: () => onChange(value.filter(cat => cat.userId !== selectedUser.userId))
      })))), collection.isLoading && /*#__PURE__*/React.createElement(View, {
        style: styles.skeletonContainer
      }, /*#__PURE__*/React.createElement(MemberSkeleton, null), /*#__PURE__*/React.createElement(MemberSkeleton, null), /*#__PURE__*/React.createElement(MemberSkeleton, 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(KeyboardAvoidingView, {
        behavior: Platform.OS === 'ios' ? 'padding' : 'height',
        style: styles.keyboardAvoidContainer,
        keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : 24
      }, /*#__PURE__*/React.createElement(View, {
        style: styles.limitCharacterSearchContainer
      }, /*#__PURE__*/React.createElement(LimitCharacterSearch, 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(KeyboardAvoidingView, {
        behavior: Platform.OS === 'ios' ? 'padding' : 'height',
        style: styles.keyboardAvoidContainer,
        keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : 24
      }, /*#__PURE__*/React.createElement(View, {
        style: styles.limitCharacterSearchContainer
      }, /*#__PURE__*/React.createElement(NoResult, 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(KeyboardAvoidingView, {
        behavior: Platform.OS === 'ios' ? 'padding' : 'height',
        style: styles.keyboardAvoidContainer,
        keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : 24
      }, /*#__PURE__*/React.createElement(View, {
        style: styles.limitCharacterSearchContainer
      }, /*#__PURE__*/React.createElement(Empty.Content, {
        icon: "list",
        title: "No users available"
      }))), /*#__PURE__*/React.createElement(CheckBox.Group, {
        value: value,
        onChange: onChange,
        extractKey: item => item.userId,
        select: (list, option) => !!list.find(cat => cat.userId === option.userId)
      }, /*#__PURE__*/React.createElement(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(View, {
          style: styles.skeletonContainer
        }, /*#__PURE__*/React.createElement(MemberSkeleton, null), /*#__PURE__*/React.createElement(MemberSkeleton, null), /*#__PURE__*/React.createElement(MemberSkeleton, null)) : null,
        renderItem: ({
          item
        }) => {
          var _item$avatar;
          return /*#__PURE__*/React.createElement(CheckBox.Option, {
            value: item,
            style: () => styles.userOption
          }, /*#__PURE__*/React.createElement(CheckBox.Label, {
            style: styles.userOptionLabel
          }, /*#__PURE__*/React.createElement(Avatar.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.BodyBold, {
            numberOfLines: 1,
            ellipsizeMode: "tail",
            style: styles.userName
          }, item.displayName || item.userId)), /*#__PURE__*/React.createElement(CheckBox.Icon, null));
        }
      })));
    }
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.submitButtonContainer
  }, /*#__PURE__*/React.createElement(ActionButton, {
    label: "Add Member",
    onPress: handleSubmit(onSubmit),
    disabled: !isDirty || !isValid || isSubmitting
  })));
};
export default AddMember;
//# sourceMappingURL=AddMember.js.map