import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import Text from '../Text';
import Button from '../Button';
import ExpandCollapse from '../ExpandCollapse';
import Flex from '../Flex';
import Grid from '../Grid';
import HTML from '../HTML';
import Icon, { StyledIcon, registerIcon } from '../Icon';
import * as caretRightIcon from '../Icon/icons/caret-right.icon';
import Actions from '../Actions';
import { defaultThemeProp } from '../../theme';
import { useDirection, useI18n, useUID } from '../../hooks';
import { calculateFontSize, omitProps } from '../../styles';
import AdditionalInfo from '../AdditionalInfo';
registerIcon(caretRightIcon);
// Styles
const StyledExpandButton = styled(Button)(({ theme: { base: { animation } } }) => {
    const { rtl } = useDirection();
    return css `
    ${StyledIcon} {
      transition: transform ${animation.speed} ${animation.timing.ease};
    }
    &[aria-expanded='true'] ${StyledIcon} {
      transform: rotate(90deg);
    }
    &[aria-expanded='false'] ${StyledIcon} {
      transform: rotate(${rtl ? 180 : 0}deg);
    }
  `;
});
StyledExpandButton.defaultProps = defaultThemeProp;
export const StyledFieldGroupName = styled.span ``;
export const StyledFieldHeader = styled(Flex) ``;
export const StyledFieldGroupContent = styled(Grid) ``;
export const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))(({ collapsed, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => {
    return css `
      width: 100%;
      margin-bottom: 0;
      ${!collapsed &&
        css `
        margin-block-end: calc(1.5 * ${spacing});
      `}
      transition: margin-block-end ${animation.speed} ${animation.timing.ease};

      > ${StyledExpandButton} {
        min-height: ${hitAreaMouse};

        @media (pointer: 'coarse') {
          min-height: ${hitAreaFinger};
        }
      }
    `;
});
StyledFieldGroupLegend.defaultProps = defaultThemeProp;
export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale }, components: { text } } }) => {
    const fontSizes = calculateFontSize(fontSize, fontScale);
    return css `
      border: none;

      & ${StyledFieldGroupName} {
        font-size: ${fontSizes[text.h3['font-size']]};
        font-weight: ${text.h3['font-weight']};
      }

      & & ${StyledFieldGroupName} {
        font-size: ${fontSizes[text.h4['font-size']]};
        font-weight: ${text.h4['font-weight']};
      }

      & & & ${StyledFieldGroupName} {
        font-size: ${fontSizes[text.h5['font-size']]};
        font-weight: ${text.h5['font-weight']};
      }

      & & & & ${StyledFieldGroupName} {
        font-size: ${fontSizes[text.h6['font-size']]};
        font-weight: ${text.h6['font-weight']};
      }
    `;
});
StyledFieldGroup.defaultProps = defaultThemeProp;
export const StyledGroupContainer = styled.div(({ theme, collapsed, border }) => {
    const { base: { animation: { speed, timing }, palette: { 'border-line': borderColor }, spacing, 'border-radius': baseBorderRadius }, components: { 'form-control': { 'border-width': borderWidth } } } = theme;
    if (!border)
        return null;
    const showBorder = !collapsed;
    return css `
      padding: ${spacing};
      border-radius: calc(${baseBorderRadius} / 2);
      border: ${borderWidth} solid transparent;
      transition-property: border-color;
      transition-duration: ${speed};
      transition-timing-function: ${timing.ease};

      ${showBorder &&
        css `
        border-color: ${borderColor};
      `}
    `;
});
StyledGroupContainer.defaultProps = defaultThemeProp;
// Components
const FieldGroupLegend = ({ name, contextualLabel, children, collapsed, actions, additionalInfo }) => {
    return (_jsx(StyledFieldGroupLegend, { collapsed: collapsed, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 0.5 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledFieldHeader, children: [children, additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, contextualLabel: contextualLabel || name, children: additionalInfo.content }))] }), actions && _jsx(Actions, { items: actions, contextualLabel: contextualLabel })] }) }));
};
const FieldGroup = forwardRef(function FieldGroup({ children, description, name, contextualLabel, additionalInfo, actions, collapsed, headingTag, onToggleCollapsed, variant, ...restProps }, ref) {
    const t = useI18n();
    const uid = useUID();
    const descAndChildren = (_jsxs(StyledFieldGroupContent, { container: { cols: 'minmax(0, 1fr)', gap: 2 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
    return (_jsx(StyledGroupContainer, { border: variant === 'form-group', collapsed: collapsed, children: _jsxs(StyledFieldGroup, { "aria-label": contextualLabel || name, "aria-describedby": description ? `${uid}-description` : undefined, as: name ? 'fieldset' : 'div', ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { collapsed: collapsed, actions: actions, additionalInfo: additionalInfo, name: name, contextualLabel: contextualLabel, children: typeof collapsed === 'boolean' ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
                            onToggleCollapsed?.();
                        }, "aria-expanded": !collapsed, "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun', [
                            contextualLabel || name
                        ]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] }) })) : (_jsx(_Fragment, { children: headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name })) })) })), typeof collapsed === 'boolean' ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: descAndChildren })) : (descAndChildren)] }) }));
});
export default FieldGroup;
//# sourceMappingURL=FieldGroup.js.map