import {useMemo, useState} from 'react';
import {ListRenderItem} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconCamera, IconPhoto} from '@tabler/icons-react-native';
import {Image, Options} from 'react-native-image-crop-picker';
import {ListItem, Menu} from '@components';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {DialogMissingPermission} from '@modules/chats/components';
import {useMediaPermissions} from '@modules/chats/hooks/media/useMediaPermissions';
import {openCamera, openGallery} from '@shared/utils';

import {styles} from './styles';

type MenuItem = {
  key: string;
  label: string;
  Icon: React.FC;
  onPress: () => void;
};
interface PickerImageDialogProps {
  isVisible: boolean;
  title: string;
  onClose: () => void;
  save: (asset: Image) => void;
  cameraOptions: Partial<Options>;
  galleryOptions: Partial<Options>;
}

function PickerImageDialog({
  isVisible,
  title,
  onClose,
  save,
  cameraOptions,
  galleryOptions,
}: PickerImageDialogProps) {
  const [showMissingPermissions, setShowMissingPermissions] = useState(false);
  const {requestCameraPermission, requestGalleryPermission} =
    useMediaPermissions();
  const {t} = useTranslation();
  const data = useMemo(
    () => [
      {
        key: 'takePicture',
        label: t('general.take_picture'),
        Icon: IconCamera,
        onPress: async () => {
          const {isAvailable} = await requestCameraPermission();
          if (!isAvailable) {
            setShowMissingPermissions(true);
            return;
          }
          onClose();
          openCamera({
            save,
            options: {...cameraOptions, cropping: true},
          });
        },
      },
      {
        key: 'selectPicture',
        label: t('profile.select_from_gallery'),
        Icon: IconPhoto,
        onPress: async () => {
          const {isAvailable} = await requestGalleryPermission();
          if (!isAvailable) {
            setShowMissingPermissions(true);
            return;
          }
          onClose();
          openGallery({
            save,
            options: {...galleryOptions, cropping: true},
          });
        },
      },
    ],
    [
      t,
      onClose,
      save,
      requestCameraPermission,
      requestGalleryPermission,
      cameraOptions,
      galleryOptions,
    ],
  );

  const paddingBottom = useSafeAreaBottomPadding();

  const renderItem: ListRenderItem<MenuItem> = ({item}) => (
    <ListItem
      title={item.label}
      avatar={{Icon: item.Icon}}
      onItemPress={item.onPress}
      style={styles.item}
    />
  );

  return (
    <>
      <Menu
        isVisible={isVisible}
        title={title}
        onClose={onClose}
        data={data}
        renderItem={renderItem}
        contentContainerStyle={styles.contentContainer}
        extraPadding={paddingBottom}
        scrollEnabled={false}
      />
      <DialogMissingPermission
        isVisible={showMissingPermissions}
        onClose={() => setShowMissingPermissions(false)}
      />
    </>
  );
}

export default PickerImageDialog;