/* index.tsx generated by @compiled/babel-plugin v0.39.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, { LozengeDropdownTrigger } 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",
  lozengeDropdownContainer: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
};
const textStyles = null;
const triggerLozengeStyles = null;
const triggerButtonStyles = null;
const LozengeActionTrigger = ({
  appearance,
  isOpen,
  maxWidth,
  testId,
  text,
  triggerRef,
  trailingMetric,
  ...props
}) => {
  const intl = useIntl();
  const [isPressing, setIsPressing] = useState(false);
  const [lozengeBackgroundColor, setLozengeBackgroundColor] = useState(undefined);
  const [lozengeForegroundColor, setLozengeForegroundColor] = useState(undefined);
  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) {
      setLozengeBackgroundColor("var(--ds-background-selected, #E9F2FE)");
      setLozengeForegroundColor("var(--ds-text-selected, #1868DB)");
    } else {
      setLozengeBackgroundColor(undefined);
      setLozengeForegroundColor(undefined);
    }
  }, [isPressing, isOpen]);
  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: true,
      maxWidth: maxWidth
      // 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", {
      className: ax(["_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
    }, text), /*#__PURE__*/React.createElement(Box, {
      as: "span",
      xcss: styles.chevronDown
    }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
      color: "currentColor",
      label: "options",
      size: "small",
      "aria-hidden": true
    })))));
  }, [appearance, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor, maxWidth]);
  return fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? /*#__PURE__*/React.createElement(Box, {
    xcss: styles.lozengeDropdownContainer
  }, /*#__PURE__*/React.createElement(LozengeDropdownTrigger, _extends({}, props, {
    appearance: appearance,
    trailingMetric: trailingMetric,
    "data-action-open": isOpen,
    "data-testid": `${testId}--trigger`,
    maxWidth: maxWidth,
    testId: testId,
    ref: triggerRef,
    "aria-label": fg('platform_navx_flex_card_status_dropdown_a11y_fix') ?
    // The `as unknown` type cast is needed for react-intl v7 upgrade
    intl.formatMessage(messages.change_status, {
      status: text
    }) : undefined
  }), text)) : /*#__PURE__*/React.createElement("button", _extends({
    type: "button"
  }, props, {
    "data-action-open": isOpen,
    "data-testid": `${testId}--trigger`,
    style: {
      maxWidth
    },
    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 _1ejj1y54 _1u6l1y54 _6ssh1y54"])
  }), lozenge);
};
export default LozengeActionTrigger;