import PropTypes from "prop-types";
import { Button } from "antd";
import { useLocation } from "react-router-dom";
import { PiMicrosoftTeamsLogo } from "react-icons/pi";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors.js";
import { logImEXEvent } from "../../firebase/firebase.utils.js";

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

/**
 * ShareToTeamsButton component for sharing content to Microsoft Teams via an HTTP link.
 *
 * This component creates a button or link that opens the Microsoft Teams share dialog with
 * the provided URL, title, and message text through query parameters. The popup window is centered on the screen.
 *
 * @param {Object} props - The component's props.
 * @param {string} [props.messageTextOverride] - Custom message text for sharing.
 * @param {string} [props.urlOverride] - Custom URL to share instead of the current page's URL.
 * @param {string} [props.pageTitleOverride] - Custom title for the shared page.
 * @param {boolean} [props.noIcon=false] - If true, renders as a simple text link instead of a button with an icon.
 * @param {Object} [props.noIconStyle={}] - Style object for the text link when noIcon is true.
 * @param {Object} [props.buttonStyle={}] - Style object for the Ant Design button.
 * @param {Object} [props.buttonIconStyle={}] - Style object for the icon within the button.
 * @param {string} [props.linkText] - Text to display on the button or link.
 * @returns {React.ReactElement} A button or text link for sharing to Microsoft Teams.
 */
const ShareToTeamsComponent = ({
  bodyshop,
  messageTextOverride,
  urlOverride,
  pageTitleOverride,
  noIcon = false,
  noIconStyle = {},
  buttonStyle = {},
  buttonIconStyle = {},
  linkText
}) => {
  const location = useLocation();
  const { t } = useTranslation();
  const currentUrl =
    urlOverride ||
    encodeURIComponent(`${window.location.origin}${location.pathname}${location.search}${location.hash}`);
  const pageTitle =
    pageTitleOverride ||
    encodeURIComponent(typeof document !== "undefined" ? document.title : t("general.actions.sharetoteams"));
  const messageText = messageTextOverride || encodeURIComponent(t("general.actions.sharetoteams"));
  // Construct the Teams share URL with parameters
  const teamsShareUrl = `https://teams.microsoft.com/share?href=${currentUrl}&preText=${messageText}&title=${pageTitle}`;
  // Function to open the centered share link in a new window/tab
  const handleShare = () => {
    logImEXEvent("share_to_teams", {});
    const screenWidth = window.screen.width;
    const screenHeight = window.screen.height;
    const windowWidth = 600;
    const windowHeight = 400;
    const left = screenWidth / 2 - windowWidth / 2;
    const top = screenHeight / 2 - windowHeight / 2;
    const windowFeatures = `width=${windowWidth},height=${windowHeight},left=${left},top=${top}`;
    // noinspection JSIgnoredPromiseFromCall
    window.open(teamsShareUrl, "_blank", windowFeatures);
  };
  // Feature is disabled
  if (!bodyshop?.md_functionality_toggles?.teams) {
    return null;
  }
  if (noIcon) {
    return (
      <div style={{ cursor: "pointer", ...noIconStyle }} onClick={handleShare}>
        {!linkText ? t("general.actions.sharetoteams") : linkText}
      </div>
    );
  }
  return (
    <Button
      style={{
        backgroundColor: "var(--teams-button-bg)",
        borderColor: "var(--teams-button-border)",
        color: "var(--teams-button-text)",
        ...buttonStyle
      }}
      icon={<PiMicrosoftTeamsLogo style={{ color: "var(--teams-button-text)", ...buttonIconStyle }} />}
      onClick={handleShare}
      title={linkText === null ? t("general.actions.sharetoteams") : linkText}
    />
  );
};

ShareToTeamsComponent.propTypes = {
  messageTextOverride: PropTypes.string,
  urlOverride: PropTypes.string,
  pageTitleOverride: PropTypes.string,
  noIcon: PropTypes.bool,
  noIconStyle: PropTypes.object,
  buttonStyle: PropTypes.object,
  buttonIconStyle: PropTypes.object,
  linkText: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
};

export default connect(mapStateToProps)(ShareToTeamsComponent);
