import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Button, Modal, ModalHeader, ModalBody, ModalFooter, Input} from 'reactstrap';
import {setDialogOpenFlag} from '../../actions/dialog/dialogActions';
import './DialogBox.css';

class DialogBox extends Component {
    constructor(props) {
        super(props);

        this.state = {
          inputValue: ''
        };

        this.toggleDialogBox = this.toggleDialogBox.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    toggleDialogBox(isDialogOpen, button) {
        if(button && !button.waitForAction){
            this.props.dispatch(setDialogOpenFlag(!isDialogOpen));
        }

        if(!button){
            this.props.dispatch(setDialogOpenFlag(!isDialogOpen));
        }

        if (button && button.action) {
            button.action(this.state);
        }
    }

    handleInputChange(event) {
      this.setState({inputValue: event.target.value});
      event.preventDefault();
    }


    render() {
        const {isDialogOpen, dialogContent} = this.props;
        const specificClass = dialogContent && dialogContent.class ? dialogContent.class : '';

        return (
            <div>
            { dialogContent &&
                <Modal isOpen={isDialogOpen} toggle={this.toggleDialogBox} className={"generic-dialog-box " + specificClass}>
                    <ModalHeader>
                        {dialogContent.header ? dialogContent.header : 'Confirmation'}
                        {
                            dialogContent.hasCloseIcon &&
                            <i className="fa fa-times dialog-close"
                                onClick={() => {this.toggleDialogBox(isDialogOpen)}}
                                aria-hidden="true"></i>
                        }
                    </ModalHeader>
                    <ModalBody>
                        {dialogContent.TagName && <dialogContent.TagName params={dialogContent.params || {}}/>}
                        {dialogContent.body && dialogContent.body}
                        {dialogContent.bodyVariable &&
                            <span className="highlighted-item">{dialogContent.bodyVariable}?</span>
                        }
                        {(!dialogContent.body && !dialogContent.TagName) && 'Are you sure?'}
                        {dialogContent.inputArray &&
                            dialogContent.inputArray.map((inputContent, mapKey) =>
                                <Input key={inputContent.class + mapKey}
                                    className={'dialog-input ' + inputContent.class}
                                    type={inputContent.type}
                                    placeholder={inputContent.placeholder}
                                    value={this.state.inputValue}
                                    onChange={this.handleInputChange}
                                    autoFocus />)
                        }
                    </ModalBody>
                    { ('buttons' in dialogContent && dialogContent.buttons.length) &&
                        <ModalFooter>
                            {
                                dialogContent.buttons.map((buttonObject, mapKey) =>
                                <Button key={mapKey}
                                    id={buttonObject.id}
                                    color={buttonObject.color}
                                    className={buttonObject.className}
                                    onClick={() => {this.toggleDialogBox(isDialogOpen, buttonObject)}}>
                                    {buttonObject.name}
                                </Button>)
                            }
                        </ModalFooter>
                    }
                </Modal>
            }
            </div>
        );
    }

}

export default connect()(DialogBox);
