import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {
    ListGroup,
    ListGroupItem,
    Modal,
    Button,
    FormGroup,
    FormControl,
    ControlLabel
} from 'react-bootstrap';
import * as stateActions from 'actions/stateActions';
import {Panel} from 'react-bootstrap';

import Week from 'week';
import i18n from 'i18n.json';

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

        this.defState = {
            showModal        : false,
            fields           : {
                exercise_name: '',
                sets         : '',
                weight       : ''
            },
            submitEnabled    : false,
            showRemoveButtons: false
        };

        this.state = this.defState;
    }

    goToExercise(e)
    {
        this.props.router.push(`${this.props.location.pathname}/exercise/${e.target.id}`)
    }

    bind()
    {
        this.bind_add = ee.addListener(
            'clicked_btn_add',
            () =>
            {
                this.setState({ ...this.defState, showModal: true });
            }
        );
    }

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

    componentWillMount()
    {
        let weekData = Week.getDays();

        this.props.stateActions.setHeader(weekData.week[this.props.params.id]);
        this.props.stateActions.updateHeaderBtn(
            {
                add: {
                    visible: true
                }
            }
        );

        this.bind();
    }

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

        this.unbind();
    }


    isValid(code, newState)
    {
        let checkState = newState || this.state;

        if (!checkState.fields[code]) return 'error';

        const length = checkState.fields[code].length;

        if (!length) return 'error';

        if ((code === 'sets' || code === 'weight') && isNaN(parseFloat(checkState.fields[code])))
            return 'error';

        return 'success';
    }

    handleChange(e)
    {
        let newState = { fields: { ...this.state.fields, [e.target.id]: e.target.value } };

        this.setState(newState);

        let validForm = true;

        for (let key in newState.fields)
        {
            if (this.isValid(key, newState) === 'error')
            {
                validForm = false;
                break;
            }
        }

        if (validForm)
            this.setState({ submitEnabled: true });
        else
            this.setState({ submitEnabled: false });
    }


    exerciseSave()
    {
        let week = { ...this.props.week };

        week[this.props.params.id].push(
            {
                name   : this.state.fields.exercise_name,
                repeats: (() =>
                {
                    let sets = [],
                        i    = this.state.fields.sets
                        ;

                    while (i--)
                    {
                        sets.push(
                            {
                                weight: this.state.fields.weight,
                                repeat: this.state.fields.sets
                            }
                        )
                    }

                    return sets;
                })()
            }
        );

        this.props.stateActions.setWeek(week);
        this.setState({ showModal: false });
    }


    closeAddModal()
    {
        this.setState({ showModal: false });
    }

    render()
    {
        return (
            <Panel id="content-wrap" header={this.props.header}>
                <ListGroup fill>
                    {
                        this.props.week[this.props.params.id].map(
                            (exe, i) =>
                            {
                                return <ListGroupItem id={i} key={i}
                                                      onClick={::this.goToExercise}>
                                    {`${exe.name} ${exe.repeats.length}x${exe.repeats[0].repeat}x${exe.repeats[0].weight}`}
                                </ListGroupItem>
                            }
                        )
                    }
                </ListGroup>

                <Modal show={this.state.showModal} onHide={::this.closeAddModal}>
                    <Modal.Header closeButton>
                        <Modal.Title>{i18n[lang].exercise_create}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        {
                            Object.keys(this.state.fields).map(
                                (key, i) => <FormGroup
                                    key={i}
                                    controlId={key}
                                    validationState={::this.isValid(key)}
                                >
                                    <ControlLabel>{i18n[lang][key]}</ControlLabel>
                                    <FormControl
                                        autoFocus={!i}
                                        type={key !== 'exercise_name' ? 'number' : 'text'}
                                        value={this.state.fields[key]}
                                        onChange={::this.handleChange}
                                    />
                                    <FormControl.Feedback />
                                </FormGroup>
                            )
                        }
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={::this.exerciseSave}
                                disabled={!this.state.submitEnabled}
                                bsStyle="success">{i18n[lang].save}</Button>
                        <Button onClick={::this.closeAddModal}>{i18n[lang].close}</Button>
                    </Modal.Footer>
                </Modal>
            </Panel>
        );
    }
}

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

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