 
 {React, ReactDOM, rtypes, rclass, redux}  = require('./app-framework')
 
-{Button, ButtonToolbar, Checkbox, Panel, Grid, Row, Col, FormControl, FormGroup, Well, Modal, ProgressBar, Alert} = require('react-bootstrap')
+{Button, ButtonToolbar, Checkbox, Panel, Grid, Row, Col, FormControl, FormGroup, Well, Modal, ProgressBar, Alert, Radio} = require('react-bootstrap')
 
 {ErrorDisplay, Icon, LabeledRow, Loading, NumberInput, Saving, SelectorInput, Tip, Footer, Space} = require('./r_misc')
 

    onColorChange: (value) ->
        @props.redux.getTable('account').set(profile : {color: value})

    onGravatarSelect: (e) ->
        if e.target.checked
            email = @props.email_address
            gravatar_url = "https://www.gravatar.com/avatar/#{md5 email.toLowerCase()}?d=identicon&s=#{30}"
            @props.redux.getTable('account').set(profile : {image: gravatar_url})
        else
            @props.redux.getTable('account').set(profile : {image: ""})

    render_gravatar_button: ->
        <Button bsStyle='info' onClick={=>@setState(show_instructions:true)}>
            Set Gravatar...
        </Button>

    render_instruction_well: ->
        <Well style={marginTop:'10px', marginBottom:'10px'}>
            Go to the <a href="https://en.gravatar.com" target="_blank"> Wordpress Gravatar site </a> and
            sign in (or create an account) using {@props.email_address}.
            <br/><br/>
            <br/><br/>
            <Button onClick={=>@setState(show_instructions:false)}>
                Close
            </Button>
        </Well>

    render_gravatar_needs_email: ->
        <div className="lighten">
            Gravatar only available if you set an email address in the account settings panel above.
        </div>

    render_set_gravatar: ->
        if not @props.email_address
            return @render_gravatar_needs_email()
        <Row>
            <Col md={6} key='checkbox'>
                <Checkbox
                    ref      = "checkbox"
                    checked  = {!!@props.profile.get('image')}
                    onChange = {@onGravatarSelect}>
                    Use gravatar
                </Checkbox>
            </Col>
            <Col md={6} key='set'>
                {@render_gravatar_button() if not @state.show_instructions}
            </Col>
        </Row>

    render_header: ->
        <h2>
            <Avatar

                <ColorPicker color={@props.profile.get('color')} style={maxWidth:"150px"} onChange={@onColorChange}/>
            </LabeledRow>
            <LabeledRow label='Picture'>
                {@render_image_options()}
             </LabeledRow>
        </Panel>

