import { CSSProperties } from 'react';

// : Partial<Record<keyof CSSProperties, string>>

const CssObj = {
  alignContent: 'align-content',
  alignItems: 'align-items',
  alignSelf: 'align-self',
  aspectRatio: 'aspect-ratio',
  background: 'background',
  backgroundColor: 'background-color',
  border: 'border',
  borderBottom: 'border-bottom',
  borderLeft: 'border-left',
  borderRadius: 'border-radius',
  borderRight: 'border-right',
  borderTop: 'border-top',
  bottom: 'bottom',
  boxShadow: 'box-shadow',
  clip: 'clip',
  color: 'color',
  columnCount: 'column-count',
  columnFill: 'column-fill',
  columnGap: 'column-gap',
  columnRule: 'column-rule',
  columns: 'columns',
  columnSpan: 'column-span',
  columnWidth: 'column-width',
  cursor: 'cursor',
  direction: 'direction',
  display: 'display',
  flex: 'flex',
  flexBasis: 'flex-basis',
  flexDirection: 'flex-direction',
  flexFlow: 'flex-flow',
  flexGrow: 'flex-grow',
  flexShrink: 'flex-shrink',
  flexWrap: 'flex-wrap',
  float: 'float',
  fontSize: 'font-size',
  fontStyle: 'font-style',
  fontWeight: 'font-weight',
  gap: 'gap',
  grid: 'grid',
  gridAutoColumns: 'grid-auto-columns',
  gridColumnEnd: 'grid-column-end',
  gridColumnStart: 'grid-column-start',
  gridTemplate: 'grid-template',
  gridTemplateColumns: 'grid-template-columns',
  height: 'height',
  inset: 'inset',
  justifyContent: 'justify-content',
  justifySelf: 'justify-self',
  left: 'left',
  letterSpacing: 'letter-spacing',
  lineHeight: 'line-height',
  margin: 'margin',
  marginBottom: 'margin-bottom',
  marginLeft: 'margin-left',
  marginRight: 'margin-right',
  marginTop: 'margin-top',
  maxHeight: 'max-height',
  maxWidth: 'max-width',
  minHeight: 'min-height',
  minWidth: 'min-width',
  objectFit: 'object-fit',
  opacity: 'opacity',
  order: 'order',
  outline: 'outline',
  overflow: 'overflow',
  overflowX: 'overflow-x',
  overflowY: 'overflow-y',
  padding: 'padding',
  paddingBlock: 'padding-block',
  paddingBottom: 'padding-bottom',
  paddingInline: 'padding-inline',
  paddingLeft: 'padding-left',
  paddingRight: 'padding-right',
  paddingTop: 'padding-top',
  placeContent: 'place-content',
  pointerEvents: 'pointer-events',
  position: 'position',
  right: 'right',
  rowGap: 'row-gap',
  textAlign: 'text-align',
  textDecoration: 'text-decoration',
  textTransform: 'text-transform',
  top: 'top',
  transform: 'transform',
  transition: 'transition',
  visibility: 'visibility',
  whiteSpace: 'white-space',
  width: 'width',
  zIndex: 'z-index',
} as const;

export const CssMap = new Map(Object.entries(CssObj));

export type CssKeys = keyof typeof CssObj;

// export type CssFullProps = Record<CssKeys, string | number>;
// export type CssFullProps = Pick<CSSStyleDeclaration, CssKeys>;
export type CssFullProps = Pick<CSSProperties, CssKeys>;

export type CssProps = Omit<CssFullProps, 'color'> & { color: string };

export type PropertyOfProps<Type> = {
  [Property in keyof Type]?: Type[Property];
};

export type PropertyOfPropsSm<Type> = {
  [Property in keyof Type as `${Uncapitalize<string & Property>}Sm`]?: Type[Property];
};

export type PropertyOfPropsMd<Type> = {
  [Property in keyof Type as `${Uncapitalize<string & Property>}Md`]?: Type[Property];
};

export type PropertyOfPropsLg<Type> = {
  [Property in keyof Type as `${Uncapitalize<string & Property>}Lg`]?: Type[Property];
};

export type PropertyOfPropsXl<Type> = {
  [Property in keyof Type as `${Uncapitalize<string & Property>}Xl`]?: Type[Property];
};

export type ResponsiveProps<T> = PropertyOfProps<T> &
  PropertyOfPropsSm<T> &
  PropertyOfPropsMd<T> &
  PropertyOfPropsLg<T> &
  PropertyOfPropsXl<T>;

export type CssResponsiveProps = ResponsiveProps<CssProps>;

/*
export type PropertyOfProps<Type, U> = {
  [Property in keyof Type]?: U;
};

export type PropertyOfPropsSm<Type, U> = {
  [Property in keyof Type as `${Uncapitalize<string & Property>}Sm`]?: U;
};

export type PropertyOfPropsMd<Type, U> = {
  [Property in keyof Type as `${Uncapitalize<string & Property>}Md`]?: U;
};

export type PropertyOfPropsLg<Type, U> = {
  [Property in keyof Type as `${Uncapitalize<string & Property>}Lg`]?: U;
};

export type PropertyOfPropsXl<Type, U> = {
  [Property in keyof Type as `${Uncapitalize<string & Property>}Xl`]?: U;
};

export type ResponsiveProps<T, U> = PropertyOfProps<T, U> &
  PropertyOfPropsSm<T, U> &
  PropertyOfPropsMd<T, U> &
  PropertyOfPropsLg<T, U> &
  PropertyOfPropsXl<T, U>;

export type CssResponsiveProps = ResponsiveProps<CssProps, string | number>;
*/