/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

import React, { useState } from "react";

const ADD_ICON = "chrome://global/skin/icons/plus.svg";
const CHECK_ICON = "chrome://global/skin/icons/check.svg";
const CLOSE_ICON = "chrome://global/skin/icons/close.svg";

export function SectionFollowButton({
  following,
  onFollowClick,
  onUnfollowClick,
  title,
}) {
  const [isHovered, setIsHovered] = useState(false);
  const [justFollowed, setJustFollowed] = useState(false);
  // This key is incremented on mouse leave / blur to remount moz-button and
  // restore it to its icon-only state.
  const [remountKey, setRemountKey] = useState(0);
  const isJustFollowed = following && isHovered && justFollowed;
  const isUnfollowing = following && isHovered && !justFollowed;

  let followButtonL10nId = "newtab-section-follow-button";
  let icon = ADD_ICON;
  let buttonType = "default";

  if (isJustFollowed) {
    followButtonL10nId = "newtab-section-following-button";
    icon = CHECK_ICON;
    buttonType = "primary";
  } else if (isUnfollowing) {
    followButtonL10nId = "newtab-section-unfollow-button";
    icon = CLOSE_ICON;
    buttonType = "destructive";
  } else if (isHovered) {
    buttonType = "primary";
  } else if (following) {
    icon = CHECK_ICON;
  }

  // Bug 2030391 - Provide an aria-label for the default icon state
  const labelL10nId = following
    ? "newtab-section-unfollow-button-label"
    : "newtab-section-follow-button-label";
  const labelL10nArgs = JSON.stringify({ topic: title });

  const handleFollowClick = () => {
    setJustFollowed(true);
    onFollowClick();
  };

  const hoverHandlers = {
    onMouseEnter: () => setIsHovered(true),
    onMouseLeave: () => {
      setIsHovered(false);
      setJustFollowed(false);
      setRemountKey(k => k + 1);
    },
    onFocus: () => setIsHovered(true),
    onBlur: () => {
      setIsHovered(false);
      setJustFollowed(false);
      setRemountKey(k => k + 1);
    },
  };

  return (
    <div
      className={`section-follow${following ? " following" : ""}`}
      {...hoverHandlers}
    >
      <moz-button
        key={remountKey}
        type={buttonType}
        iconsrc={icon}
        onClick={following ? onUnfollowClick : handleFollowClick}
        data-l10n-id={isHovered ? followButtonL10nId : labelL10nId}
        data-l10n-args={isHovered ? null : labelL10nArgs}
      ></moz-button>
    </div>
  );
}