import { Fragment } from 'react';
import { FlatList, 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 CategoryChip from '../../../components/CategoryChip/CategoryChip';
import { Controller } from 'react-hook-form';
import useAddCategory from './hooks/useAddCategory';
import MemberSkeleton from '../shared/components/MemberSkeleton';
import ActionButton from '../../../elements/ActionButton';
const AddCategory = () => {
  const {
    categories,
    fetchNextPage,
    hasNextPage,
    handleSubmit,
    isFetchingNextPage,
    isDirty,
    control,
    isSubmitting,
    onSubmit,
    isValid,
    styles,
    isLoading
  } = useAddCategory();
  return /*#__PURE__*/React.createElement(SafeAreaView, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "categories",
    render: ({
      field: {
        onChange,
        value
      }
    }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
      bordered: true,
      total: categories.length,
      count: value.length
    }), value.length > 0 && /*#__PURE__*/React.createElement(View, {
      style: styles.selectedCategoriesContainer
    }, value.map(selectedCategory => /*#__PURE__*/React.createElement(CategoryChip, {
      category: selectedCategory,
      key: selectedCategory.categoryId,
      onPress: () => onChange(value.filter(cat => cat.categoryId !== selectedCategory.categoryId))
    }))), isLoading && /*#__PURE__*/React.createElement(View, {
      style: styles.skeletonContainer
    }, /*#__PURE__*/React.createElement(MemberSkeleton, null), /*#__PURE__*/React.createElement(MemberSkeleton, null), /*#__PURE__*/React.createElement(MemberSkeleton, null)), /*#__PURE__*/React.createElement(CheckBox.Group, {
      value: value,
      onChange: onChange,
      extractKey: item => item.categoryId,
      select: (list, option) => !!list.find(cat => cat.categoryId === option.categoryId)
    }, /*#__PURE__*/React.createElement(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(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.categoryOption
        }, /*#__PURE__*/React.createElement(CheckBox.Label, {
          style: styles.categoryLabel
        }, /*#__PURE__*/React.createElement(Avatar.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.BodyBold, {
          numberOfLines: 1,
          ellipsizeMode: "tail",
          style: styles.categoryLabelText
        }, item.name)), /*#__PURE__*/React.createElement(CheckBox.Icon, null));
      }
    })))
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.submitButtonContainer
  }, /*#__PURE__*/React.createElement(ActionButton, {
    fullWidth: true,
    label: "Add category",
    onPress: handleSubmit(onSubmit),
    disabled: !isDirty || !isValid || isSubmitting
  })));
};
export default AddCategory;
//# sourceMappingURL=AddCategory.js.map