import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import { useDirection, useI18n, useUID } from '../../hooks';
import HiddenText from '../HiddenText';
import { calculateFontSize } from '../../styles';
import Button from '../Button';
import Flex from '../Flex';
import Icon, { StyledIcon, registerIcon } from '../Icon';
import * as caretRightIcon from '../Icon/icons/caret-right.icon';
import Text from '../Text';
import Count from '../Badges/Count';
registerIcon(caretRightIcon);
export const StyledExpandCollapseButton = styled(Button)(({ $iconOnly, $headingTag, theme }) => {
    const { rtl } = useDirection();
    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
    return css `
    ${!$iconOnly &&
        css `
      font-size: ${fontSize[theme.components.text[$headingTag ?? 'primary']['font-size']]};
    `}

    ${StyledIcon} {
      transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
    }

    &[aria-expanded='true'] ${StyledIcon} {
      transform: rotate(90deg);
    }

    &[aria-expanded='false'] ${StyledIcon} {
      transform: rotate(${rtl ? 180 : 0}deg);
    }
  `;
});
StyledExpandCollapseButton.defaultProps = defaultThemeProp;
export default forwardRef(function ExpandCollapseButton({ expanded, onToggle, label, iconOnly = false, count, compact, 'aria-labelledby': labelledBy, ...restProps }, ref) {
    const t = useI18n();
    const hiddenTextId = useUID();
    const toggleText = expanded ? t('collapse') : t('expand');
    let ariaLabel;
    let ariaLabelledBy;
    if (labelledBy && !label) {
        ariaLabelledBy = `${hiddenTextId} ${labelledBy}`;
    }
    else if (iconOnly) {
        if (label) {
            const labelText = typeof label === 'string' ? label : label.text;
            ariaLabel = `${toggleText} - ${labelText}`;
        }
        else {
            ariaLabel = toggleText;
        }
    }
    const tooltipText = iconOnly ? toggleText : undefined;
    let renderedLabel;
    let headingTag;
    if (iconOnly || !label) {
        renderedLabel = null;
    }
    else if (typeof label === 'string') {
        renderedLabel = _jsx("span", { children: label });
    }
    else {
        renderedLabel = _jsx(Text, { variant: label.headingTag, children: label.text });
        headingTag = label.headingTag;
    }
    let renderedCount;
    if (iconOnly || count === undefined) {
        renderedCount = null;
    }
    else if (typeof count === 'number' || count === null) {
        renderedCount = _jsx(Count, { children: count });
    }
    else {
        renderedCount = _jsx(Count, { ...count });
    }
    return (_jsxs(StyledExpandCollapseButton, { ...restProps, ref: ref, onClick: onToggle, "aria-expanded": expanded, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, label: tooltipText, icon: iconOnly, compact: compact, variant: iconOnly ? 'simple' : 'text', "$iconOnly": iconOnly, "$headingTag": headingTag, children: [labelledBy && !label && _jsx(HiddenText, { id: hiddenTextId, children: `${toggleText} - ` }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, as: 'span', children: [_jsx(Icon, { name: 'caret-right', size: !iconOnly ? 'font-size' : undefined }), renderedLabel, renderedCount] })] }));
});
//# sourceMappingURL=ExpandCollapseButton.js.map