import React, { Component } from 'react';
import { Button, Modal } from 'semantic-ui-react';

class GenerateFeesInORDButton extends Component {
    state = { open: false };

    show = size => () => this.setState({ size, open: true });
    close = () => this.setState({ open: false });
    confirm = () => {
        const { onConfirm } = this.props;
        this.close();
        if (onConfirm){
            onConfirm();
        }
    };

    render() {
        const { open, size } = this.state;
        const { singleMember, disabled } = this.props;

        const modalContent = singleMember ?
            'This will remove all existing fees in ORD for selected member in selected date range and generate new fees based on shown incident tables. Do you want to continue ?':
            'This will remove all existing fees in ORD for all members in selected date range and generate new fees based on shown incident tables. Do you want to continue ?';

        return (
            <div>
                <Button disabled={disabled} onClick={this.show('tiny')}>Generate fees in ORD</Button>

                <Modal size={size} open={open} onClose={this.close}>
                    <Modal.Header>Add fees to the ORD</Modal.Header>
                    <Modal.Content>
                        <p>{modalContent}</p>
                    </Modal.Content>
                    <Modal.Actions>
                        <Button negative onClick={this.close}>No</Button>
                        <Button positive icon='checkmark' onClick={this.confirm} labelPosition='right' content='Yes' />
                    </Modal.Actions>
                </Modal>
            </div>
        );
    }
}

export default GenerateFeesInORDButton;