import i18next from "i18next";
import React from "react";
import { connect } from "react-redux";
import { setUserLanguage } from "../../redux/user/user.actions";
import HeaderComponent from "./header.component";
import { logImEXEvent } from "../../firebase/firebase.utils";

const mapDispatchToProps = (dispatch) => ({
  setUserLanguage: (language) => dispatch(setUserLanguage(language)),
});

export function HeaderContainer({ setUserLanguage }) {
  const handleMenuClick = (e) => {
    if (e.item.props.actiontype === "lang-select") {
      i18next.changeLanguage(e.key, (err, t) => {
        if (err) {
          logImEXEvent("language_change_error", { error: err });

          return console.log("Error encountered when changing languages.", err);
        }
        logImEXEvent("language_change", { language: e.key });

        setUserLanguage(e.key);
      });
    }
  };

  return <HeaderComponent handleMenuClick={handleMenuClick} />;
}

export default connect(null, mapDispatchToProps)(HeaderContainer);