import { Animated, Modal, Pressable, Text, TouchableOpacity } from 'react-native';
import { memo, useEffect, useRef, useState } from 'react';
import { SvgXml } from 'react-native-svg';
import CreatePostChooseTargetModal from '../CreatePostChooseTargetModal/CreatePostChooseTargetModal';
import { livestreamIcon, pollIcon, postIconOutlined } from '../../../../core/assets/icons/xml';
import { useStyles } from './style';
import { useTheme } from 'react-native-paper';
import uiSlice from '../../../../core/stores/slices/uiSlice';
import { useUIKitDispatch, useUIKitSelector } from '../../../../core/stores/store';
import { useNavigation } from '@react-navigation/native';
const PostTypeChoiceModal = () => {
  const styles = useStyles();
  const theme = useTheme();
  const dispatch = useUIKitDispatch();
  const navigation = useNavigation();
  const {
    closePostTypeChoiceModal
  } = uiSlice.actions;
  const {
    showPostTypeChoiceModal,
    userId,
    targetId,
    targetName,
    targetType
  } = useUIKitSelector(state => state.ui);
  const [postType, setPostType] = useState();
  const [createPostModalVisible, setCreatePostModalVisible] = useState(false);
  const onChooseType = type => {
    if (!(targetId && targetName && targetType)) {
      setPostType(type);
      setCreatePostModalVisible(true);
      return;
    }
    if (type === 'post') {
      navigation.navigate('CreatePost', {
        targetId,
        targetType
      });
    } else if (type === 'livestream') {
      navigation.navigate('CreateLivestream', {
        targetId,
        targetName,
        targetType
      });
    } else if (type === 'poll') {
      navigation.navigate('PollPostComposer', {
        targetId,
        targetName,
        targetType
      });
    }
    closeCreatePostModal();
  };
  const closeCreatePostModal = () => {
    setCreatePostModalVisible(false);
    closeModal();
  };
  const closeModal = () => {
    Animated.timing(slideAnimation, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true
    }).start(() => {
      dispatch(closePostTypeChoiceModal());
    });
  };
  const slideAnimation = useRef(new Animated.Value(0)).current;
  useEffect(() => {
    if (showPostTypeChoiceModal) {
      Animated.timing(slideAnimation, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true
      }).start();
    }
  }, [slideAnimation, showPostTypeChoiceModal]);
  const modalStyle = {
    transform: [{
      translateY: slideAnimation.interpolate({
        inputRange: [0, 1],
        outputRange: [600, 0] // Adjust this value to control the sliding distance
      })
    }]
  };
  return /*#__PURE__*/React.createElement(Modal, {
    animationType: "fade",
    transparent: true,
    visible: showPostTypeChoiceModal,
    onRequestClose: closeModal
  }, /*#__PURE__*/React.createElement(Pressable, {
    onPress: closeModal,
    style: styles.modalContainer
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.modalContent, modalStyle]
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => onChooseType('post'),
    style: styles.modalRow
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: postIconOutlined(theme.colors.base),
    width: "24",
    height: "24"
  }), /*#__PURE__*/React.createElement(Text, {
    style: styles.postText
  }, "Post")), /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => onChooseType('poll'),
    style: styles.modalRow
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: pollIcon(theme.colors.base),
    width: "24",
    height: "24"
  }), /*#__PURE__*/React.createElement(Text, {
    style: styles.postText
  }, "Poll")), /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => onChooseType('livestream'),
    style: styles.modalRow
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: livestreamIcon(theme.colors.base),
    width: "24",
    height: "24"
  }), /*#__PURE__*/React.createElement(Text, {
    style: styles.postText
  }, "Livestream")), /*#__PURE__*/React.createElement(CreatePostChooseTargetModal, {
    visible: createPostModalVisible,
    onClose: closeCreatePostModal,
    userId: userId,
    onSelect: closeCreatePostModal,
    postType: postType
  }))));
};
export default /*#__PURE__*/memo(PostTypeChoiceModal);
//# sourceMappingURL=PostTypeChoiceModal.js.map