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

export enum SortOrder {
  ASC = 'ASC',
  DESC = 'DESC',
  DESC_NULLS_LAST = 'DESC_NULLS_LAST',
}

export const MODULE_NAME = 'GOALS';

export enum SortField {
  ID = 'ID',
  NAME = 'name',
  CREATED_AT = 'createdAt',
  UPDATED_AT = 'updatedAt',
}

export enum CycleValues {
  ALL_CYCLES = -2,
  UNASSIGNED_CYCLES = -1,
}

export enum GoalCardVariant {
  GENERAL = 'GENERAL',
  INDIVIDUAL = 'INDIVIDUAL',
}

/** Cycles where the general list API is called without a concrete `goalCycleId`. */
export const EXCLUDED_GOAL_CYCLE_IDS: ReadonlySet<number> = new Set([
  CycleValues.ALL_CYCLES,
  CycleValues.UNASSIGNED_CYCLES,
]);

export const GOAL_WEIGHTS_DRAWER_ID = 'goal-weights';

export const GOAL_WEIGHTS_DRAWER_SECTION_BORDER_RADIUS = 2;
export const GOAL_WEIGHTS_DRAWER_TOTAL_ROW_BORDER_RADIUS = 1;

export const TEAM_GOALS_LAYOUT_MAX_WIDTH = 1038;

export const MY_GOALS_PAGE_SIZE = 20;

export const MY_TEAM_PAGE_SIZE = 20;

/** Shared vertical list column for goal cards (My Goals, General list, etc.). */
export const GOALS_LIST_STACK_SX = {
  gap: 2,
  display: 'flex',
  flexDirection: 'column',
  backgroundColor: 'transparent',
} as const;

/**
 * Loading row for General list: GoalCard GENERAL (avatar, copetin, extra progress label).
 * Taller than INDIVIDUAL by design in GoalCard.
 */
export const GOALS_GOAL_CARD_LIST_ITEM_SKELETON_GENERAL_SX: SxProps = {
  p: 0,
  width: '100%',
};

/**
 * Loading row for My Goals / Team Goals lists: GoalCard INDIVIDUAL (no avatar/copetin/extra line).
 * ListItemSkeleton always includes a circular placeholder; hide it to match INDIVIDUAL layout.
 */
export const GOALS_GOAL_CARD_LIST_ITEM_SKELETON_INDIVIDUAL_SX: SxProps = {
  p: 0,
  width: '100%',
  '& > :first-child': {
    display: 'none',
  },
};

/** My Team table: list + outlined cards. */
export const TEAM_TABLE_LIST_SX: SxProps = {
  gap: 2,
  display: 'flex',
  flexDirection: 'column',
  pb: 2,
  backgroundColor: 'transparent',
};

/** Collaborators row: HuListItem in TeamTable (not GoalCard). */
export const TEAM_TABLE_LIST_ITEM_SKELETON_SX: SxProps = {
  width: '100%',
  minHeight: '76px',
};

export const TEAM_TABLE_CARD_CONTAINER_SX: SxProps<Theme> = {
  borderRadius: 2,
  borderColor: (theme: Theme) => theme.palette.new?.border.neutral.default,
};
