'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import {Popup} from './Popup';
import {Button} from '../Button';
import {DangerousHTML} from '../DangerousHTML';

export class Confirm extends React.Component {
    static propTypes = {
        buttonYesStyle: PropTypes.string,
        submitText: PropTypes.string,
        cancelText: PropTypes.string,
        submitAction: PropTypes.func.isRequired,
        cancelAction: PropTypes.func.isRequired,
        noAutoClose: PropTypes.bool,
        shouldDeriveDescFromBody: PropTypes.bool
    };

    static defaultProps = {
        buttonYesStyle: 'primary',
        title: 'TRANSLATE:CONFIRMATION',
        submitText: 'TRANSLATE:YES',
        cancelText: 'TRANSLATE:NO',
        testAutomationId: 'confirm',
        noAutoClose: false,
        shouldDeriveDescFromBody: true
    };

    constructor(props, context) {
        super(props, context);

        this.submitAction = this.submitAction.bind(this);
        this.cancelAction = this.cancelAction.bind(this);
    }

    submitAction() {
        if (!this.props.noAutoClose) {
            Popup.close();
        }
        this.props.submitAction();
    }

    cancelAction() {
        if (!this.props.noAutoClose) {
            Popup.close();
        }
        if (typeof this.props.cancelAction === 'function') {
            this.props.cancelAction();
        }
    }

    render() {
        let {
            buttonYesStyle,
            submitText,
            cancelText,
            noAutoClose,
            submitAction,
            ...props
        } = this.props;
        let buttons = [
            <Button key="buttonNo" testAutomationId="buttonNo" onClick={this.cancelAction}>
                <DangerousHTML>{cancelText}</DangerousHTML>
            </Button>,
            <Button
                key="buttonYes"
                bsStyle={buttonYesStyle}
                testAutomationId="buttonYes"
                onClick={this.submitAction}>
                <DangerousHTML>{submitText}</DangerousHTML>
            </Button>
        ];
        return <Popup {...props} onClose={this.cancelAction} bsSize="sm" footer={buttons} />;
    }
}
