import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { useCallback, useMemo } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { useIntl } from 'react-intl';
import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
import Button from '@atlaskit/button/new';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Box, xcss, Inline } from '@atlaskit/primitives';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import Tooltip from '@atlaskit/tooltip';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
import { colorPickerButtonMessages } from '../../messages/color-picker-button';
import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
import { withReactEditorViewOuterListeners } from '../../ui-react';
import { default as Popup } from '../../ui/Popup';
import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';

// helps adjusts position of popup
var colorPickerButtonWrapper = css({
  position: 'relative'
});
var colorPickerExpandContainerVisualRefresh = xcss({
  marginTop: 'space.negative.025',
  marginRight: 'space.negative.050'
});
var colorPickerButtonStyle = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  button: {
    '&::after': {
      border: 'none'
    },
    '&:hover': {
      backgroundColor: "var(--ds-background-selected, #E9F2FE)"
    }
  }
});

// Control the size of color picker buttons and preview
// TODO: DSP-4134 - Color picking UI
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
var colorPickerWrapper = function colorPickerWrapper() {
  return css({
    borderRadius: "var(--ds-radius-small, 3px)",
    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
    padding: "var(--ds-space-100, 8px)".concat(" 0px")
  });
};
/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

var ColorPaletteWithReactViewListeners = withReactEditorViewOuterListeners(ColorPalette);
var COLOR_PICKER_POPUP_OFFSET = [0, 10];
var ColorPickerButton = function ColorPickerButton(props) {
  var buttonRef = React.useRef(null);
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isPopupOpen = _React$useState2[0],
    setIsPopupOpen = _React$useState2[1];
  var _React$useState3 = React.useState(false),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    isPopupPositioned = _React$useState4[0],
    setIsPopupPositioned = _React$useState4[1];
  var _React$useState5 = React.useState(false),
    _React$useState6 = _slicedToArray(_React$useState5, 2),
    isOpenedByKeyboard = _React$useState6[0],
    setIsOpenedByKeyboard = _React$useState6[1];
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var memoizedHandleClose = useCallback(function () {
    return setIsPopupOpen(false);
  }, [setIsPopupOpen]);
  var handleClose = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedHandleClose : function () {
    return setIsPopupOpen(false);
  };
  var memoizedTogglePopup = useCallback(function () {
    setIsPopupOpen(function (prevIsOpen) {
      if (!prevIsOpen) {
        setIsOpenedByKeyboard(false);
        setIsPopupPositioned(false);
      }
      return !prevIsOpen;
    });
  }, []);
  var togglePopup = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedTogglePopup : function () {
    setIsPopupOpen(!isPopupOpen);
    if (!isPopupOpen) {
      setIsOpenedByKeyboard(false);
      setIsPopupPositioned(false);
    }
  };
  var memoizedOnKeyDown = useCallback(function (event) {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      memoizedTogglePopup();
      setIsOpenedByKeyboard(true);
    }
  }, [memoizedTogglePopup]);
  var onKeyDown = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnKeyDown : function (event) {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      togglePopup();
      setIsOpenedByKeyboard(true);
    }
  };
  var memoizedPaletteOptions = useMemo(function () {
    return {
      palette: props.colorPalette,
      hexToPaletteColor: props.hexToPaletteColor,
      paletteColorTooltipMessages: props.paletteColorTooltipMessages
    };
  }, [props.colorPalette, props.hexToPaletteColor, props.paletteColorTooltipMessages]);
  var paletteOptions = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedPaletteOptions : {
    palette: props.colorPalette,
    hexToPaletteColor: props.hexToPaletteColor,
    paletteColorTooltipMessages: props.paletteColorTooltipMessages
  };
  React.useEffect(function () {
    if (props.setDisableParentScroll) {
      props.setDisableParentScroll(isPopupOpen);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isPopupOpen]);
  var focusButton = function focusButton() {
    var _buttonRef$current;
    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
  };
  var handleEsc = React.useCallback(function () {
    setIsOpenedByKeyboard(false);
    setIsPopupPositioned(false);
    setIsPopupOpen(false);
    focusButton();
  }, []);
  var onPositionCalculated = React.useCallback(function (position) {
    setIsPopupPositioned(true);
    return position;
  }, []);
  var onChange = props.onChange,
    createAnalyticsEvent = props.createAnalyticsEvent,
    colorPalette = props.colorPalette,
    placement = props.placement,
    skipFocusButtonAfterPick = props.skipFocusButtonAfterPick;
  var onColorSelected = React.useCallback(function (color, label) {
    setIsOpenedByKeyboard(false);
    setIsPopupOpen(false);
    setIsPopupPositioned(false);
    if (onChange) {
      if (createAnalyticsEvent) {
        // fire analytics
        var payload = {
          action: ACTION.UPDATED,
          actionSubject: ACTION_SUBJECT.PICKER,
          actionSubjectId: ACTION_SUBJECT_ID.PICKER_COLOR,
          attributes: {
            color: color,
            label: label,
            placement: placement
          },
          eventType: EVENT_TYPE.TRACK
        };
        createAnalyticsEvent(payload).fire(editorAnalyticsChannel);
      }
      var newPalette = colorPalette.find(function (colorPalette) {
        return colorPalette.value === color;
      });
      newPalette && onChange(newPalette);
    }
    if (!skipFocusButtonAfterPick) {
      focusButton();
    }
  }, [colorPalette, onChange, createAnalyticsEvent, placement, skipFocusButtonAfterPick]);
  var renderPopup = function renderPopup() {
    if (!isPopupOpen || !buttonRef.current) {
      return;
    }
    var selectedColor = props.currentColor || null;
    var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(props.colorPalette, selectedColor, props.cols),
      selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
      selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
    return jsx(Popup, {
      target: buttonRef.current,
      fitHeight: 350,
      fitWidth: 350,
      offset: expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? COLOR_PICKER_POPUP_OFFSET : [0, 10],
      alignX: props.alignX,
      mountTo: props.setDisableParentScroll ? props.mountPoint : undefined,
      absoluteOffset: props.absoluteOffset
      // Confluence inline comment editor has z-index: 500
      // if the toolbar is scrollable, this will be mounted in the root editor
      // we need an index of > 500 to display over it
      ,
      zIndex: props.setDisableParentScroll ? 600 : undefined,
      ariaLabel: formatMessage(colorPickerButtonMessages.colorPickerMenuLabel),
      onPositionCalculated: onPositionCalculated
    }, jsx("div", {
      css: colorPickerWrapper,
      "data-test-id": "color-picker-menu"
    }, jsx(ArrowKeyNavigationProvider, {
      type: ArrowKeyNavigationType.COLOR,
      selectedRowIndex: selectedRowIndex,
      selectedColumnIndex: selectedColumnIndex,
      closeOnTab: true,
      handleClose: handleClose,
      isOpenedByKeyboard: isOpenedByKeyboard,
      isPopupPositioned: isPopupPositioned,
      ignoreEscapeKey: props.returnEscToButton
    }, jsx(ColorPaletteWithReactViewListeners, {
      cols: props.cols,
      selectedColor: selectedColor,
      onClick: onColorSelected,
      handleClickOutside: togglePopup,
      handleEscapeKeydown: handleEsc,
      paletteOptions: paletteOptions
    }))));
  };
  var title = props.title || '';
  var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
  var buttonStyleVisualRefresh = function buttonStyleVisualRefresh() {
    var _props$size, _props$size2, _props$size3;
    return css({
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
      height: "".concat(!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) ? 'inherit' : ''),
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
      '&:before': {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'center',
        content: "''",
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
        border: "var(--ds-border-width, 1px)".concat(" solid ", DEFAULT_BORDER_COLOR),
        borderRadius: "var(--ds-radius-small, 3px)",
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
        backgroundColor: currentColor || 'transparent',
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
        width: ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px',
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
        height: ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px',
        marginTop: "var(--ds-space-025, 2px)"
      }
    });
  };
  return jsx("div", {
    css: colorPickerButtonWrapper
  }, jsx(Tooltip, {
    content: title,
    position: "top"
  }, jsx("div", {
    css: colorPickerButtonStyle
  }, jsx(Button, {
    appearance: 'subtle',
    ref: buttonRef,
    "aria-label": title,
    "aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
    spacing: editorExperiment('platform_editor_controls', 'variant1') ? 'default' : 'compact',
    onClick: togglePopup,
    onKeyDown: onKeyDown,
    "data-selected-color": props.currentColor,
    isSelected: isPopupOpen
  }, jsx(Inline, {
    alignBlock: "start"
  }, jsx("span", {
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
    css: buttonStyleVisualRefresh
  }), jsx(Box, {
    xcss: colorPickerExpandContainerVisualRefresh
  }, jsx(ChevronDownIcon, {
    color: "currentColor",
    spacing: "spacious",
    label: "color-picker-chevron-down",
    size: "small"
  })))))), renderPopup());
};
var _default_1 = withAnalyticsContext({
  source: 'ConfigPanel'
})(withAnalyticsEvents()(ColorPickerButton));
export default _default_1;