"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 _CategoryChip = _interopRequireDefault(require("../../../components/CategoryChip/CategoryChip"));
var _reactHookForm = require("react-hook-form");
var _useAddCategory = _interopRequireDefault(require("./hooks/useAddCategory"));
var _MemberSkeleton = _interopRequireDefault(require("../shared/components/MemberSkeleton"));
var _ActionButton = _interopRequireDefault(require("../../../elements/ActionButton"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const AddCategory = () => {
  const {
    categories,
    fetchNextPage,
    hasNextPage,
    handleSubmit,
    isFetchingNextPage,
    isDirty,
    control,
    isSubmitting,
    onSubmit,
    isValid,
    styles,
    isLoading
  } = (0, _useAddCategory.default)();
  return /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaView, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(_reactHookForm.Controller, {
    control: control,
    name: "categories",
    render: ({
      field: {
        onChange,
        value
      }
    }) => /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_Header.default, {
      bordered: true,
      total: categories.length,
      count: value.length
    }), value.length > 0 && /*#__PURE__*/React.createElement(_reactNative.View, {
      style: styles.selectedCategoriesContainer
    }, value.map(selectedCategory => /*#__PURE__*/React.createElement(_CategoryChip.default, {
      category: selectedCategory,
      key: selectedCategory.categoryId,
      onPress: () => onChange(value.filter(cat => cat.categoryId !== selectedCategory.categoryId))
    }))), 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)), /*#__PURE__*/React.createElement(_CheckBox.CheckBox.Group, {
      value: value,
      onChange: onChange,
      extractKey: item => item.categoryId,
      select: (list, option) => !!list.find(cat => cat.categoryId === option.categoryId)
    }, /*#__PURE__*/React.createElement(_reactNative.FlatList, {
      data: categories,
      keyExtractor: item => item.categoryId,
      contentContainerStyle: styles.categoryContainer,
      onEndReached: () => {
        if (hasNextPage && !isFetchingNextPage) fetchNextPage === null || fetchNextPage === void 0 || fetchNextPage();
      },
      ListFooterComponent: 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.categoryOption
        }, /*#__PURE__*/React.createElement(_CheckBox.CheckBox.Label, {
          style: styles.categoryLabel
        }, /*#__PURE__*/React.createElement(_Avatar.default.Category, {
          uri: (_item$avatar = item.avatar) === null || _item$avatar === void 0 ? void 0 : _item$avatar.fileUrl,
          imageStyle: styles.categoryImage,
          iconProps: {
            width: 40,
            height: 40
          }
        }), /*#__PURE__*/React.createElement(_Typography.Typography.BodyBold, {
          numberOfLines: 1,
          ellipsizeMode: "tail",
          style: styles.categoryLabelText
        }, item.name)), /*#__PURE__*/React.createElement(_CheckBox.CheckBox.Icon, null));
      }
    })))
  }), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.submitButtonContainer
  }, /*#__PURE__*/React.createElement(_ActionButton.default, {
    fullWidth: true,
    label: "Add category",
    onPress: handleSubmit(onSubmit),
    disabled: !isDirty || !isValid || isSubmitting
  })));
};
var _default = exports.default = AddCategory;
//# sourceMappingURL=AddCategory.js.map