import React from 'react';
import {View, TouchableOpacity} from 'react-native';
import {useTranslation} from 'react-i18next';
import Icon from '@components/Icon';
import Text from '@components/Text';
import {Modal} from '@components/Modals';
import {OptionsDialogItem} from '@modules/app/interfaces';
import {useInstanceProp} from '@redux/selectors';
import {SHARED_STRINGS} from '@shared/strings';

import {styles} from './styles';

interface Props {
  visible: boolean;
  onTouchOutside?: () => void;
  title?: string;
  items: OptionsDialogItem[];
  onPress?: (index: number) => void;
}

/**
 * @deprecated Use `_core/Modals` instead
 */
function OptionsDialog({
  visible,
  onTouchOutside,
  title,
  items,
  onPress,
}: Props) {
  const {t} = useTranslation();
  const color = useInstanceProp('color');

  return (
    <Modal visible={visible} onBackdropPress={onTouchOutside}>
      <View>
        {title && (
          <Text variant="h6" style={styles.titleText}>
            {title}
          </Text>
        )}
        {items.map((item, index) => (
          <TouchableOpacity
            key={index}
            style={styles.option}
            onPress={onPress ? () => onPress(index) : item.onPress}>
            <Text>{item.title || item.text}</Text>
            {item.logo && (
              <Icon name={item.logo} size="sm" style={styles.iconContainer} />
            )}
          </TouchableOpacity>
        ))}
        <TouchableOpacity
          style={[styles.option, styles.cancel]}
          onPress={onTouchOutside}>
          <Text variant="subtitle2" color={color} style={styles.cancelButton}>
            {t(SHARED_STRINGS.CANCEL)}
          </Text>
        </TouchableOpacity>
      </View>
    </Modal>
  );
}

export default OptionsDialog;