import React from 'react';
import PropTypes from 'prop-types';
//import { Calendar } from 'react-date-range';
import { DateRange } from 'react-date-range';

//var DateRange1 = require('react-date-range').Calendar;

class SummaryMain extends React.Component {

    constructor(props) {
        super(props);
    }

    onNewContactButtonClick() {
        this.props.loadSummaryData();
    }

    render() {
        let {profileDetails} = this.props;
        return (
            <div>
                <div className="summarySection container-fluid">
                    create New Profile:
                    <DateRange
                        onInit={this.handleSelect}
                        onChange={this.handleSelect}
                    />
                    <button className={'btn btn-primary'} style={{margin: '15px'}}
                            onClick={this.onNewContactButtonClick.bind(this)}>New Profile
                    </button>
                    <div style={{backgroundColor: '#F7DC6F', fontWeight: 'bold'}}>
                        <pre>{JSON.stringify(profileDetails.summaryData, null, 2)}</pre>
                    </div>

                </div>
            </div>
        );
    }
}

SummaryMain.propTypes = {
    profileDetails: PropTypes.object.isRequired
};

SummaryMain.defaultProps = {};

export default SummaryMain;