// styled.d.ts
import "styled-components";

import type { CSSProperties } from "styled-components";

interface ThemeFlags {
  isCurve?: boolean;
  isEqLab?: boolean;
  isGenshiro?: boolean;
  isFluidXDot?: boolean;
  hideDexBalances?: boolean;
}

interface Shadows {
  sm: string;
  smHover: string;
  md: string;
  mdHover: string;
  lg: string;
}

type Colors = Record<string, string>;

export type Sizes = "xxl" | "xl" | "lg" | "md" | "sm" | "xs";

export type TypographySizes = Sizes;

export type TypographyVariant =
  | "h1"
  | "h2"
  | "h3"
  | "h4"
  | `p-${TypographySizes}`
  | `button-${Extract<TypographySizes, "lg" | "md" | "sm">}`
  | `link-${Extract<TypographySizes, "lg" | "md" | "sm">}`;

type TypographyStyle = {
  fontSize: string;
  lineHeight: string;
  fontWeight: string;
  textDecorationLine?: CSSProperties["textDecorationLine"];
  mobileFontSize?: string;
  mobileLineHeigth?: string;
  mobileFontWeight?: string;
};

type VariantStyle = Record<TypographyVariant, TypographyStyle>;

interface Typography extends VariantStyle {
  baseColor: string;
  lightColor: string;
  warningColor: string;
  fontFamily: string;
  bold: string;
}

export type ButtonSize = Exclude<Sizes, "xxl" | "xl">;

interface ButtonStyles {
  color: string;
  border: string;
  background: string;
}

export type ButtonVariant = "action" | "secondary" | "text";

export type Button = {
  fontFamily: string;
} & Record<
  ButtonSize,
  {
    width: string;
    height: string;
    borderRadius: string;
    iconSize: string;
    iconMargin: string;
    labelTypography?: TypographyStyle;
  }
> &
  Record<
    ButtonVariant,
    {
      active: ButtonStyles;
      hover: ButtonStyles;
      disabled: ButtonStyles;
    }
  >;

interface Tabs {
  width: string;
  height: string;
  heightSmall: string;
  borderBottom: string;
  color: string;
  colorActive: string;
  background: string;
  backgroundActive: string;
  backgroundStroke: string;
  backgroundStrokeActive: string;
  itemBorder: string;
  itemBorderActive: string;
  itemBorderBottomActive: string;
  itemBorderStroke: string;
  itemBorderStrokeActive: string;
  badgeColor: string;
  badgeBackground: string;
}

interface TabsSwitch {
  width: string;
  height: string;
  color: string;
  background: string;
  itemBackground: string;
  padding: string;
  colorActive: string;
  backgroundActive: string;
  itemBorderRadius: string;
  boxShadow: string;
  boxShadowActive: string;
}

interface CardStyles {
  background: string;
  border: string;
  boxShadow: string;
  borderRadius: string;
  padding: string;
}

interface Card {
  filled: CardStyles;
  outlined: CardStyles;
}

interface Tooltip {
  tailSize: string;
  borderColor: string;
  borderWidth: string;
  borderRadius: string;
  background: string;
  boxShadow: string;
}

interface SubCard extends CardStyles {}

export interface InputNew {
  width: string;
  height: string;
  padding: string;
  fontFamily: string;
  typography: TypographyStyle;
  color: string;
  borderBottom: string;
  borderRadius: string;
  background: string;
  disabledColor: string;
  readonlyBackground: string;
  hoverBackground: string;
  placeholderColor: string;
  titleMargin: string;
  labelColor: string;
  labelTypography: TypographyStyle;
  labelErrorColor: string;
  linkColor: string;
  linkTypography: TypographyStyle;
  leadingIconWidth: string;
  leadingIconHeight: string;
  leadingIconMargin: string;
  trailingIconWidth: string;
  trailingIconHeight: string;
  trailingIconMargin: string;
}

export interface Select {
  width: string;
  height: string;
  padding: string;
  fontFamily: string;
  typography: TypographyStyle;
  color: string;
  borderBottom: string;
  borderRadius: string;
  background: string;
  disabledColor: string;
  readonlyBackground: string;
  hoverBackground: string;
  placeholderColor: string;
  titleMargin: string;
  labelColor: string;
  labelTypography: TypographyStyle;
  labelErrorColor: string;
  linkColor: string;
  linkTypography: TypographyStyle;
  leadingIconWidth: string;
  leadingIconHeight: string;
  leadingIconMargin: string;
  trailingIconWidth: string;
  trailingIconHeight: string;
  trailingIconMargin: string;
  modalBackground: string;
  modalBoxShadow: string;
  modalBorderRadius: string;
  modalPadding: string;
  optionFontWeight: string;
  optionSelectedFontWeight: string;
  optionHoverFontWeight: string;
  optionHoverBackground: string;
  optionHoverColor: string;
  optionPadding: string;
  optionMinHeight: string;
  optionBorderRadius: string;
}

