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

import LanguageMenu from '@doodle/components/controls/LanguageMenu';

import flags from './localeFlagsHelper';
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,
  };

  static defaultProps = {
    locales: defaultLocales,
  };

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

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

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

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

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

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