import React, {memo} from 'react';
import {IconPhoto} from '@tabler/icons-react-native';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {useNewPost} from '@components/_custom/NewPost/hooks/useNewPost';
import {BottomOptionButton} from '@components/_custom/BottomOptionButton';
import {
  NewPostScreens,
  NewPostStackParamList,
} from '@components/_custom/NewPost/navigation';
import {openGallery} from '@shared/utils';

interface Props {
  hasMaxSize: boolean;
}

function ImageOrVideo({hasMaxSize}: Props) {
  const {gif, editor, setPickedAssets, post} = useNewPost();
  const requestEdit = !!post?._links?.requestEdit;
  const navigation =
    useNavigation<StackNavigationProp<NewPostStackParamList>>();

  const onPress = () => {
    editor.blur?.();
    openGallery({
      saveMultiple: files => {
        setPickedAssets(files);
        navigation.navigate(NewPostScreens.SelectedMedia);
      },
      options: {mediaType: 'any', multiple: true, maxFiles: 20},
    });
  };

  return (
    <BottomOptionButton
      Icon={IconPhoto}
      onPress={onPress}
      disabled={!!gif || hasMaxSize || requestEdit}
    />
  );
}

export default memo(ImageOrVideo);
