import React from "react";
import HeaderComponent from "./header.component";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import i18next from "i18next";
import { setUserLanguage, signOutStart } from "../../redux/user/user.actions";
import {
  selectCurrentUser,
  selectBodyshop
} from "../../redux/user/user.selectors";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  bodyshop: selectBodyshop
});

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

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(function HeaderContainer({
  landingHeader,
  currentUser,
  bodyshop,
  signOutStart,
  setUserLanguage
}) {
  const handleMenuClick = e => {
    if (e.item.props.actiontype === "lang-select") {
      i18next.changeLanguage(e.key, (err, t) => {
        if (err)
          return console.log("Error encountered when changing languages.", err);
        setUserLanguage(e.key);
      });
    }
  };

  return (
    <HeaderComponent
      handleMenuClick={handleMenuClick}
      signOutStart={signOutStart}
      landingHeader={landingHeader}
      selectedNavItem={null}
      currentUser={currentUser}
      logo={bodyshop ? bodyshop.logo_img_path : null}
    />
  );
});
