import { Pressable, View, Animated, Easing } from 'react-native';
import { memo, useCallback, useEffect, useRef } from 'react';
import { PageID, ComponentID, ElementID, mediaAttachment } from '../../../../enums';
import { useAmityComponent, useAmityElement } from '../../../../hooks';
import { useStyles } from './styles';
import { SvgXml } from 'react-native-svg';
import { camera, photo, video } from '../../../../../core/assets/icons';
const AmityMediaAttachmentComponent = ({
  onPressCamera,
  onPressImage,
  onPressVideo,
  chosenMediaType,
  onHeightChange
}) => {
  var _themeStyles$colors, _themeStyles$colors2, _themeStyles$colors3;
  const pageId = PageID.post_composer_page;
  const componentId = ComponentID.media_attachment;
  const {
    accessibilityId,
    themeStyles,
    isExcluded
  } = useAmityComponent({
    pageId,
    componentId
  });
  const cameraElement = useAmityElement({
    pageId,
    componentId,
    elementId: ElementID.camera_button
  });
  const imageElement = useAmityElement({
    pageId,
    componentId,
    elementId: ElementID.image_button
  });
  const videoElement = useAmityElement({
    pageId,
    componentId,
    elementId: ElementID.video_button
  });
  const styles = useStyles(themeStyles);
  const animatedBottom = useRef(new Animated.Value(-100)).current;
  const showMediaAttachments = useCallback(() => {
    Animated.timing(animatedBottom, {
      toValue: 0,
      duration: 300,
      easing: Easing.ease,
      useNativeDriver: false
    }).start();
  }, [animatedBottom]);
  const hideMediaAttachments = useCallback(() => {
    Animated.timing(animatedBottom, {
      toValue: -100,
      duration: 300,
      easing: Easing.ease,
      useNativeDriver: false
    }).start();
  }, [animatedBottom]);
  useEffect(() => {
    showMediaAttachments();
    return () => hideMediaAttachments();
  }, [hideMediaAttachments, showMediaAttachments]);
  if (isExcluded) return null;
  return /*#__PURE__*/React.createElement(Animated.View, {
    testID: accessibilityId,
    accessibilityLabel: accessibilityId,
    style: [styles.container, {
      bottom: animatedBottom
    }],
    onLayout: e => onHeightChange === null || onHeightChange === void 0 ? void 0 : onHeightChange(e.nativeEvent.layout.height)
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.handleBar
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.buttonsContainer
  }, !cameraElement.isExcluded && /*#__PURE__*/React.createElement(Pressable, {
    testID: cameraElement.accessibilityId,
    accessibilityLabel: cameraElement.accessibilityId,
    onPress: onPressCamera
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.iconContainer
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: camera(),
    width: 24,
    height: 24,
    color: themeStyles === null || themeStyles === void 0 || (_themeStyles$colors = themeStyles.colors) === null || _themeStyles$colors === void 0 ? void 0 : _themeStyles$colors.base
  }))), !imageElement.isExcluded && (!chosenMediaType || chosenMediaType === mediaAttachment.image) && /*#__PURE__*/React.createElement(Pressable, {
    testID: imageElement.accessibilityId,
    accessibilityLabel: imageElement.accessibilityId,
    onPress: onPressImage
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.iconContainer
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: photo(),
    width: 24,
    height: 24,
    color: themeStyles === null || themeStyles === void 0 || (_themeStyles$colors2 = themeStyles.colors) === null || _themeStyles$colors2 === void 0 ? void 0 : _themeStyles$colors2.base
  }))), !videoElement.isExcluded && (!chosenMediaType || chosenMediaType === mediaAttachment.video) && /*#__PURE__*/React.createElement(Pressable, {
    testID: videoElement.accessibilityId,
    accessibilityLabel: videoElement.accessibilityId,
    onPress: onPressVideo
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.iconContainer
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: video(),
    width: 24,
    height: 24,
    color: themeStyles === null || themeStyles === void 0 || (_themeStyles$colors3 = themeStyles.colors) === null || _themeStyles$colors3 === void 0 ? void 0 : _themeStyles$colors3.base
  })))));
};
export default /*#__PURE__*/memo(AmityMediaAttachmentComponent);
//# sourceMappingURL=MediaAttachment.js.map