import { theme } from '@bgzt/ui/theme';

import { color as bdsgBaseColors } from '@/styles/vars/scale';
import { color as bdsgSemanticColors } from '@/styles/vars/semantic';

const detailSizes = Array.from({ length: 41 }, (_, i) => i / 10);

const customSizes = Array.from({ length: 41 }, (_, i) => i);

const colorPalette = {
  ...theme.colors,
  ...bdsgBaseColors,
  ...bdsgSemanticColors,
  'dk-background-color': '#f3f4f6',
  'idntt-orange': '#F18900',
};

export const unresponsiveSprinklesProperties = {
  position: ['absolute', 'relative', 'fixed', 'sticky'],
  display: ['none', 'flex', 'inline-flex', 'block', 'inline', 'grid', 'inline-block'],
  flexDirection: ['row', 'column'],
  justifyContent: ['stretch', 'flex-start', 'center', 'flex-end', 'space-around', 'space-between'],
  alignItems: ['stretch', 'flex-start', 'center', 'flex-end', 'baseline', 'initial'],
  fontSize: customSizes,
  fontWeight: [500, 700] as const,
  lineHeight: ['normal', 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, ...Array.from({ length: 12 }, (_, i) => i + 9).map((size) => `${size}px`)],
  paddingTop: customSizes,
  paddingBottom: customSizes,
  paddingLeft: customSizes,
  paddingRight: customSizes,
  marginTop: [...detailSizes, ...customSizes, 'auto'],
  marginBottom: [...detailSizes, ...customSizes, 'auto'],
  marginLeft: [...detailSizes, ...customSizes, 'auto'],
  marginRight: [...detailSizes, ...customSizes, 'auto'],
  margin: ['0 auto'],
  gap: customSizes,
  rowGap: customSizes,
  columnGap: customSizes,
  maxWidth: [600] as const,
  width: ['auto', '100%', 'fit-content', '100vw'],
  height: ['auto', '100%', '100vh'],
  boxSizing: ['border-box', 'content-box'],
  borderRadius: [4, 5, 6, 8, 10, 14, 15],
  textAlign: ['left', 'center', 'right', 'start'],
  overflow: ['auto', 'hidden', 'scroll'],
  overflowX: ['auto', 'hidden', 'scroll'],
  overflowY: ['auto', 'hidden', 'scroll'],
  visibility: ['visible', 'hidden'],
  alignSelf: ['baseline', 'center'],
  textDecorationLine: ['underline', 'line-through'],
  userSelect: ['none', 'text'],
  wordBreak: ['break-all', 'break-word', 'keep-all'],
  textOverflow: ['ellipsis'],
  flex: {
    '1': '1 1 0%',
  },
  opacity: [0, 1],
  whiteSpace: ['pre-wrap'],
  borderColor: colorPalette,
  /**
   * z-index는 반드시 필요한 경우에만 사용.
   * BASE: 1,
   * STICKY: 100,
   * FLOATING: 200,
   * FIXED: 300,
   * BOTTOM_SHEET: 400,
   * MODAL: 500,
   */
  flexWrap: ['wrap', 'nowrap'],
  top: ['var(--promotion-height)', 0],
  bottom: [0],
  left: [0],
  right: [0],
  flexShrink: [0],
  flexGrow: [1],
  /**
   * z-index는 반드시 필요한 경우에만 사용.
   * BASE: 1,
   * STICKY: 100,
   * FLOATING: 200,
   * FIXED: 300,
   * BOTTOM_SHEET: 400,
   * MODAL: 500,
   */
  zIndex: {
    BASE: 1,
    STICKY: 100,
    FLOATING: 200,
    FIXED: 300,
    BOTTOM_SHEET: 400,
    MODAL: 500,
    SNACKBAR: 600,
    PROMOTION_BANNER: 700,
    IFRAME: 1000,
  },
  cursor: ['pointer'],
} as const;

export const colorSprinklesProperties = {
  color: colorPalette,
  backgroundColor: colorPalette,
} as const;

type Shorthands = Record<string, Array<keyof typeof unresponsiveSprinklesProperties>>;

export const shorthands = {
  p: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
  px: ['paddingLeft', 'paddingRight'],
  py: ['paddingTop', 'paddingBottom'],
  pt: ['paddingTop'],
  pb: ['paddingBottom'],
  pl: ['paddingLeft'],
  pr: ['paddingRight'],
  m: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
  mx: ['marginLeft', 'marginRight'],
  my: ['marginTop', 'marginBottom'],
  mt: ['marginTop'],
  mb: ['marginBottom'],
  ml: ['marginLeft'],
  mr: ['marginRight'],
  gapX: ['columnGap'],
  gapY: ['rowGap'],
} satisfies Shorthands;

export const sprinklesProperties = {
  ...unresponsiveSprinklesProperties,
  ...colorSprinklesProperties,
} as const;