import { ROOT_ROW_HEIGHT, ROW_HEIGHT } from './constants';
import { getCursorMode, getLeftSpacing } from './utils';
export const getRootListSx = (colors) => ({
    flex: 1,
    minHeight: 0,
    height: '100%',
    gap: 0,
    overflow: 'auto',
    backgroundColor: colors.MAIN_WHITE,
});
export const getRootVirtualRowStyle = (start) => ({
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: ROOT_ROW_HEIGHT,
    transform: `translateY(${start}px)`,
});
// No fixed height: child rows expand (nested lists), so the row is measured
// dynamically via the virtualizer's `measureElement`.
export const getChildVirtualRowStyle = (start) => ({
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    transform: `translateY(${start}px)`,
});
export const getRootRowSx = (colors, isSortMode, isDragging) => ({
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    backgroundColor: colors.MAIN_WHITE,
    position: 'relative',
    '*': { cursor: getCursorMode(isSortMode, isDragging) },
    '&:hover': {
        ...(isSortMode && {
            '& .sidebar-drag-icon': { opacity: 1 },
            '& .listItem-badge-avatar': { opacity: 0 },
        }),
        backgroundColor: colors.ROW_HOVER,
    },
});
export const getChildrenListSx = (colors) => ({
    flex: 1,
    minHeight: 0,
    height: '100%',
    gap: 0,
    width: '100%',
    minWidth: 0,
    overflow: 'auto',
    backgroundColor: colors.MAIN_WHITE,
    '.MuiButtonBase-root:not(.accordion-collapse-icon)': { p: 1.5, px: 2 },
    '& .accordion-details-custom-detail': { p: 0 },
});
export const getChildRowContainerSx = (colors, isNested, isSortMode, isDragging) => ({
    width: '100%',
    backgroundColor: isNested ? colors.MAIN_LIGHT_GREY : undefined,
    '& .MuiButtonBase-root': {
        cursor: `${getCursorMode(isSortMode, isDragging)} !important`,
    },
});
export const getChildRowSummarySx = (colors, options) => {
    const { depth, isNested, expanded, isSortMode, isDragging, showDragIcon } = options;
    return {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
        minWidth: 0,
        minHeight: ROW_HEIGHT,
        boxSizing: 'border-box',
        py: 1.5,
        pr: 2,
        pl: getLeftSpacing(depth),
        cursor: getCursorMode(isSortMode, isDragging),
        backgroundColor: !isNested && expanded ? colors.EXPANDED_ROW : 'transparent',
        '&:hover': {
            backgroundColor: isNested ? colors.NESTED_ROW_HOVER : colors.ROW_HOVER,
        },
        ...(showDragIcon && { '& .MuiAvatar-root': SORT_MODE_HOVER_ROW_STYLES }),
    };
};
export const getChildRowTitleSx = (colors) => ({
    flex: 1,
    minWidth: 0,
    color: colors.TITLE_COLOR,
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
});
export const getCollapseIconSx = (colors, expanded) => ({
    flexShrink: 0,
    width: 32,
    height: 32,
    borderRadius: 1,
    p: 0.5,
    '&:hover': { backgroundColor: colors.NESTED_ROW_HOVER },
    '& svg': {
        minWidth: 24,
        minHeight: 24,
        transition: 'transform 150ms ease',
        transform: expanded ? 'rotate(180deg)' : 'none',
    },
});
export const getChildRowDetailsSx = (colors, isNested) => ({
    backgroundColor: isNested ? colors.MAIN_LIGHT_GREY : colors.EXPANDED_ROW,
});
export const SORT_MODE_HOVER_ROW_STYLES = {
    backgroundColor: 'transparent',
    pr: '2px',
    py: '1px',
};
export const AVATAR_STYLES = {
    '& img': { width: '24px', height: '24px' },
    '& span': { fontSize: '1.5rem' },
};
