import React, {ReactNode, useCallback, useState} from 'react';
import {View, ViewStyle, StyleProp, TextStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import Text, {TextVariant} from '@components/Text';
import Button from '@components/Button';
import {Modal} from '@components/Modals';
import {SHARED_STRINGS} from '@shared/strings';
import {wait} from '@shared/utils';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

interface Props {
  dialogStyle?: StyleProp<ViewStyle>;
  dialogContentStyle?: StyleProp<ViewStyle>;
  children?: ReactNode;
  onAccept?: () => void;
  visible: boolean;
  onTouchOutside?: () => void;
  acceptText?: string;
  cancelText?: string;
  acceptTextStyle?: StyleProp<ViewStyle | TextStyle>;
  cancelTextStyle?: StyleProp<ViewStyle | TextStyle>;
  title?: string;
  titleStyle?: StyleProp<TextStyle>;
  titleVariant?: TextVariant;
  text?: Nullable<string>;
  textStyle?: StyleProp<TextStyle>;
  showCancel?: boolean;
  showAccept?: boolean;
  customizedColor?: string;
  loading?: boolean;
  customButtons?: ReactNode;
}

/**
 * @deprecated - Use `_custom/Modals` (Dialog or similar) instead
 */
function AcceptCancelDialog({
  dialogStyle = {},
  dialogContentStyle = {},
  children,
  onAccept,
  visible,
  onTouchOutside,
  acceptText,
  cancelText,
  acceptTextStyle = {},
  cancelTextStyle = {},
  title,
  titleStyle,
  text,
  textStyle = {},
  showCancel,
  showAccept = true,
  customizedColor,
  loading,
  customButtons,
  titleVariant = 'h6',
}: Props) {
  const {t} = useTranslation();
  const [accepted, setAccepted] = useState(false);
  const dialogButtonTextStyle: TextStyle = {
    color: customizedColor || COLORS.PRIMARY,
    fontSize: 14,
  };

  const handleAccept = useCallback(async () => {
    if (!accepted) {
      setAccepted(true);
      onAccept?.();
      await wait(2000);
      setAccepted(false);
    }
  }, [accepted, onAccept]);

  return (
    <Modal
      visible={visible}
      modalStyle={[styles.dialogStyle, dialogStyle]}
      contentStyle={[styles.dialogContent, dialogContentStyle]}
      customButtons={
        !children && (
          <View style={styles.buttonContainer}>
            {showCancel ? (
              <Button
                text={cancelText || t(SHARED_STRINGS.CANCEL).toUpperCase()}
                variant="text"
                style={styles.button}
                textStyle={
                  [
                    dialogButtonTextStyle,
                    cancelTextStyle,
                  ] as StyleProp<TextStyle>
                }
                disabled={loading}
                onPress={onTouchOutside}
              />
            ) : (
              <></>
            )}
            {showAccept ? (
              <Button
                style={[styles.button, acceptTextStyle] as StyleProp<ViewStyle>}
                loading={loading}
                disabled={loading}
                text={acceptText || t(SHARED_STRINGS.ACCEPT).toUpperCase()}
                onPress={handleAccept}
              />
            ) : (
              <></>
            )}
          </View>
        )
      }
      onBackdropPress={onTouchOutside}>
      {title && (
        <Text variant={titleVariant} style={titleStyle || styles.titleText}>
          {title}
        </Text>
      )}
      {text ? (
        <Text variant="body2" style={textStyle}>
          {text}
        </Text>
      ) : (
        children
      )}
      {customButtons ||
        (children && (
          <Button
            onPress={handleAccept}
            disabled={loading}
            loading={loading}
            text={acceptText || t(SHARED_STRINGS.ACCEPT).toUpperCase()}
          />
        ))}
    </Modal>
  );
}

export default AcceptCancelDialog;