import { TouchableOpacity, View } from 'react-native';
import FormLabel from '../../../../../elements/FormLabel';
import { useStyles } from './styles';
import { ElementID, PageID } from '../../../../../enums';
import { Typography } from '../../../../../../core/components/Typography/Typography';
import { SvgXml } from 'react-native-svg';
import { arrowRight } from '../../../../../../core/assets/icons';
import { useBehaviour } from '../../../../../providers/BehaviourProvider';
import { useNavigation } from '@react-navigation/native';
import CategoryChip from '../../../../../components/CategoryChip/CategoryChip';
function Categories({
  onChange,
  categories,
  goBack
}) {
  const {
    styles,
    theme
  } = useStyles();
  const {
    AmityCommunitySetupPageBehavior
  } = useBehaviour();
  const navigation = useNavigation();
  const onAddedAction = addedCategories => {
    goBack();
    onChange(addedCategories);
  };
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
    style: styles.labelContainer
  }, /*#__PURE__*/React.createElement(FormLabel, {
    optional: true,
    pageId: PageID.community_setup_page,
    elementId: ElementID.community_category_title
  })), categories.length > 0 ? /*#__PURE__*/React.createElement(View, {
    style: styles.categoryContainer
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.selectedCategoriesContainer
  }, categories.map(category => /*#__PURE__*/React.createElement(CategoryChip, {
    category: category,
    key: category.categoryId,
    onPress: () => onChange(categories.filter(cat => cat.categoryId !== category.categoryId))
  }))), /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => {
      if (AmityCommunitySetupPageBehavior.goToAddCategoryPage) {
        return AmityCommunitySetupPageBehavior.goToAddCategoryPage({
          categories,
          onAddedAction
        });
      }
      navigation.navigate('CommunityAddCategory', {
        categories,
        onAddedAction
      });
    }
  }, /*#__PURE__*/React.createElement(SvgXml, {
    width: 20,
    height: 20,
    xml: arrowRight(),
    color: theme.colors.baseShade2
  }))) : /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.categoryContainer,
    onPress: () => {
      if (AmityCommunitySetupPageBehavior.goToAddCategoryPage) {
        return AmityCommunitySetupPageBehavior.goToAddCategoryPage({
          categories,
          onAddedAction
        });
      }
      navigation.navigate('CommunityAddCategory', {
        categories,
        onAddedAction
      });
    }
  }, /*#__PURE__*/React.createElement(Typography.Body, {
    style: styles.categoryText
  }, "Select category"), /*#__PURE__*/React.createElement(SvgXml, {
    width: 20,
    height: 20,
    xml: arrowRight(),
    color: theme.colors.baseShade2
  })));
}
export default Categories;
//# sourceMappingURL=index.js.map