import React, { Component } from "react";
import PropTypes from 'prop-types';

import { fetchEntity, saveEntity, selector } from './redux.js';
import { connect } from 'react-redux';
import { injectIntl } from 'react-intl';

import LocaleSettingsForm from "components/LocaleSettingsForm";
import { ActivityIndicator, Toolbar, ToolbarSection, ToolbarButton, ToolbarButtons, ToolbarRow, ListTitle, PortalContainer } from 'lib/components';

import Toast from 'components/Toast';

import { updateIntl } from 'lib/i18n';
import { fromJS } from 'immutable';
import icons from 'constants/icons';
import messages from './messages';

class LocalForm extends Component {

    constructor(props) {
        super(props);

        this.handleBack = this.handleBack.bind(this);
        this.handleSave = this.handleSave.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }


    componentWillMount() {
        this.props.fetchEntity(global.cfg.unitId);
    }


    handleBack() {
        this.context.router.push('/settings');
    }


    handleSubmit() {
        this.refs.form.submit();
    }


    async handleSave(data) {
        let intl = this.props.intl;

        let unitId = global.cfg.unitId;
        try {
            await this.props.saveEntity(unitId, data);  

            global._transitions = false;
            await this.props.updateIntl(data.language);
            global._transitions = true;

            //HACK
            global.cfg.unit = { ...global.cfg.unit, ...data };
            
            Toast.saved();
        } catch (e) {
            Toast.error(e);
        }
    }


    render() {
        let status = this.props.status;
        let pending = !!(status && ( status.isFetching || status.isSaving ));
        let intl = this.props.intl;

        return (
            <div className="pv10">
                <Toolbar>
                    <ToolbarSection>
                        <ListTitle 
                            title={ intl.formatMessage(messages.title) }
                            titleIcon={ icons.localSettings }
                            />
                    </ToolbarSection>
                    <ToolbarButtons>
                        <ToolbarButton 
                            label={ intl.formatMessage({ id: "common.button.back" }) }
                            onClick={ this.handleBack } 
                            >
                            <span className="icon">{ icons.back }</span>
                        </ToolbarButton>
                        <ToolbarButton 
                            label={ intl.formatMessage({ id: "common.button.save" }) }
                            onClick={ this.handleSubmit } 
                            >
                            <span className="icon">{ icons.ok }</span>
                        </ToolbarButton>
                    </ToolbarButtons>
                </Toolbar>

                <PortalContainer>
                    <LocaleSettingsForm
                        ref="form"
                        data={ this.props.data }
                        onSubmit={ this.handleSave }
                        />
                </PortalContainer>

                <ActivityIndicator show={ pending } type="overlay" />
            </div>
        );
    }

}


LocalForm.contextTypes = {
    router: PropTypes.object.isRequired
};



function mapDispatchToProps(dispatch, props) {
    return {
        dispatch,
        fetchEntity: (unitId) => dispatch(fetchEntity(unitId, { unitId })),
        saveEntity: (unitId, data) => dispatch(saveEntity(unitId, data, { unitId })),
        updateIntl: (locale, messages) => dispatch(updateIntl(locale))
    };
}


export default injectIntl(connect(selector, mapDispatchToProps)(LocalForm));
