import { type CSSProperties } from 'react';

import { type SxProps, type Theme } from '@mui/material/styles';

import { ROOT_ROW_HEIGHT, ROW_HEIGHT } from './constants';
import { type SidebarColors } from './hooks/useGetSidebarColors';
import { getCursorMode, getLeftSpacing } from './utils';

export const getRootListSx = (colors: SidebarColors): SxProps<Theme> => ({
  flex: 1,
  minHeight: 0,
  height: '100%',
  gap: 0,
  overflow: 'auto',
  backgroundColor: colors.MAIN_WHITE,
});

export const getRootVirtualRowStyle = (start: number): CSSProperties => ({
  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: number): CSSProperties => ({
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  transform: `translateY(${start}px)`,
});

export const getRootRowSx = (
  colors: SidebarColors,
  isSortMode: boolean,
  isDragging: boolean,
): SxProps<Theme> => ({
  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: SidebarColors): SxProps<Theme> => ({
  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: SidebarColors,
  isNested: boolean,
  isSortMode: boolean,
  isDragging: boolean,
): SxProps<Theme> => ({
  width: '100%',
  backgroundColor: isNested ? colors.MAIN_LIGHT_GREY : undefined,
  '& .MuiButtonBase-root': {
    cursor: `${getCursorMode(isSortMode, isDragging)} !important`,
  },
});

type ChildRowSummaryOptions = {
  depth: number;
  isNested: boolean;
  expanded: boolean;
  isSortMode: boolean;
  isDragging: boolean;
  showDragIcon: boolean;
};

export const getChildRowSummarySx = (
  colors: SidebarColors,
  options: ChildRowSummaryOptions,
): SxProps<Theme> => {
  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: SidebarColors): SxProps<Theme> => ({
  flex: 1,
  minWidth: 0,
  color: colors.TITLE_COLOR,
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
});

export const getCollapseIconSx = (
  colors: SidebarColors,
  expanded: boolean,
): SxProps<Theme> => ({
  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: SidebarColors,
  isNested: boolean,
): SxProps<Theme> => ({
  backgroundColor: isNested ? colors.MAIN_LIGHT_GREY : colors.EXPANDED_ROW,
});

export const SORT_MODE_HOVER_ROW_STYLES: SxProps = {
  backgroundColor: 'transparent',
  pr: '2px',
  py: '1px',
};

export const AVATAR_STYLES: SxProps = {
  '& img': { width: '24px', height: '24px' },
  '& span': { fontSize: '1.5rem' },
};
