/* eslint-disable @typescript-eslint/no-explicit-any */
import {
  MultiPaymentElementBase,
  MultiPaymentElementStyle,
  MultiPaymentElementChangeEvent,
} from './base';

export type MultiPaymentCardNumberElement = MultiPaymentElementBase & {
  on(
    eventType: 'change',
    handler: (event: MultiPaymentCardNumberElementChangeEvent) => any,
  ): MultiPaymentCardNumberElement;
  off(
    eventType: 'change',
    handler: (event: MultiPaymentCardNumberElementChangeEvent) => any,
  ): MultiPaymentCardNumberElement;
  on(
    eventType: 'ready',
    handler: (event: { elementType: 'cardNumber' }) => any,
  ): MultiPaymentCardNumberElement;
  off(
    eventType: 'ready',
    handler: (event: { elementType: 'cardNumber' }) => any,
  ): MultiPaymentCardNumberElement;
  on(
    eventType: 'focus',
    handler: (event: { elementType: 'cardNumber' }) => any,
  ): MultiPaymentCardNumberElement;
  off(
    eventType: 'focus',
    handler: (event: { elementType: 'cardNumber' }) => any,
  ): MultiPaymentCardNumberElement;
  on(
    eventType: 'blur',
    handler: (event: { elementType: 'cardNumber' }) => any,
  ): MultiPaymentCardNumberElement;
  off(
    eventType: 'blur',
    handler: (event: { elementType: 'cardNumber' }) => any,
  ): MultiPaymentCardNumberElement;
  update(options: Partial<MultiPaymentCardNumberElementOptions>): void;
};

export interface MultiPaymentCardNumberElementOptions {
  style?: MultiPaymentElementStyle;
  placeholder?: string;
  disabled?: boolean;
}

export interface MultiPaymentCardNumberElementChangeEvent
  extends MultiPaymentElementChangeEvent {
  elementType: 'cardNumber';
}