/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./index.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
/* eslint-disable @atlaskit/design-system/use-tokens-typography */

import { useCallback, useEffect, useMemo, useState } from 'react';
import { cx } from '@compiled/react';
import { useIntl } from 'react-intl-next';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import Lozenge from '@atlaskit/lozenge';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box } from '@atlaskit/primitives/compiled';
import { messages } from '../../../../../../../../messages';
const styles = {
  chevronDown: "_18u012x7 _1e0c1txw",
  lozengeContainer: "_kkk2n7od _2rko12b0 _1dqonqa1 _189ee4h9 _1h6d1j28 _bfhk1j28 _1e0c1txw _4cvr1h6o _4t3i7vkz",
  lozengeContainerSelected: "_1reo15vq _18m915vq _1h6d1v1w"
};
const triggerLozengeStyles = null;
const triggerButtonStyles = null;
const LozengeActionTrigger = ({
  appearance,
  isOpen,
  testId,
  text,
  triggerRef,
  ...props
}) => {
  const intl = useIntl();
  const [isHovering, setIsHovering] = useState(false);
  const [isPressing, setIsPressing] = useState(false);
  const [lozengeBackgroundColor, setLozengeBackgroundColor] = useState(undefined);
  const [lozengeForegroundColor, setLozengeForegroundColor] = useState(undefined);
  const onMouseEnter = useCallback(() => setIsHovering(true), []);
  const onMouseLeave = useCallback(() => setIsHovering(false), []);
  const onMouseOrKeyDown = useCallback(() => setIsPressing(true), []);
  const onMouseOrKeyUp = useCallback(() => setIsPressing(false), []);
  useEffect(() => {
    if (isPressing) {
      setLozengeBackgroundColor("var(--ds-background-selected-pressed, #8FB8F6)");
      setLozengeForegroundColor("var(--ds-text-selected, #1868DB)");
    } else if (isOpen) {
      if (isHovering) {
        setLozengeBackgroundColor("var(--ds-background-selected-hovered, #CFE1FD)");
      } else {
        setLozengeBackgroundColor("var(--ds-background-selected, #E9F2FE)");
      }
      setLozengeForegroundColor("var(--ds-text-selected, #1868DB)");
    } else {
      setLozengeBackgroundColor(undefined);
      setLozengeForegroundColor(undefined);
    }
  }, [isPressing, isOpen, isHovering]);
  const lozenge = useMemo(() => {
    return /*#__PURE__*/React.createElement(Box, {
      xcss: cx(styles.lozengeContainer, (isOpen || isPressing) && styles.lozengeContainerSelected),
      as: "span"
    }, /*#__PURE__*/React.createElement(Lozenge, {
      appearance: appearance,
      isBold: fg('platform-component-visual-refresh') ? true : isHovering
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
      ,
      style: {
        backgroundColor: lozengeBackgroundColor,
        color: lozengeForegroundColor
      }
    }, /*#__PURE__*/React.createElement("span", {
      className: ax(["_4cvr1h6o _1e0c1txw"])
    }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(Box, {
      as: "span",
      xcss: styles.chevronDown
    }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
      color: "currentColor",
      label: "options",
      size: "small",
      "aria-hidden": true
    })))));
  }, [appearance, isHovering, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor]);
  return /*#__PURE__*/React.createElement("button", _extends({
    type: "button"
  }, props, {
    "data-action-open": isOpen,
    "data-testid": `${testId}--trigger`
    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
    ,
    onMouseEnter: onMouseEnter
    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
    ,
    onMouseLeave: onMouseLeave,
    onMouseDown: onMouseOrKeyDown,
    onMouseUp: onMouseOrKeyUp,
    onKeyDown: onMouseOrKeyDown,
    onKeyUp: onMouseOrKeyUp,
    ref: triggerRef,
    "aria-label": fg('platform_navx_flex_card_status_dropdown_a11y_fix') ? intl.formatMessage(messages.change_status, {
      status: text
    }) : undefined,
    className: ax(["_kkk2n7od _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _15vhn7od _1dqonqa1 _189e1dm9 _1h6d1j28 _bfhk1j28 _syazn7od _80omtlke _ect4n7od _1wybn7od _zg8ln7od _k48pn7od _vwz4idpf _1p1dn7od _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _mizu1r31 _1guj1r31 _p8tl1r31 _ra3xglyw _pbhaglyw _1q2vglyw _128m1o36 _11ow1o36 _j8b81o36 _1bas1qi0 _19h61qi0 _1d391qi0 _1ejj1vm4 _1u6l1vm4 _6ssh1vm4"])
  }), lozenge);
};
export default LozengeActionTrigger;