export type Spacing =
    | 'none'
    | 'auto'
    | 'micro'
    | 'xxx-small'
    | 'xx-small'
    | 'x-small'
    | 'small'
    | 'medium'
    | 'moderate'
    | 'large'
    | 'x-large'
    | 'xx-large'
    | 'xxx-large'
    | 'spacious'
    | 'x-spacious'
    | 'xx-spacious'
    | 'xxx-spacious'
    | 'expansive'
    | 'x-expansive'
    | 'xx-expansive';

export type ResponsiveStyle<T> = Readonly<{
    mobile?: T,
    tablet?: T,
    desktop?: T,
    wide?: T,
}>;

export type Margin = Spacing | ResponsiveStyle<Spacing>;
export type MarginX = Spacing | ResponsiveStyle<Spacing>;
export type MarginY = Spacing | ResponsiveStyle<Spacing>;
export type MarginTop = Spacing | ResponsiveStyle<Spacing>;
export type MarginBottom = Spacing | ResponsiveStyle<Spacing>;
export type MarginLeft = Spacing | ResponsiveStyle<Spacing>;
export type MarginRight = Spacing | ResponsiveStyle<Spacing>;

export type Padding = Spacing | ResponsiveStyle<Spacing>;
export type PaddingX = Spacing | ResponsiveStyle<Spacing>;
export type PaddingY = Spacing | ResponsiveStyle<Spacing>;
export type PaddingTop = Spacing | ResponsiveStyle<Spacing>;
export type PaddingBottom = Spacing | ResponsiveStyle<Spacing>;
export type PaddingLeft = Spacing | ResponsiveStyle<Spacing>;
export type PaddingRight = Spacing | ResponsiveStyle<Spacing>;

export type Top = Spacing | ResponsiveStyle<Spacing>;
export type Bottom = Spacing | ResponsiveStyle<Spacing>;
export type Left = Spacing | ResponsiveStyle<Spacing>;
export type Right = Spacing | ResponsiveStyle<Spacing>;

export type Height = Spacing | 'full' | ResponsiveStyle<Spacing | 'full'>;
export type MaximumHeight = Spacing | 'full' | ResponsiveStyle<Spacing | 'full'>;
export type MinimumHeight = Spacing | ResponsiveStyle<Spacing>;

export type Width = Spacing | 'full' | ResponsiveStyle<Spacing | 'full'>;
export type MaximumWidth = Spacing | 'full' | ResponsiveStyle<Spacing | 'full'>;
export type MinimumWidth = Spacing | ResponsiveStyle<Spacing>;

export type DisplayValue =
    | 'block'
    | 'flex'
    | 'inline'
    | 'inlineBlock'
    | 'none';
export type Display = DisplayValue | ResponsiveStyle<DisplayValue>;

export type PositionValue =
    | 'static'
    | 'relative'
    | 'absolute'
    | 'fixed'
    | 'sticky';
export type Position = PositionValue | ResponsiveStyle<PositionValue>

export type AlignValue =
    | 'flexStart'
    | 'flexEnd'
    | 'center'
    | 'baseline'
    | 'stretch';
export type Align = AlignValue | ResponsiveStyle<AlignValue>;

export type JustifyContentValue =
    | 'normal'
    | 'flexStart'
    | 'flexEnd'
    | 'center'
    | 'spaceBetween'
    | 'spaceAround'
    | 'spaceEvenly'
    | 'stretch';
export type JustifyContent = JustifyContentValue | ResponsiveStyle<JustifyContentValue>;

export type FlexDirectionValue =
    | 'row'
    | 'rowReverse'
    | 'column'
    | 'columnReverse';
export type FlexDirection = FlexDirectionValue | ResponsiveStyle<FlexDirectionValue>;

export type FlexWrapValue =
    | 'wrap'
    | 'wrapReverse'
    | 'noWrap';
export type FlexWrap = FlexWrapValue | ResponsiveStyle<FlexWrapValue>;

export type FlexShrinkValue =
    | 0
    | 1;
export type FlexShrink = FlexDirectionValue | ResponsiveStyle<FlexShrinkValue>;

export type FlexGrowValue =
    | 0
    | 1;
export type FlexGrow = FlexGrowValue | ResponsiveStyle<FlexGrowValue>;

export type OverflowValue =
    | 'auto'
    | 'hidden'
    | 'clip'
    | 'visible'
    | 'scroll';
export type Overflow = OverflowValue | ResponsiveStyle<OverflowValue>;

export type ZIndexValue =
    | 0
    | 1
    | 2
    | 3;
export type ZIndex = ZIndexValue | ResponsiveStyle<ZIndexValue>;