export interface InputGroup {
  borderRadius: string;
  border: string;
}

interface Input {
  height: string;
  padding: string;
  fontFamily: string;
  fontSize: string;
  lineHeight: string;
  background: string;
  border: string;
  borderError: string;
  borderRadius: string;
  helperColor: string;
  helperFontSize: string;
  helperLineHeight: string;
}

interface Dropdown {
  color: string;
}

interface DropdownIcon {
  color: string;
  colorOpened: string;
}

interface Navigation {
  containerBackground: string;
  containerBoxShadow: string;
  containerBorderRadius: string;
  containerBorder: string;
}

interface Notification {
  fontFamily: string;
  background: string;
  boxShadow: string;
  infoColor: string;
  errorColor: string;
  titleFontSize: string;
  titleLineHeight: string;
  titleFontWeight: string;
  descFontSize: string;
  descLineHeight: string;
  descFontWeight: string;
  descColor: string;
  actionColor: string;
  actionFontSize: string;
  actionLineHeight: string;
  actionFontWeight: string;
}

interface Burger {
  borderTop: string;
  contentBackground: string;
  overlayBackground: string;
}

interface Link {
  fontFamily: string;
  fontSize: string;
  fontWeight: string;
  lineHeight: string;
  activeColor: string;
  activeUnderlineColor: string;
}

interface Langs {
  itemBackground: string;
  activeItemBackground: string;
  activeColor: string;
  shadow: string;
}

interface RadioButton {
  border: string;
  colorChecked: string;
}

interface Checkbox {
  activeColor: string;
  defaultColor: string;
  borderRadius: string;
  borderWidth: string;
  icon: {
    activeColor: string;
    disabledColor: string;
  };
}

interface Table {
  headersPadding: string;
  headersMargin: string;
  headersBackground: string;
  headersBorderBottom: string;
  rowPadding: string;
  rowBorderBottom: string;
  rowBackground: string;
  rowBackgroundHover: string;
}

export interface Footer {
  background: string;
  padding: string;
  paddingMobile: string;
  subscriberWidthMobile: string;
  subscriberWidth: string;
  subscriberWidthLarge: string;
  subscriberPaddingMobile: string;
  subscriberPadding: string;
  subscriberBackground: string;
  innerWidth: string;
  innerMaxWidth: string;
  innerPadding: string;
  innerPaddingMobile: string;
}

export interface TextLoader {
  width: string;
  widthMobile: string;
  height: string;
  heightMobile: string;
  background: string;
  borderRadius: string;
  margin: string;
}

type Breakpoint = "sm" | "md" | "lg";

type Breakpoints = {
  down?: (b: Breakpoint) => string;
  up?: (b: Breakpoint) => string;
} & Record<Breakpoint, string>;

interface Grid {
  columns: number;
  columnWidth: number;
  gapWidth: number;
  contentMaxWidth: number;
}

interface Palette {
  accent: {
    dark: string;
    normal: string;
    light: string;
  };
  link: {
    normal: string;
    hover: string;
  };
  text: {
    primary: string;
    secondary: string;
    tertiary: string;
    quaternary: string;
    disabled: string;
  };
  plate?: {
    normal?: string;
    lightBlue?: string;
  };
  bg: {
    ultradark: string;
    dark: string;
    normal: string;
    light: string;
    menu: string;
  };
  line: {
    dark: string;
    normal: string;
    light: string;
  };
  icon: {
    disabled: string;
    normal: string;
    accent: string;
  };
  add: {
    violet: {
      dark: string;
      normal: string;
      light: string;
    };
    pink: {
      dark: string;
      normal: string;
      light: string;
    };
  };
  error: {
    dark: string;
    normal: string;
    light: string;
  };
  success: {
    dark: string;
    normal: string;
    light: string;
  };
  gradient: {
    violet: string;
  };
}

export interface New {
  shadows: Shadows;
  colors?: Colors;
  typography: Typography;
  button?: Button;
  tabs?: Tabs;
  tabsSwitch?: TabsSwitch;
  card?: Card;
  subCard?: SubCard;
  input?: Input;
  inputNew?: InputNew;
  select?: Select;
  inputGroup?: InputGroup;
  dropdown?: Dropdown;
  notification?: Notification;
  navigation?: Navigation;
  burger?: Burger;
  link?: Link;
  langs?: Langs;
  dropdownIcon?: DropdownIcon;
  radioButton?: RadioButton;
  checkbox?: Checkbox;
  table?: Table;
  footer?: Footer;
  tooltip?: Tooltip;
  textLoader?: TextLoader;
  breakpoints?: Breakpoints;
  contentWidth?: Record<Breakpoint, string>;
  grid?: Grid;
  palette: Palette;
}

declare module "styled-components" {
  export interface DefaultTheme {
    [key: string]: any;

    flags?: ThemeFlags;
    // TODO add explicit theme defs from ./theme/types.ts
    new?: New;
  }
}
