import { MultiPaymentElementType } from '../element-group';

export type MultiPaymentElementBase = {
  mount(wrapperElement: HTMLElement): void;
  unmount(): void;
  destroy(): void;
  blur(): void;
  clear(): void;
  focus(): void;
  on(): void;
};

export interface MultiPaymentElementStyle {
  base?: MultiPaymentElementStyleVariant;
  complete?: MultiPaymentElementStyleVariant;
  empty?: MultiPaymentElementStyleVariant;
  focus?: MultiPaymentElementStyleVariant;
  invalid?: MultiPaymentElementStyleVariant;
}

export interface MultiPaymentElementStyleVariant
  extends MultiPaymentElementCSSProperties {
  ':hover'?: MultiPaymentElementCSSProperties;
  ':focus'?: MultiPaymentElementCSSProperties;
  '::placeholder'?: MultiPaymentElementCSSProperties;
  '::selection'?: MultiPaymentElementCSSProperties;
  ':-webkit-autofill'?: MultiPaymentElementCSSProperties;
  ':disabled'?: MultiPaymentElementCSSProperties;
  '::-ms-clear'?: MultiPaymentElementCSSProperties & { display: string };
}

export interface MultiPaymentElementCSSProperties {
  backgroundColor?: string;
  color?: string;
  caretColor?: string;
  fontFamily?: string;
  fontSize?: string;
  fontSmoothing?: string;
  fontStyle?: string;
  fontVariant?: string;
  fontWeight?: string | number;
  iconColor?: string;
  lineHeight?: string;
  letterSpacing?: string;
  textAlign?: string;
  padding?: string;
  textDecoration?: string;
  textShadow?: string;
  textTransform?: string;
}

export interface MultiPaymentElementChangeEvent {
  elementType: MultiPaymentElementType;
  empty: boolean;
  complete: boolean;
  error:
    | undefined
    | {
        type: 'validation_error';
        code: number;
        message: string;
      };
}