/*
 *
 * LanguageProvider
 *
 * this component connects the redux state language locale to the
 * IntlProvider component and i18n messages (loaded from `app/translations`)
 */

import PropTypes from 'prop-types';

import React from 'react';
import { ConfigProvider } from 'antd';
import enUS from 'antd/es/locale-provider/en_US';
import zhCN from 'antd/es/locale-provider/zh_CN';
import jaJP from 'antd/es/locale-provider/ja_JP';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { IntlProvider } from 'react-intl';
import moment from 'moment';
import { bindActionCreators, compose } from 'redux';
import * as actions from './actions';
import { makeSelectLocale } from './selectors';
import { makeSelectUser } from '../Cap/selectors';
import { LanguageProviderRootSaga } from './sagas';
import injectSaga from '../../utils/injectSaga';
import injectReducer from '../../utils/injectReducer';
import reducer from './reducer';

export class LanguageProvider extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  componentDidUpdate(prevProps) {
    const prevUser = prevProps.user;
    const user = this.props.user;
    if (!prevUser && user) {
      this.updateLocale();
    }
  }
  /*global getMappedLocale */
  getMappedLocale = (locale) => {
    const map = {
      'en': 'en-US',
      'zh-cn': 'zh',
      'zh': 'zh',
      'en-US': 'en-US',
      'ja-JP': 'ja-JP',
    };
    return map[locale];
  };
  updateLocale() {
    const user = localStorage.getItem('user');
    let locale = localStorage.getItem('jlocale') || 'en';
    moment.locale(locale);
    if (user) {
      locale = JSON.parse(user).lang || locale;
    }
    locale = this.getMappedLocale(locale);
    this.props.actions.getLocizMessage(locale);
  }
  render() {
    const { locale, messages, languageLocale} = this.props.language;
    const mappedLocale = {
      'en': enUS,
      'zh-cn': zhCN,
      'en-US': enUS,
      'zh': zhCN,
      'ja-JP': jaJP,
    };
    const jLocale = localStorage.getItem('jlocale') || 'en';
    const file = mappedLocale[jLocale];
    return (
      <ConfigProvider locale={file}>
        <IntlProvider locale={languageLocale} key={locale} messages={messages}>
          {React.Children.only(this.props.children)}
        </IntlProvider>
      </ConfigProvider>
    );
  }
}

LanguageProvider.propTypes = {
  language: PropTypes.object,
  actions: PropTypes.object,
  children: PropTypes.element.isRequired,
  user: PropTypes.object,
};


const mapStateToProps = createStructuredSelector({
  language: makeSelectLocale(),
  user: makeSelectUser(),
});

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch),
  };
}

const withSaga = injectSaga({ key: 'language', saga: LanguageProviderRootSaga });
const withReducer = injectReducer({ key: 'language', reducer });

const withConnect = connect(mapStateToProps, mapDispatchToProps);

export default compose(
  withSaga,
  withReducer,
  withConnect,
)(LanguageProvider);
