import React from 'react';
import {
    Alert,
    View,
    TouchableOpacity,
    Text,
} from 'react-native';
import CustomModal from './CustomModal';
import { useRoute } from '@react-navigation/native';
import { GlobalTheme } from '../theme';

export const CustomAlert = (
    title = '',
    msg = '',
    onCancel = () => { },
    onDone = () => { }
) => {
    Alert.alert(title, msg, [
        {
            text: 'Cancel',
            onPress: onCancel,
            style: 'cancel',
        },
        { text: 'OK', onPress: onDone },
    ]);
};

export function ConfirmSaveAlert({
  showAlert = false,
  onCancelCallBack = () => { },
  onYesCallBack = () => { },
  msg = 'Do you really want to save data?',
  yesText = 'Yes',
  cancelText = 'NO',
}) {
  return (
    <CustomModal
      title={msg}
      showModal={showAlert}
      onClose={onCancelCallBack} // 👈 ensures modal closes when tapping close icon
    >
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 20, width: '60%' }}>
        <TouchableOpacity
          style={{
            paddingHorizontal: 25,
            paddingVertical: 10,
            backgroundColor: GlobalTheme.colors.primary,
            borderRadius: 5,
          }}
          onPress={onYesCallBack}
        >
          <Text style={{
            color: '#FFF',
            fontSize: GlobalTheme.typography.fontSize.small,
            fontWeight: GlobalTheme.typography.fontWeight.medium
          }}>
            {yesText}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{
            paddingHorizontal: 25,
            paddingVertical: 10,
            backgroundColor: '#ccc',
            borderRadius: 5,
          }}
          onPress={onCancelCallBack}
        >
          <Text style={{
            color: '#000',
            fontSize: GlobalTheme.typography.fontSize.small,
            fontWeight: GlobalTheme.typography.fontWeight.medium
          }}>
            {cancelText}
          </Text>
        </TouchableOpacity>
      </View>
    </CustomModal>
  );
}


export function ExitScreenAlert(props, callback) {
    Alert.alert(
        '',
        'Do you really want to exit the screen?',
        [
            {
                text: 'Cancel',
                onPress: () => { },
                style: 'cancel',
            },
            {
                text: 'OK',
                onPress: () => {
                    if (typeof callback === 'function') callback();
                    props.navigation.goBack();
                },
            },
        ]
    );
}
