import { SerializedStyles } from '@emotion/react';
import {
  borderRadius,
  breakpoints,
  colors,
  componentGrids,
  fontFamily,
  fontWeight,
  spacing,
  typography,
} from '../../../../src/style/variables';

export type GumColors = keyof typeof colors;

export type GumTypescale = keyof typeof typography;

export type GumFontWeight = keyof typeof fontWeight;

export type GumFontFamily = keyof typeof fontFamily;

export type GumSpacing = keyof typeof spacing | 'none';

export type GumBorderRadius = keyof typeof borderRadius;

export type GumComponentGrids = keyof typeof componentGrids;

export type GumMainGrid = 'page';

export type GumGridGaps = {
  [k in GumSpacing]: SerializedStyles;
} & {
  row: { [k in GumSpacing]: SerializedStyles };
  column: { [k in GumSpacing]: SerializedStyles };
};

export type GumGridCols =
  | 'colsNone'
  | 'cols1'
  | 'cols2'
  | 'cols3'
  | 'cols4'
  | 'cols5'
  | 'cols6'
  | 'cols7'
  | 'cols8'
  | 'cols9'
  | 'cols10'
  | 'cols11'
  | 'cols12';

export type GumGridRows =
  | 'none'
  | 'rows1'
  | 'rows2'
  | 'rows3'
  | 'rows4'
  | 'rows5'
  | 'rows6';

export type GumGridColCell =
  | 'c1'
  | 'c2'
  | 'c3'
  | 'c4'
  | 'c5'
  | 'c6'
  | 'c7'
  | 'c8'
  | 'c9'
  | 'c10'
  | 'c11'
  | 'c12';

export type GumGridRowCell = 'r1' | 'r2' | 'r3' | 'r4' | 'r5' | 'r6';

export type GumGridConfigGenerated = {
  [k in GumComponentGrids | GumMainGrid]: SerializedStyles;
};

export type GumGeneratedGrids = {
  colSpan: { [k in GumGridColCell]: SerializedStyles };
  colStart: { [k in GumGridColCell]: SerializedStyles };
  colEnd: { [k in GumGridColCell]: SerializedStyles };

  rowSpan: { [k in GumGridRowCell]: SerializedStyles };
  rowStart: { [k in GumGridRowCell]: SerializedStyles };
  rowEnd: { [k in GumGridRowCell]: SerializedStyles };

  template: {
    [k in GumGridCols]: SerializedStyles;
  };
};

export type GumGrids = GumGeneratedGrids & {
  display: SerializedStyles;

  config: GumGridConfigGenerated;

  gap: GumGridGaps;
  full: {
    col: SerializedStyles;
    row: SerializedStyles;
  };
};

type GumSpacingsMain = { [k in GumSpacing]: SerializedStyles };

export interface GumSpacings extends GumSpacingsMain {
  top: GumSpacingsMain;
  bottom: GumSpacingsMain;
  left: GumSpacingsMain;
  right: GumSpacingsMain;
}

export type GumBreakpoints = keyof typeof breakpoints;

export interface GumGridConfig {
  cols?: number;
  template?: { row?: string; column?: string };
  gap?: { row?: number; column?: number };
  mediaMinWidth?: GumBreakpoints;
}

export type GumGridConfigCustom = { [k: string]: GumGridConfig[] };

export interface GumGridCell {
  start?: number;
  end?: number;
  span?: number;
  mediaMinWidth?: GumBreakpoints;
}

export interface GumGridRow {
  rows: number;
  mediaMinWidth?: GumBreakpoints;
}

export interface GumGridCol {
  cols: number;
  mediaMinWidth?: GumBreakpoints;
}