import { CSSProperties } from 'react';

export type IVariant<T> = T | (string & {});

export type IThemeDisplay = IVariant<'xs' | 'sm' | 'md' | 'lg' | 'xl'>;

export type IThemeResponsive<T> = Record<IThemeDisplay, T>;

export type IThemeFont = Omit<CSSProperties, 'textTransform'> & {
  family?: CSSProperties['fontFamily'];
  size?: CSSProperties['fontSize'];
  weight?: CSSProperties['fontWeight'];
  textTransform?: string;
};

export type IThemeFontBase = Omit<IThemeFont, 'size' | 'fontSize'> & {
  size?: CSSProperties['fontSize'] | IThemeResponsive<CSSProperties['fontSize']>;
  fontSize?: CSSProperties['fontSize'] | IThemeResponsive<CSSProperties['fontSize']>;
};

type D1 = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
type D2 = '0';
// type D3 = '1';
// export type IThemeFontSize = `${D1}${D2}` | `${D3}${D1}${D2}`;
export type IThemeFontSize = `${D1}${D2}`;

export type IThemeFontKey = 'display' | 'heading' | 'paragraph' | 'label';

export type IThemeFontVariant = IVariant<`${IThemeFontKey}${IThemeFontSize}`>;

export type IThemeFonts = Partial<Record<IThemeFontVariant, IThemeFont>>;

export type IThemeGrid = {
  columns: CSSProperties['gridTemplateColumns'];
  size: CSSProperties['gridTemplateColumns'];
  columnGap: IThemeResponsive<CSSProperties['columnGap']>;
  rowGap: IThemeResponsive<CSSProperties['rowGap']>;
} & Omit<CSSProperties, 'columnGap' | 'rowGap'>;

export type IThemeGridVariant = IVariant<'default'>;

export type IThemeGrids = Record<IThemeGridVariant, IThemeGrid>;

export type IThemeContainer = {
  maxWidth: IThemeResponsive<CSSProperties['maxWidth']>;
} & Omit<CSSProperties, 'maxWidth'>;

export type IThemeContainerVariant = IVariant<'default' | 'fluid'>;

export type IThemeContainers = Record<IThemeContainerVariant, IThemeContainer>;

export type IThemeText = {
  padding: CSSProperties['padding'],
  fontSize: CSSProperties['fontSize'],
  fontWeight: CSSProperties['fontWeight'],
  lineHeight: CSSProperties['lineHeight'],
} & CSSProperties;

export type IThemeForm = {
  backgroundColor: CSSProperties['backgroundColor'],
  backgroundColorDisabled: CSSProperties['backgroundColor'],
  backgroundColorInfo: CSSProperties['backgroundColor'],
  backgroundColorError: CSSProperties['backgroundColor'],
  color: CSSProperties['color'],
  colorDisabled: CSSProperties['color'],
  colorHover: CSSProperties['color'],
  colorInfo: CSSProperties['color'],
  colorError: CSSProperties['color'],
  border: CSSProperties['border'],
  borderWidth: CSSProperties['borderWidth'],
  borderColor: CSSProperties['borderColor'],
  borderColorHover: CSSProperties['borderColor'],
  borderColorDisabled: CSSProperties['borderColor'],
  borderColorInfo: CSSProperties['borderColor'],
  borderColorError: CSSProperties['borderColor'],
  borderRadius: CSSProperties['borderRadius'],
  outline: CSSProperties['outline'],
  outlineColorFocus: CSSProperties['outlineColor'],
  outlineColorActive: CSSProperties['outlineColor'],
  outlineColorError: CSSProperties['outlineColor'],
  outlineOffset: CSSProperties['outlineOffset'],
  transition: CSSProperties['transition'],
  field: {
    gap: CSSProperties['gap'],
  },
  control: IThemeText,
  label: IThemeText,
  error: IThemeText,
} & CSSProperties;

export type IThemeFormVariant = IVariant<'default'>;

export type IThemeForms = Record<IThemeFormVariant, IThemeForm> |
  Record<(string & {}), Partial<IThemeForm>>;

export type IThemeColorKey = IVariant<'100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'>;

export type IThemeColor = Record<IThemeColorKey, CSSProperties['color']>;

export type IThemeColorVariant = IVariant<'neutral'>; // | 'primary' | 'success' | 'warning' | 'danger';

export type IThemeColors = Record<IThemeColorVariant, IThemeColor>;

export type IThemeTransitionVariant = IVariant<'smooth'>;

export type IThemeTransitions = Record<IThemeTransitionVariant, CSSProperties['transition']>;

export type ITheme = Record<string, any> & {
  fontBase: IThemeFontBase,
  font: IThemeFonts,
  grid: IThemeGrids,
  mediaQuery: IThemeResponsive<CSSProperties['width']>;
  container: IThemeContainers,
  button: {
    size: IThemeResponsive<CSSProperties['fontSize']>,
    borderRadius: CSSProperties['borderRadius'],
  } & CSSProperties,
  form: IThemeForms,
  card: {
    shadow: CSSProperties['boxShadow'],
  } & CSSProperties,
  backdrop: {
    opacity: CSSProperties['opacity'],
  } & CSSProperties,
  border: {
    radius: CSSProperties['borderRadius'],
  },
  shadow: IThemeResponsive<CSSProperties['boxShadow']>,
  transition: IThemeTransitions,
  color: IThemeColors,
};