import React, {useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import {Image, Options} from 'react-native-image-crop-picker';
import OptionsDialog from '@components/OptionsDialog';
import {SHARED_STRINGS} from '@shared/strings';
import {openCamera, openGallery} from '@shared/utils';

import {getDialogOptions} from './utils';

interface Props {
  visible: boolean;
  handleTouchOutside: () => void;
  save: (asset: Image) => void;
  cameraOptions: Partial<Options>;
  galleryOptions: Partial<Options>;
}

/**
 * @deprecated Use `_core/Modals` instead
 */
function SelectPhotoDialog({
  visible,
  handleTouchOutside,
  save,
  cameraOptions,
  galleryOptions,
}: Props) {
  const {t} = useTranslation();
  const dialogOptions = useMemo(
    () =>
      getDialogOptions(
        () => {
          handleTouchOutside();
          openCamera({
            save,
            options: {...cameraOptions, cropping: true},
          });
        },
        () => {
          handleTouchOutside();
          openGallery({
            save,
            options: {...galleryOptions, cropping: true},
          });
        },
      ),
    [cameraOptions, galleryOptions, handleTouchOutside, save],
  );

  return (
    <OptionsDialog
      visible={visible}
      title={t(SHARED_STRINGS.SELECT)}
      onTouchOutside={handleTouchOutside}
      items={dialogOptions}
    />
  );
}

export default SelectPhotoDialog;