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

import { ShiftColor } from 'src/types/shifts';

export const STICKY_COLUMN_SX: SxProps<Theme> & { width: number } = {
  borderRight: ({ palette }) =>
    `4px solid ${palette.new.border.neutral.default}`,
  left: 0,
  position: 'sticky',
  width: 270,
  // Below the sticky page header/filters (zIndex 2) so body cells scroll under it,
  // but above the calendar cells so the column stays fixed on horizontal scroll.
  zIndex: 1,
};

// Need to override the font size since "S" is the smallest variant
export const GLOBAL_XXS_TYPOGRAPHY_SX: SxProps = {
  fontSize: 12,
  '& .MuiTypography-root': {
    fontSize: 12,
  },
};

export const CARD_CONTENT_PADDING_SX: SxProps<Theme> = {
  '& .MuiCardContent-root': {
    px: theme => theme.spacing(1.5),
    py: theme => `${theme.spacing(1)} !important`,
  },
};

// Icon-only cards in monthly view (day off / time off). The card fills the
// fixed-height slot and the icon is flex-centered inside it, so the icon is
// truly centered in the visible card instead of being offset by padding.
export const MONTHLY_ICON_CARD_SX = {
  borderWidth: '1px',
  borderRadius: 1,
  height: '100%',
  '& .MuiCardActionArea-root': {
    height: '100%',
  },
  '& .MuiCardContent-root': {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
    p: 0,
    '&:last-child': {
      pb: 0,
    },
  },
} satisfies SxProps<Theme>;

type CardColors = {
  backgroundColor: string | undefined;
  baseBorderColor: string | undefined;
  accentBorderColor: string | undefined;
  textColor: string | undefined;
};

export const SHIFT_CARD_COLORS = (
  palette: Theme['palette'],
): Record<ShiftColor | 'dayOff', CardColors> => {
  const isDark = palette.mode === 'dark';
  return {
    dayOff: {
      backgroundColor: palette.new.background.layout.default,
      baseBorderColor: palette.new.border.neutral.default,
      accentBorderColor: palette.new.text.neutral.default,
      textColor: palette.new.text.neutral.default,
    },
    [ShiftColor.BLUE]: {
      backgroundColor: palette.new.background.layout.brand,
      baseBorderColor: palette.new.border.states.highlight,
      accentBorderColor: palette.newBase?.brand[500],
      textColor: palette.new.action.button.text.tertiary.default,
    },
    [ShiftColor.YELLOW]: {
      backgroundColor: isDark
        ? palette.newBase?.yellow[900]
        : palette.newBase?.yellow[50],
      baseBorderColor: palette.new.border.states.warning,
      accentBorderColor: palette.newBase?.yellow[500],
      textColor: isDark
        ? palette.newBase?.yellow[200]
        : palette.newBase?.yellow[900],
    },
    [ShiftColor.GREEN]: {
      backgroundColor: isDark
        ? palette.newBase?.green[900]
        : palette.newBase?.green[100],
      baseBorderColor: isDark
        ? palette.newBase?.green[700]
        : palette.newBase?.green[300],
      accentBorderColor: palette.newBase?.green[500],
      textColor: isDark
        ? palette.newBase?.green[200]
        : palette.newBase?.green[900],
    },
    [ShiftColor.LILAC]: {
      backgroundColor: isDark
        ? palette.newBase?.purple[900]
        : palette.newBase?.purple[50],
      baseBorderColor: isDark
        ? palette.newBase?.purple[700]
        : palette.newBase?.purple[300],
      accentBorderColor: palette.newBase?.purple[500],
      textColor: isDark
        ? palette.newBase?.purple[200]
        : palette.newBase?.purple[900],
    },
    [ShiftColor.RED]: {
      backgroundColor: isDark
        ? palette.newBase?.red[900]
        : palette.newBase?.red[50],
      baseBorderColor: isDark
        ? palette.newBase?.red[700]
        : palette.newBase?.red[200],
      accentBorderColor: palette.newBase?.red[500],
      textColor: isDark ? palette.newBase?.red[200] : palette.newBase?.red[900],
    },
    [ShiftColor.LIGHT_BLUE]: {
      backgroundColor: isDark
        ? palette.newBase?.skyBlue[900]
        : palette.newBase?.skyBlue[100],
      baseBorderColor: isDark
        ? palette.newBase?.skyBlue[700]
        : palette.newBase?.skyBlue[200],
      accentBorderColor: palette.newBase?.skyBlue[600],
      textColor: palette.new.text.feedback.info,
    },
  };
};

export const DRAFT_STYLES = (palette: Theme['palette']) => ({
  backgroundColor: palette.new.background.layout.tertiary,
  textColor: palette.new.text.neutral.default,
});

export const TABLE_FILTERS_STICKY_SX = (taskFocus: boolean) => ({
  position: 'sticky',
  top: taskFocus ? 65 : 0,
  zIndex: 2,
});

export const DUPLICATE_MAX_USERS_LIMIT = 1000;
export const SKELETON_ROWS = 3;
export const SELECTION_COL_WIDTH = 50;
export const BASE_HEADER_HEIGHT = 340;
export const TASK_FOCUS_HEADER_HEIGHT = 245;
export const BASE_ROW_HEIGHT = 70;
export const FIXED_ROW_HEIGHT_ESTIMATE = 80;
