import { SerializedStyles } from '@emotion/react';
import { typography } from '../../../../src/style/variables';

import { Prefix } from '../constants';
import { GumGridCell, GumGridCol, GumGridRow, GumTypescale } from '../models';

export type GumParseObject = (
  values: { [key: string]: unknown },
  prefix: Prefix,
) => string[];

export type GumParseArray = (
  values: number[],
  prefix: Prefix,
  unit?: string,
) => string[];

export type GumParseTypography = (values: typeof typography) => string[];

export type GumTypescaleMixin = (
  size: GumTypescale,
  additionalSize?: GumTypescale,
) => SerializedStyles;

export type GumTypescaleFluid = (
  prefix: Prefix,
  size: GumTypescale,
  additionalSize: GumTypescale,
) => SerializedStyles;

export type GumSpacingMixin = (pxValue: number, rawValue?: boolean) => string;

export type GumGeneratorMixin = () => string;

export type GumGridColMixin = (
  config: GumGridCol | GumGridCol[],
) => SerializedStyles;

export type GumGridRowMixin = (
  config: GumGridRow | GumGridRow[],
) => SerializedStyles;

export type GumGridCellMixin = (
  type: 'row' | 'column',
  config: GumGridCell,
) => SerializedStyles;

export type GumWrapperMixin = (
  width: number,
  align?: 'left' | 'right' | 'center',
  sidePadding?: string,
) => SerializedStyles;