import { CSSProperties } from "react";

type Size = string | number;
type Property = keyof CSSProperties;
type CSSProps<Type> = Partial<Record<Property, Type>>;
type Transformer<Type, Value> = (value: Type) => Value;

export type Sizes<Type> = Record<Size, CSSProps<Type>>;

export function getSizeStyles<Type>(sizes: Sizes<Type>) {
  return function getStyles(size: Size) {
    const styles = sizes[size];
    if (!styles) return (property: Property) => undefined;
    
    function getStyle(property: Property): Type | undefined;
    function getStyle<Type, Value>(
      property: Property,
      transformer: Transformer<Type, Value>
    ): Value;
    function getStyle<Type, Value>(
      property: Property,
      transformer?: Transformer<Type, Value>
    ) {
      const value = styles[property];
      if (typeof value === "undefined") return undefined;
      return transformer ? transformer(value as Type) : value;
    }

    return getStyle;
  };
}