export type TextAlignValue =
    | 'left'
    | 'center'
    | 'right'
    | 'justify'
    | 'start'
    | 'end';
export type TextAlign = TextAlignValue | ResponsiveStyle<TextAlignValue>;

// @ts-ignore
type Styles = Partial<{
    margin: Margin,
    marginX: MarginX,
    marginY: MarginY,
    marginTop: MarginTop,
    marginBottom: MarginBottom,
    marginLeft: MarginLeft,
    marginRight: MarginRight,
    padding: Padding,
    paddingX: PaddingX,
    paddingY: PaddingY,
    paddingTop: PaddingTop,
    paddingBottom: PaddingBottom,
    paddingLeft: PaddingLeft,
    paddingRight: PaddingRight,
    top: Top,
    bottom: Bottom,
    left: Left,
    right: Right,
    height: Height,
    maxHeight: MaximumHeight,
    minHeight: MinimumHeight,
    width: Width,
    maxWidth: MaximumWidth,
    minWidth: MinimumWidth,
    display: Display,
    position: Position,
    alignItems: Align,
    alignContent: Align,
    justifyContent: JustifyContent,
    flexDirection: FlexDirection,
    flexWrap: FlexWrap,
    flexShrink: FlexShrink,
    flexGrow: FlexGrow,
    overflow: Overflow,
    zIndex: ZIndex,
    textAlign: TextAlign,
}>;

// const lookup: Record<Spacing, Record<keyof Styles, string>> = {
//     'none': {
//         margin: 'm-0',
//         marginX: 'mx-0',
//         marginY: 'my-0',
//         marginTop: 'mt-0',
//         marginBottom: 'mb-0',
//         marginLeft: 'ml-0',
//         marginRight: 'mr-0',
//         padding: 'p-0',
//         paddingX: 'px-0',
//         paddingY: 'py-0',
//         paddingTop: 'pt-0',
//         paddingBottom: 'pb-0',
//         paddingLeft: 'pl-0',
//         paddingRight: 'pr-0',
//         top: 'top-0',
//         bottom: 'bottom-0',
//         left: 'left-0',
//         right: 'right-0',
//         height: 'h-0',
//         maxHeight: 'max-h-0',
//         minHeight: 'min-h-0',
//         width: 'w-0',
//         maxWidth: 'max-w-0',
//         minWidth: 'min-w-0',
//         display: 'd-none',
//         position: 'position-static',
//         alignItems: 'align-items-stretch',
//         alignContent: 'align-content-stretch',
//         justifyContent: 'justify-content-start',
//         flexDirection: 'flex-direction-row',
//         flexWrap: 'flex-wrap-no-wrap',
//         flexShrink: 'flex-shrink-0',
//         flexGrow: 'flex-grow-0',
//         overflow: 'overflow-visible',
//         zIndex: 'z-0',
//         textAlign: 'text-left',
//     },
//     'auto': {

//     },
// }

// const marginMap: Record<Spacing, string> = {
//     'none': '',
//     'auto': '',
//     'micro': '',
//     'xxx-small': '',
//     'xx-small': '',
//     'x-small': '',
//     'small': '',
//     'medium': '',
//     'moderate': '',
//     'none': '',
//     'none': '',
//     'none': '',
//     'none': '',
//     'none': '',
// }

// const generateStyle = ({
//     margin,
//     marginX,
//     marginY,
//     marginTop,
//     marginBottom,
//     marginLeft,
//     marginRight,
//     padding,
//     paddingX,
//     paddingY,
//     paddingTop,
//     paddingBottom,
//     paddingLeft,
//     paddingRight,
//     top,
//     bottom,
//     left,
//     right,
//     height,
//     maxHeight,
//     minHeight,
//     width,
//     maxWidth,
//     minWidth,
//     display,
//     position,
//     alignItems,
//     justifyContent,
//     flexDirection,
//     flexWrap,
//     flexGrow,
//     flexShrink,
//     overflow,
//     zIndex,
//     textAlign,
//   }: Styles) => {
//     const styles = clsx({
//         'm'
//     });
// };
  


// const getStyleValue = (spacing: Spacing, property: keyof Style): string => {
//     const row = styleTable.find((r) => r.name === spacing);
//     return row ? row[property] : '';
// };
// https://www.smashingmagazine.com/2020/05/reusable-react-components-tailwind/
// https://blog.logrocket.com/build-type-safe-version-tailwind-css-sprinkles/
// https://www.hunterjennings.dev/writing/fluid-typography-configuration
// https://dev.to/mikerogers0/moving-from-tailwind-to-vanilla-er-css-2ghh
// https://www.lekoarts.de/javascript/writing-performant-css-with-vanilla-extract