import {Panel} from 'react-bootstrap';
import {
    ListGroup,
    ListGroupItem,
    FormControl,
    Form,
    FormGroup,
    ControlLabel,
    Button,
    Grid,
    Row,
    Col,
    Clearfix
} from 'react-bootstrap';

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as stateActions from 'actions/stateActions';

import i18n from 'i18n.json';

class Exercise extends React.Component {
    constructor()
    {
        super();

        this.defState = {
            showRemoveButtons: false
        };

        this.state = this.defState;
    }

    bind()
    {
        this.__showRemoveButtons = false;

        this.bind_add = ee.addListener(
            'clicked_btn_add',
            () =>
            {
                let week = {...this.props.week},
                    exercise = week[this.props.params.id][this.props.params.num];

                if (exercise.repeats[0])
                    exercise.repeats.push(exercise.repeats[0]);
                else
                    exercise.repeats.push(
                        {
                            repeat: 4,
                            weight: 50
                        }
                    );

                week[this.props.params.id][this.props.params.num] = exercise;

                this.props.stateActions.setWeek(week);
            }
        );

        this.bind_remove = ee.addListener(
            'clicked_btn_remove',
            () =>
            {
                if (this.__showRemoveButtons)
                    this.__showRemoveButtons = false;
                else
                    this.__showRemoveButtons = true;

                this.setState({...this.defState, showRemoveButtons: this.__showRemoveButtons});
            }
        );
    }

    unbind()
    {
        this.bind_add.remove();
        this.bind_remove.remove();
    }

    componentWillMount()
    {
        this.exercise_else = this.props.week[this.props.params.id];
        this.the_exercise = this.exercise_else[this.props.params.num];

        this.props.stateActions.setHeader(this.the_exercise.name);
        this.props.stateActions.updateHeaderBtn(
            {
                add: {
                    visible: true
                },

                remove: {
                    visible: true
                }
            }
        );

        this.bind();
    }

    componentWillUnmount()
    {
        this.props.stateActions.updateHeaderBtn(
            {
                add: {
                    visible: false
                },

                remove: {
                    visible: false
                }
            }
        );

        this.unbind();
    }

    change(e)
    {
        this.props.stateActions.setPropExercise(
            this.props.params.id,
            this.props.params.num,
            e.target.parentNode.id,
            e.target.name,
            e.target.value
        );
        this.forceUpdate();
    }

    remove()
    {
        this.props.stateActions.deleteExercise(this.props.params.id, this.props.params.num);
        this.props.router.push('/day/' + this.props.params.id);
    }

    removeSet(e)
    {
        this.props.stateActions.deleteSet(this.props.params.id, this.props.params.num, --e.target.id);
        this.forceUpdate();
    }

    render()
    {
        return (
            <Panel id="content-wrap" header={this.props.header}>
                <ListGroup fill>
                    {this.the_exercise.repeats.map(
                        (oneSet, i) =>
                        {
                            return (
                                <ListGroupItem key={i}>
                                    <Form inline>
                                        <Grid bsClass="container exercise_grid">
                                            <Row className="show-grid">
                                                <Col xs={6}>
                                                    <FormGroup id={i} controlId={'repeat' + i}>
                                                        <ControlLabel>{i + 1}. {i18n[lang].repeat}:</ControlLabel>
                                                        {' '}
                                                        <FormControl
                                                            type="number"
                                                            name="repeat"
                                                            value={oneSet.repeat}
                                                            onChange={::this.change}
                                                        />
                                                    </FormGroup>
                                                </Col>
                                                <Col xs={6}>
                                                    <FormGroup id={i} controlId={'weight' + i}>
                                                        <ControlLabel>{i18n[lang].weight}:</ControlLabel>
                                                        {' '}
                                                        <FormControl
                                                            type="number"
                                                            name="weight"
                                                            value={oneSet.weight}
                                                            onChange={::this.change}
                                                        />
                                                    </FormGroup>
                                                </Col>
                                            </Row>
                                        </Grid>

                                        {this.state.showRemoveButtons ? (
                                            <Button id={i} onClick={::this.removeSet} bsStyle="danger"
                                                    className="pull-right">{i18n[lang].remove}</Button>
                                        ) : null}

                                        <Clearfix visibleXsBlock></Clearfix>
                                    </Form>
                                </ListGroupItem>
                            )
                        }
                    )}
                </ListGroup>

                <Button onClick={::this.remove} bsStyle="danger"
                        className="pull-right">{i18n[lang].removeExercise}</Button>
            </Panel>
        );
    }
}

export default connect(
    state =>
    {
        return {
            week: state.state.week,
            header: state.state.panel.header
        }
    },

    dispatch =>
    {
        return {
            stateActions: bindActionCreators(stateActions, dispatch)
        }
    }
)(Exercise)