import React from "react";
import PropTypes from "prop-types";
import Flag from "react-flags";
import { IconButton } from "@material-ui/core";
import LanguageMenu from "./LanguageMenu";

const LanguageComponent = ({
  languageIsSet,
  anchorEl,
  onMenuOpen,
  onLanguageChange,
  onClose,
  flag,
  getFlagsPath
}) => {
  return (
    <>
      <IconButton
        aria-controls="language-menu"
        aria-haspopup="true"
        onClick={onMenuOpen}
        color="inherit"
      >
        {languageIsSet && (
          <Flag
            name={flag.name}
            format="png"
            pngSize={32}
            shiny={true}
            basePath={getFlagsPath()}
            alt={flag.alt}
          />
        )}
      </IconButton>
      <LanguageMenu
        anchorEl={anchorEl}
        onLanguageChange={onLanguageChange}
        onClose={onClose}
      />
    </>
  );
};

LanguageComponent.propTypes = {
  languageIsSet: PropTypes.bool.isRequired,
  anchorEl: PropTypes.object,
  onMenuOpen: PropTypes.func.isRequired,
  onLanguageChange: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
  flag: PropTypes.object.isRequired,
  getFlagsPath: PropTypes.func.isRequired
};

export default LanguageComponent;