import React, { Component } from 'react';

import { AbstractForm } from 'lib/components';
import TimeZoneField from 'components/TimeZoneField';

import form from 'lib/form';
import { fromJS } from 'immutable';

import messages from './messages';
import commonMessages from '../../messages.js';



class ProfileSettings extends AbstractForm {

    constructor(props) {
        super(props);

        this.changeProfile = this.changeProfile.bind(this);
    }

    changeProfile(profileId) {
        let { profiles, states, data } = this.props;

        if (profileId) {
            let profile = profiles[profileId];
            this.props.updateIntl(profile.language, fromJS({ ...data, state: null, profile: profileId }));
        }
    }

    render() {
        let { intl, profiles, countries, states, valueOf } = this.props;
        let formProps = { disabled: this.props.disabled };
        let profile = profiles && profiles[valueOf("profile")];

        let statesField = null;
        if (profile && states && states[profile.country]) {
            statesField = this.renderSelect("state", intl.formatMessage(messages.profileState), states[profile.country] || [], { 
                ...formProps,
                valueKey: "id",
                labelKey: "stateName", 
             });
        }

        return (
            <div className={ `form ${this.props.className}` } style={{ paddingBottom: 200 }}>
                <div className="pv20 init-settings-jumbotron">{ intl.formatMessage(messages.profileMessage) }</div>
                { this.renderSelect("profile", intl.formatMessage(messages.profileCountry), countries || [], { 
                    onChange: this.changeProfile,
                    valueKey: "id", 
                    labelKey: "countryName", 
                    ...formProps }) 
                }
                { statesField }
            </div>
        );
    }

}


export default form(ProfileSettings);


