'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: all[name]
    });
}
_export(exports, {
    treeItemPersonaLayoutClassNames: function() {
        return treeItemPersonaLayoutClassNames;
    },
    useTreeItemPersonaLayoutStyles_unstable: function() {
        return useTreeItemPersonaLayoutStyles_unstable;
    }
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _tokens = require("../../utils/tokens");
const _treeItemContext = require("../../contexts/treeItemContext");
const _treeContext = require("../../contexts/treeContext");
const treeItemPersonaLayoutClassNames = {
    root: 'fui-TreeItemPersonaLayout',
    media: 'fui-TreeItemPersonaLayout__media',
    description: 'fui-TreeItemPersonaLayout__description',
    main: 'fui-TreeItemPersonaLayout__main',
    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
    aside: 'fui-TreeItemPersonaLayout__aside',
    actions: 'fui-TreeItemPersonaLayout__actions',
    selector: 'fui-TreeItemPersonaLayout__selector'
};
const useRootBaseStyles = (0, _react.makeResetStyles)({
    display: 'grid',
    gridTemplateRows: '1fr auto',
    gridTemplateColumns: 'auto auto 1fr auto',
    gridTemplateAreas: `
    "expandIcon media main        aside"
    "expandIcon media description aside"
  `,
    alignItems: 'center',
    ..._reacttheme.typographyStyles.body1,
    ':active': {
        color: _reacttheme.tokens.colorNeutralForeground2Pressed,
        backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed,
        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling
        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {
            color: _reacttheme.tokens.colorNeutralForeground3Pressed
        }
    },
    ':hover': {
        color: _reacttheme.tokens.colorNeutralForeground2Hover,
        backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover,
        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling
        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {
            color: _reacttheme.tokens.colorNeutralForeground3Hover
        }
    }
});
/**
 * Styles for the root slot
 */ const useRootStyles = (0, _react.makeStyles)({
    leaf: {
        paddingLeft: `calc(var(${_tokens.treeItemLevelToken}, 1) * ${_reacttheme.tokens.spacingHorizontalXXL})`
    },
    branch: {
        paddingLeft: `calc((var(${_tokens.treeItemLevelToken}, 1) - 1) * ${_reacttheme.tokens.spacingHorizontalXXL})`
    },
    // Size variations
    medium: {
        ..._reacttheme.typographyStyles.body1
    },
    small: {
        minHeight: '24px',
        ..._reacttheme.typographyStyles.caption1
    },
    // Appearance variations
    subtle: {},
    'subtle-alpha': {
        ':hover': {
            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundLightAlphaHover
        },
        ':active': {
            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundLightAlphaPressed
        }
    },
    transparent: {
        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
        ':hover': {
            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover
        },
        ':active': {
            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed
        }
    }
});
/**
 * Styles for the expand icon slot
 */ const useMediaBaseStyles = (0, _react.makeResetStyles)({
    display: 'flex',
    alignItems: 'center',
    width: '32px',
    height: '32px',
    gridArea: 'media',
    padding: `0 ${_reacttheme.tokens.spacingHorizontalXS} 0 ${_reacttheme.tokens.spacingHorizontalXXS}`
});
const useMainBaseStyles = (0, _react.makeResetStyles)({
    gridArea: 'main',
    padding: `${_reacttheme.tokens.spacingVerticalMNudge} ${_reacttheme.tokens.spacingHorizontalXS} ${_reacttheme.tokens.spacingVerticalMNudge} ${_reacttheme.tokens.spacingHorizontalS}`
});
const useMainStyles = (0, _react.makeStyles)({
    withDescription: {
        padding: `${_reacttheme.tokens.spacingVerticalMNudge} ${_reacttheme.tokens.spacingHorizontalXS} 0 ${_reacttheme.tokens.spacingHorizontalS}`
    }
});
const useDescriptionBaseStyles = (0, _react.makeResetStyles)({
    gridArea: 'description',
    ..._reacttheme.typographyStyles.caption1,
    padding: `0 ${_reacttheme.tokens.spacingHorizontalXS} ${_reacttheme.tokens.spacingVerticalMNudge} ${_reacttheme.tokens.spacingHorizontalS}`
});
/**
 * Styles for the action icon slot
 */ const useActionsBaseStyles = (0, _react.makeResetStyles)({
    display: 'flex',
    marginLeft: 'auto',
    position: 'relative',
    zIndex: 1,
    gridArea: 'aside',
    padding: `0 ${_reacttheme.tokens.spacingHorizontalS}`
});
/**
 * Styles for the action icon slot
 */ const useAsideBaseStyles = (0, _react.makeResetStyles)({
    display: 'flex',
    marginLeft: 'auto',
    alignItems: 'center',
    zIndex: 0,
    gridArea: 'aside',
    padding: `0 ${_reacttheme.tokens.spacingHorizontalM}`,
    gap: _reacttheme.tokens.spacingHorizontalXS
});
/**
 * Styles for the expand icon slot
 */ const useExpandIconBaseStyles = (0, _react.makeResetStyles)({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    minWidth: '24px',
    boxSizing: 'border-box',
    color: _reacttheme.tokens.colorNeutralForeground3,
    gridArea: 'expandIcon',
    flex: `0 0 auto`,
    padding: `${_reacttheme.tokens.spacingVerticalXS} 0`
});
const useTreeItemPersonaLayoutStyles_unstable = (state)=>{
    'use no memo';
    const rootBaseStyles = useRootBaseStyles();
    const rootStyles = useRootStyles();
    const mediaBaseStyles = useMediaBaseStyles();
    const descriptionBaseStyles = useDescriptionBaseStyles();
    const actionsBaseStyles = useActionsBaseStyles();
    const asideBaseStyles = useAsideBaseStyles();
    const expandIconBaseStyles = useExpandIconBaseStyles();
    const mainBaseStyles = useMainBaseStyles();
    const mainStyles = useMainStyles();
    const size = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.size);
    const appearance = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.appearance);
    const itemType = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType);
    state.root.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], rootStyles[appearance], rootStyles[size], state.root.className);
    state.media.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);
    if (state.main) {
        state.main.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);
    }
    if (state.description) {
        state.description.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);
    }
    if (state.actions) {
        state.actions.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);
    }
    if (state.aside) {
        state.aside.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);
    }
    if (state.expandIcon) {
        state.expandIcon.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);
    }
    if (state.selector) {
        state.selector.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.selector, state.selector.className);
    }
    return state;
};