import { memo, useCallback } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import { SvgXml } from 'react-native-svg';
import { feed, image, mediaIcon, pin } from '../../../../../core/assets/icons';
import IconTab from '../../../../components/IconTab/IconTab';
import { ComponentID, ElementID, PageID } from '../../../../enums';
import { useAmityElement } from '../../../../hooks';
export let CommunityProfileTab = /*#__PURE__*/function (CommunityProfileTab) {
  CommunityProfileTab["community_feed"] = "community_feed";
  CommunityProfileTab["community_pin"] = "community_pin";
  CommunityProfileTab["community_image_feed"] = "community_image_feed";
  CommunityProfileTab["community_video_feed"] = "community_video_feed";
  return CommunityProfileTab;
}({});
const AmityCommunityProfileTabComponent = ({
  pageId = PageID.WildCardPage,
  componentId = ComponentID.WildCardComponent,
  currentTab,
  onTabChange
}) => {
  const elementId = ElementID.community_profile_tab;
  const {
    themeStyles,
    accessibilityId
  } = useAmityElement({
    pageId,
    componentId,
    elementId
  });
  const styles = StyleSheet.create({
    container: {
      backgroundColor: themeStyles === null || themeStyles === void 0 ? void 0 : themeStyles.colors.background,
      flexDirection: 'row',
      width: '100%',
      paddingHorizontal: 16,
      justifyContent: 'space-between',
      borderBottomColor: themeStyles === null || themeStyles === void 0 ? void 0 : themeStyles.colors.baseShade4,
      borderBottomWidth: 1
    }
  });
  const getActiveColor = useCallback(isActive => {
    return isActive ? themeStyles === null || themeStyles === void 0 ? void 0 : themeStyles.colors.base : themeStyles === null || themeStyles === void 0 ? void 0 : themeStyles.colors.baseShade2;
  }, [themeStyles]);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container,
    testID: accessibilityId,
    accessibilityLabel: accessibilityId
  }, /*#__PURE__*/React.createElement(Pressable, {
    onPress: () => onTabChange(CommunityProfileTab.community_feed)
  }, /*#__PURE__*/React.createElement(IconTab, {
    themeStyles: themeStyles,
    icon: /*#__PURE__*/React.createElement(SvgXml, {
      xml: feed(),
      width: 24,
      height: 24,
      color: getActiveColor(currentTab === CommunityProfileTab.community_feed)
    }),
    isActive: currentTab === CommunityProfileTab.community_feed
  })), /*#__PURE__*/React.createElement(Pressable, {
    onPress: () => onTabChange(CommunityProfileTab.community_pin)
  }, /*#__PURE__*/React.createElement(IconTab, {
    themeStyles: themeStyles,
    icon: /*#__PURE__*/React.createElement(SvgXml, {
      width: 24,
      height: 24,
      xml: pin(),
      color: getActiveColor(currentTab === CommunityProfileTab.community_pin)
    }),
    isActive: currentTab === CommunityProfileTab.community_pin
  })), /*#__PURE__*/React.createElement(Pressable, {
    onPress: () => onTabChange(CommunityProfileTab.community_image_feed)
  }, /*#__PURE__*/React.createElement(IconTab, {
    themeStyles: themeStyles,
    icon: /*#__PURE__*/React.createElement(SvgXml, {
      width: 24,
      height: 24,
      xml: image(),
      color: getActiveColor(currentTab === CommunityProfileTab.community_image_feed)
    }),
    isActive: currentTab === CommunityProfileTab.community_image_feed
  })), /*#__PURE__*/React.createElement(Pressable, {
    onPress: () => onTabChange(CommunityProfileTab.community_video_feed)
  }, /*#__PURE__*/React.createElement(IconTab, {
    themeStyles: themeStyles,
    icon: /*#__PURE__*/React.createElement(SvgXml, {
      width: 24,
      height: 24,
      xml: mediaIcon(),
      color: getActiveColor(currentTab === CommunityProfileTab.community_video_feed)
    }),
    isActive: currentTab === CommunityProfileTab.community_video_feed
  })));
};
export default /*#__PURE__*/memo(AmityCommunityProfileTabComponent);
//# sourceMappingURL=Tab.js.map