import {
  IconFieldDefaults,
  BooleanFieldDefaults,
  ColorFieldDefaults,
} from '@hubspot/cms-components/fields';

type ColorFieldValue = typeof ColorFieldDefaults;

export type IconPurpose = 'SEMANTIC' | 'DECORATIVE';

export type IconSize = 'small' | 'medium' | 'large';
export type IconShape = 'square' | 'rounded' | 'circle';

export type IconProps = {
  fieldPath?: string;
  size?: IconSize;
  fill?: string;
  className?: string;
  style?: React.CSSProperties;
  showIcon?: boolean;
  purpose?: IconPurpose;
  title?: string;
  showIconBackground?: boolean;
  iconBackgroundColor?: string;
  iconBackgroundPadding?: number;
  iconBackgroundShape?: IconShape | string;
};

type IconToggleProps = {
  showIconLabel?: string;
  showIconName?: string;
  showIconDefault?: typeof BooleanFieldDefaults;
  addIconToggle: true;
};

type IconContentFieldsWithoutToggleProps = {
  iconLabel?: string;
  iconName?: string;
  iconDefault?: typeof IconFieldDefaults;
  addIconToggle?: boolean; // this is not a boolean field, but a boolean prop which adds the boolean field and associated visibility rules
};

export type IconContentFieldsWithToggleProps =
  IconContentFieldsWithoutToggleProps & IconToggleProps;

export type ContentFieldsProps =
  | IconContentFieldsWithToggleProps
  | IconContentFieldsWithoutToggleProps;

export type StyleFieldName =
  | 'iconColor'
  | 'iconBackgroundColor'
  | 'iconShape'
  | 'iconSize';

export type StyleFieldsProps = {
  hideFields?: StyleFieldName[];
  iconColorLabel?: string;
  iconColorName?: string;
  iconColorDefault?: ColorFieldValue;
  iconBackgroundColorLabel?: string;
  iconBackgroundColorName?: string;
  iconBackgroundColorDefault?: ColorFieldValue;
  iconShapeLabel?: string;
  iconShapeName?: string;
  iconShapeDefault?: IconShape;
  iconSizeLabel?: string;
  iconSizeName?: string;
  iconSizeDefault?: IconSize;
};
