import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Colors } from '../../styles';
import Modal from 'react-native-modal';
import { CrossSpinnerType, CrossSpinner, } from '../animations/CrossSpinner';
import styles from '../../styles';
/**
 * @description
 * Displays a modal with busy indicator (spinner) and message when {@link IBusyIndicatorProps.isBusy} is `true`
 *
 * Properties are {@link IBusyIndicatorProps}
 *
 * Also supports cancelling the modal using properties
 * {@link IBusyIndicatorProps.isCancelButtonVisible},
 * {@link IBusyIndicatorProps.cancelText} and
 * {@link IBusyIndicatorProps.onCancel}.
 * This does however not hide the modal.
 *
 * Modal with cancel
 * @example
 *
 ```
  <CrossBusyIndicator
          key="busy1"
          testID="busy1"
          isBusy={this.state.isBusy}
          type={CrossSpinnerType.PacmanIndicator}
          isCancelButtonVisible={true}
          message="Loading.."
          onCancel={() => this.setState({ isBusy: false })}
        />
```
* Non cancellable and custom styles
* @example
```
        <CrossBusyIndicator
          key="busy2"
          testID="busy2"
          spinnerProps={{
            color: 'red',
            type: CrossSpinnerType.WaveIndicator
          }}
          messageStyle={{color: 'red'}}
          isBusy={this.state.isBusy2}
          isCancelButtonVisible={false}
          message="Resistance is futile"
        />
```
 */
export class CrossBusyIndicator extends React.Component {
    constructor(props) {
        super(props);
        this.onCancel = this.onCancel.bind(this);
    }
    onCancel() {
        if (!this.props.isCancelButtonVisible) {
            return;
        }
        if (this.props.onCancel) {
            this.props.onCancel();
        }
    }
    render() {
        return (React.createElement(View, { testID: this.props.testID || '1' },
            React.createElement(Modal, { style: this.props.modalStyle
                    ? [styles.absoluteCentered, this.props.modalStyle]
                    : styles.absoluteCentered, isVisible: this.props.isBusy, onDismiss: this.onCancel },
                React.createElement(View, { style: this.props.innerViewStyle
                        ? [
                            styles.container,
                            styles.paddingDefault,
                            this.props.innerViewStyle,
                        ]
                        : [styles.container, styles.paddingDefault] },
                    React.createElement(View, { style: [styles.columnContentTopCenter] },
                        React.createElement(CrossSpinner, Object.assign({ type: this.props.type || CrossSpinnerType.MaterialIndicator, style: styles.spinner }, this.props.spinnerProps))),
                    React.createElement(View, { style: [styles.columnContentTopCenter] },
                        React.createElement(Text, { style: [styles.textSpinner, this.props.messageStyle] }, this.props.message || ''),
                        this.props.isCancelButtonVisible ? (React.createElement(TouchableOpacity, { onPress: this.onCancel },
                            React.createElement(Text, { testID: 'cancelText', style: [
                                    styles.textSpinner,
                                    { color: Colors.CancelButton },
                                    this.props.cancelTextStyle,
                                ] }, this.props.cancelText || 'Cancel'))) : null)))));
    }
}
export default CrossBusyIndicator;
//# sourceMappingURL=CrossBusyIndicator.js.map