/* 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 http://mozilla.org/MPL/2.0/. */

import { ContentSection } from "content-src/components/CustomizeMenu/ContentSection/ContentSection";
import { connect } from "react-redux";
import React from "react";

const PREF_NOVA_ENABLED = "nova.enabled";
// eslint-disable-next-line no-shadow
import { CSSTransition } from "react-transition-group";

export class _CustomizeMenu extends React.PureComponent {
  constructor(props) {
    super(props);
    this.onEntered = this.onEntered.bind(this);
    this.onExited = this.onExited.bind(this);
    this.onSubpanelToggle = this.onSubpanelToggle.bind(this);
    this.personalizeButtonRef = React.createRef();
    this.customizeMenuRef = React.createRef();
    this.closeButtonRef = React.createRef();
    this.state = {
      exitEventFired: false,
      subpanelOpen: false,
    };
  }

  onSubpanelToggle(isOpen) {
    this.setState({ subpanelOpen: isOpen });
  }

  onEntered() {
    this.setState({ exitEventFired: false });
    if (this.closeButtonRef.current) {
      this.closeButtonRef.current.focus();
    }
  }

  onExited() {
    this.setState({ exitEventFired: true });
    if (this.personalizeButtonRef.current) {
      this.personalizeButtonRef.current.focus();
    }
  }

  render() {
    const activationWindowVariant =
      this.props.Prefs.values["activationWindow.variant"];

    const activationWindowClass = activationWindowVariant
      ? `activation-window-variant-${activationWindowVariant}`
      : "";
    // @nova-cleanup(remove-pref): remove nova pref
    const novaEnabled = this.props.Prefs.values[PREF_NOVA_ENABLED];

    return (
      <span>
        <CSSTransition
          nodeRef={this.personalizeButtonRef}
          timeout={300}
          classNames="personalize-animate"
          in={!this.props.showing}
          appear={true}
        >
          <button
            ref={this.personalizeButtonRef}
            className={`${activationWindowClass} personalize-button`}
            data-l10n-id="newtab-customize-panel-icon-button"
            aria-haspopup="dialog"
            onClick={() => this.props.onOpen()}
            onKeyDown={e => {
              if (e.key === "Enter") {
                this.props.onOpen();
              }
            }}
          >
            <label data-l10n-id="newtab-customize-panel-icon-button-label" />
            <div>
              <img
                role="presentation"
                src="chrome://global/skin/icons/edit-outline.svg"
              />
            </div>
          </button>
        </CSSTransition>
        <CSSTransition
          nodeRef={this.customizeMenuRef}
          timeout={250}
          classNames="customize-animate"
          in={this.props.showing}
          onEntered={this.onEntered}
          onExited={this.onExited}
          appear={true}
        >
          <div
            ref={this.customizeMenuRef}
            className="customize-menu-animate-wrapper"
          >
            <div
              // @nova-cleanup(remove-conditional): Remove nova-enabled class
              className={`customize-menu ${
                this.state.subpanelOpen ? "subpanel-open" : ""
              } ${novaEnabled ? "nova-enabled" : ""}`}
              role="dialog"
              data-l10n-id="newtab-settings-dialog-label"
            >
              <div className="close-button-wrapper">
                <moz-button
                  onClick={() => this.props.onClose()}
                  id="close-button"
                  type="icon ghost"
                  data-l10n-id="newtab-custom-close-menu-button"
                  iconsrc="chrome://global/skin/icons/close.svg"
                  ref={this.closeButtonRef}
                ></moz-button>
              </div>
              <ContentSection
                openPreferences={this.props.openPreferences}
                setPref={this.props.setPref}
                enabledSections={this.props.enabledSections}
                enabledWidgets={this.props.enabledWidgets}
                wallpapersEnabled={this.props.wallpapersEnabled}
                activeWallpaper={this.props.activeWallpaper}
                pocketRegion={this.props.pocketRegion}
                mayHaveTopicSections={this.props.mayHaveTopicSections}
                mayHaveInferredPersonalization={
                  this.props.mayHaveInferredPersonalization
                }
                mayHaveWeather={this.props.mayHaveWeather}
                mayHaveWidgets={this.props.mayHaveWidgets}
                mayHaveWeatherForecast={this.props.mayHaveWeatherForecast}
                weatherDisplay={this.props.weatherDisplay}
                mayHaveTimerWidget={this.props.mayHaveTimerWidget}
                mayHaveListsWidget={this.props.mayHaveListsWidget}
                dispatch={this.props.dispatch}
                exitEventFired={this.state.exitEventFired}
                onSubpanelToggle={this.onSubpanelToggle}
                toggleSectionsMgmtPanel={this.props.toggleSectionsMgmtPanel}
                showSectionsMgmtPanel={this.props.showSectionsMgmtPanel}
                novaEnabled={novaEnabled}
                toggleWidgetsManagementPanel={
                  this.props.toggleWidgetsManagementPanel
                }
                showWidgetsManagementPanel={
                  this.props.showWidgetsManagementPanel
                }
                widgetsEnabled={this.props.widgetsEnabled}
              />
            </div>
          </div>
        </CSSTransition>
      </span>
    );
  }
}

export const CustomizeMenu = connect(state => ({
  DiscoveryStream: state.DiscoveryStream,
  Prefs: state.Prefs,
}))(_CustomizeMenu);