import React, {ReactNode} from 'react';
import {View, ViewStyle, StyleProp, TextStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import RNModal, {ModalProps} from 'react-native-modal';
import Button from '@components/Button';
import Text from '@components/Text';
import {SHARED_STRINGS} from '@shared/strings';
import {BACKDROP} from '@shared/styles';

import {styles} from './styles';

interface Props {
  children?: ReactNode;
  visible: boolean;
  onAccept?: () => void;
  acceptText?: string;
  onCancel?: () => void;
  cancelText?: string;
  onBackdropPress?: () => void;
  dialogStyle?: StyleProp<ViewStyle>;
  dialogContentStyle?: StyleProp<ViewStyle>;
  acceptTextStyle?: StyleProp<ViewStyle>;
  cancelTextStyle?: StyleProp<ViewStyle>;
  title?: string;
  titleStyle?: StyleProp<TextStyle>;
  text?: string;
  textStyle?: StyleProp<TextStyle>;
  showCancel?: boolean;
  showAccept?: boolean;
  loading?: boolean;
  customButtons?: ReactNode;
  modalStyle?: StyleProp<ViewStyle>;
  contentStyle?: StyleProp<ViewStyle>;
  animationIn?: ModalProps['animationIn'];
  animationOut?: ModalProps['animationOut'];
}

/**
 * @deprecated Use `_HuGo/Modals` instead
 */
export function Modal({
  children,
  onAccept,
  visible,
  onBackdropPress,
  onCancel,
  acceptText,
  cancelText,
  title,
  titleStyle,
  loading,
  customButtons,
  modalStyle,
  contentStyle,
  animationIn = 'fadeIn',
  animationOut = 'fadeOut',
}: Props) {
  const {t} = useTranslation();

  const showButtonContainerView = customButtons || onAccept || onCancel;

  return (
    <RNModal
      avoidKeyboard
      useNativeDriver
      useNativeDriverForBackdrop
      onBackButtonPress={onBackdropPress}
      isVisible={visible}
      backdropColor={BACKDROP.color}
      backdropOpacity={BACKDROP.opacity}
      onBackdropPress={onBackdropPress}
      style={[styles.modal, modalStyle]}
      animationIn={animationIn}
      animationOut={animationOut}>
      <View style={[styles.container, contentStyle]}>
        {title && (
          <Text variant="h6" style={[styles.title, titleStyle]}>
            {title}
          </Text>
        )}
        {children}
        {showButtonContainerView && (
          <View style={styles.buttonContainer}>
            {customButtons}
            {!customButtons && onCancel && (
              <Button
                variant="text"
                style={styles.buttonStyle}
                disabled={loading}
                onPress={onCancel}
                text={cancelText || t(SHARED_STRINGS.CANCEL)!}
              />
            )}
            {!customButtons && onAccept && (
              <Button
                style={styles.buttonStyle}
                loading={loading}
                disabled={loading}
                onPress={onAccept}
                text={acceptText || t(SHARED_STRINGS.ACCEPT)!}
              />
            )}
          </View>
        )}
      </View>
    </RNModal>
  );
}
