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

import { addFeesToOrd } from '../../store/actions';

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

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

        if (dateRange){
            addFeesToOrd(dateRange, memberIds);
        }

        this.close();
    };

    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>
        );
    }
}

const mapDispatchToProps = (dispatch) => ({
    addFeesToOrd: (dateRange, memberIds) => addFeesToOrd(dispatch, dateRange, memberIds),
});

export default  connect(null, mapDispatchToProps)(GenerateFeesInORDButton);