import React, { Component } from 'react';
import CluedInMiniLayout from '../../Layouts/CluedInMiniLayout.jsx';
import RaisedButton from 'material-ui/RaisedButton';

export default class AddWidget extends Component {

    constructor( props ) {
        super( props );
        this.state = {
            disableAdd: true,
            selectedCell: void 0
        };
    }

    onSelectCellHandler( cell ) {
        this.setState( {
            disableAdd: false,
            selectedCell: cell
        } );
    }

    render() {
        const { widgetConfiguration, layout, onCancelWidgetClick, onAddWidgetClick } = this.props;
        const { selectedCell } = this.state;

        let selectedCellContent;

        if( selectedCell ) {
            selectedCellContent = <div><strong>{selectedCell.name}</strong> location has been chosen.</div>
        }

        return (<div>
            <h4 style={{margin:'0', padding:'0'}}>Choose Where You want to Place the widget</h4>
            <p>Click on the location where you want to add the widget</p>
            <CluedInMiniLayout onSelectCell={this.onSelectCellHandler.bind(this)}
                               selectable={true}
                               layout={layout}
                               selectedCell={this.state.selectedCell}
                               widgetConfiguration={widgetConfiguration}></CluedInMiniLayout>
            <div style={{marginTop:'15px', textAlign:'left'}}>
                <div style={{float: 'left',lineHeight: '36px',marginLeft: '15px'}}>
                    {selectedCellContent}
                </div>
                <div style={{marginRight:'5px', float:'right'}}>
                    <RaisedButton onClick={onCancelWidgetClick} label="Cancel"></RaisedButton>
                </div>
                <div style={{marginRight:'20px', float:'right'}}>
                    <RaisedButton onClick={onAddWidgetClick} disabled={this.state.disableAdd} secondary={true}
                                  label="Add Widget"></RaisedButton>
                </div>
            </div>
        </div>);
    }
}