import type {
  AlignmentFieldDefaults,
  ColorFieldDefaults,
} from '@hubspot/cms-components/fields';
import type { CSSVariables } from '../utils/types.js';

type AlignmentValue = typeof AlignmentFieldDefaults;
type ColorValue = typeof ColorFieldDefaults;

export type DividerOrientation = 'horizontal' | 'vertical';

export type DividerBorderStyle = 'solid' | 'dotted' | 'dashed' | 'double';

export type DividerAlignmentDirection = 'HORIZONTAL' | 'VERTICAL';

type PixelValue = `${number}px`;

export type DividerProps = {
  orientation?: DividerOrientation;
  alignment?: AlignmentValue;
  spacing?: PixelValue;
  borderStyle?: DividerBorderStyle;
  length?: number;
  thickness?: number;
  color?: ColorValue;
  className?: string;
  style?: CSSVariables;
};

export type StyleFieldName =
  | 'borderStyle'
  | 'color'
  | 'thickness'
  | 'length'
  | 'alignment';

export type StyleFieldsProps = {
  hideFields?: StyleFieldName[];
  borderStyleLabel?: string;
  borderStyleName?: string;
  borderStyleDefault?: string;
  thicknessLabel?: string;
  thicknessName?: string;
  thicknessDefault?: number;
  lengthLabel?: string;
  lengthName?: string;
  lengthDefault?: number;
  alignmentLabel?: string;
  alignmentName?: string;
  alignmentDefault?: AlignmentValue;
  alignmentDirection?: DividerAlignmentDirection;
  colorLabel?: string;
  colorName?: string;
  colorDefault?: ColorValue;
};
