/* 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/. */

// @nova-cleanup(move-directory): Move to components/CustomizeMenu/WidgetsManagementPanel/ after Nova ships

import React, { useEffect, useRef } from "react";
import { batch, useDispatch } from "react-redux";
import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
// eslint-disable-next-line no-shadow
import { CSSTransition } from "react-transition-group";

function WidgetsManagementPanel({
  exitEventFired,
  onSubpanelToggle,
  togglePanel,
  showPanel,
  enabledSections,
  enabledWidgets,
  mayHaveWeather,
  mayHaveTimerWidget,
  mayHaveListsWidget,
  mayHaveWeatherForecast,
  weatherDisplay,
  setPref,
}) {
  const arrowButtonRef = useRef(null);
  const panelRef = useRef(null);
  const dispatch = useDispatch();

  // Close widget subpanel when parent menu is closed
  useEffect(() => {
    if (exitEventFired && showPanel) {
      togglePanel();
    }
  }, [exitEventFired, showPanel, togglePanel]);

  // Notify parent menu when subpanel opens/closes
  useEffect(() => {
    if (onSubpanelToggle) {
      onSubpanelToggle(showPanel);
    }
  }, [showPanel, onSubpanelToggle]);

  const handlePanelEntered = () => {
    arrowButtonRef.current?.focus();
  };

  const onToggleWidget = e => {
    const { preference, eventSource } = e.target.dataset;
    const value = e.target.pressed;

    batch(() => {
      dispatch(
        ac.UserEvent({
          event: "PREF_CHANGED",
          source: eventSource,
          value: { status: value, menu_source: "CUSTOMIZE_MENU" },
        })
      );

      let widgetName;
      switch (eventSource) {
        case "WEATHER":
          widgetName = "weather";
          break;
        case "WIDGET_LISTS":
          widgetName = "lists";
          break;
        case "WIDGET_TIMER":
          widgetName = "focus_timer";
          break;
      }

      if (widgetName) {
        const { widgetsMaximized, widgetsMayBeMaximized } = enabledWidgets;

        let widgetSize;
        if (widgetName === "weather") {
          if (mayHaveWeatherForecast && weatherDisplay === "detailed") {
            widgetSize =
              widgetsMayBeMaximized && !widgetsMaximized ? "small" : "medium";
          } else {
            widgetSize = "mini";
          }
        } else {
          widgetSize =
            widgetsMayBeMaximized && !widgetsMaximized ? "small" : "medium";
        }

        dispatch(
          ac.OnlyToMain({
            type: at.WIDGETS_ENABLED,
            data: {
              widget_name: widgetName,
              widget_source: "customize_panel",
              enabled: value,
              widget_size: widgetSize,
            },
          })
        );
      }

      setPref(preference, value);
    });
  };

  const { weatherEnabled } = enabledSections;
  const { timerEnabled, listsEnabled } = enabledWidgets;

  return (
    <div id="widgets-management-panel" className="widgets-mgmt-panel-container">
      <moz-box-button
        onClick={togglePanel}
        data-l10n-id="newtab-widget-manage-widget-button"
      ></moz-box-button>
      <CSSTransition
        nodeRef={panelRef}
        in={showPanel}
        timeout={300}
        classNames="widgets-mgmt-panel"
        unmountOnExit={true}
        onEntered={handlePanelEntered}
      >
        <div ref={panelRef} className="widgets-mgmt-panel">
          <button
            ref={arrowButtonRef}
            className="arrow-button"
            onClick={togglePanel}
          >
            <h1 data-l10n-id="newtab-widget-manage-title"></h1>
          </button>
          <div className="settings-widgets">
            {mayHaveWeather && (
              <div id="weather-section" className="section">
                {/** @backward-compat { version 150 } React 16 (cached page) uses ontoggle; React 19 uses onToggle. Remove onToggle once Firefox 150 reaches Release. */}
                <moz-toggle
                  id="weather-toggle"
                  pressed={weatherEnabled || null}
                  ontoggle={onToggleWidget}
                  onToggle={onToggleWidget}
                  data-preference="showWeather"
                  data-event-source="WEATHER"
                  data-l10n-id="newtab-custom-widget-weather-toggle"
                />
              </div>
            )}
            {mayHaveTimerWidget && (
              <div id="timer-widget-section" className="section">
                {/** @backward-compat { version 150 } React 16 (cached page) uses ontoggle; React 19 uses onToggle. Remove onToggle once Firefox 150 reaches Release. */}
                <moz-toggle
                  id="timer-toggle"
                  pressed={timerEnabled || null}
                  ontoggle={onToggleWidget}
                  onToggle={onToggleWidget}
                  data-preference="widgets.focusTimer.enabled"
                  data-event-source="WIDGET_TIMER"
                  data-l10n-id="newtab-custom-widget-timer-toggle"
                />
              </div>
            )}
            {mayHaveListsWidget && (
              <div id="lists-widget-section" className="section">
                {/** @backward-compat { version 150 } React 16 (cached page) uses ontoggle; React 19 uses onToggle. Remove onToggle once Firefox 150 reaches Release. */}
                <moz-toggle
                  id="lists-toggle"
                  pressed={listsEnabled || null}
                  ontoggle={onToggleWidget}
                  onToggle={onToggleWidget}
                  data-preference="widgets.lists.enabled"
                  data-event-source="WIDGET_LISTS"
                  data-l10n-id="newtab-custom-widget-lists-toggle"
                />
              </div>
            )}
          </div>
        </div>
      </CSSTransition>
    </div>
  );
}

export { WidgetsManagementPanel };