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

import { LanguageMenu } from '@doodle/components';

import { changeLocale } from '../../state/actions';
import defaultLocales from '../../locales';

class LocaleSwitcher extends Component {
  static propTypes = {
    currentLocale: PropTypes.string.isRequired,
    locales: PropTypes.object,
    onChangeLocale: PropTypes.func.isRequired,
    cookieDomain: PropTypes.string.isRequired,
  };

  static defaultProps = {
    locales: defaultLocales,
  };

  render() {
    const { currentLocale, locales, onChangeLocale, cookieDomain } = this.props;

    const items = Object.entries(locales).map(([locale, label]) => ({
      label,
      action: () => onChangeLocale(locale, cookieDomain),
    }));

    return (
      <LanguageMenu className="LocaleSwitcher" items={items}>
        {locales[currentLocale]}
      </LanguageMenu>
    );
  }
}

const mapStateToProps = state => ({
  currentLocale: state.i18n.locale,
});

const mapDispatchToProps = dispatch => ({
  onChangeLocale: (locale, cookieDomain) => {
    dispatch(changeLocale(locale, cookieDomain));
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LocaleSwitcher);