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

export type MultiPaymentCardCvcElement = MultiPaymentElementBase & {
  on(
    eventType: 'change',
    handler: (event: MultiPaymentCardCvcElementChangeEvent) => any,
  ): MultiPaymentCardCvcElement;
  off(
    eventType: 'change',
    handler: (event: MultiPaymentCardCvcElementChangeEvent) => any,
  ): MultiPaymentCardCvcElement;
  on(
    eventType: 'ready',
    handler: (event: { elementType: 'cardCvc' }) => any,
  ): MultiPaymentCardCvcElement;
  off(
    eventType: 'ready',
    handler: (event: { elementType: 'cardCvc' }) => any,
  ): MultiPaymentCardCvcElement;
  on(
    eventType: 'focus',
    handler: (event: { elementType: 'cardCvc' }) => any,
  ): MultiPaymentCardCvcElement;
  off(
    eventType: 'focus',
    handler: (event: { elementType: 'cardCvc' }) => any,
  ): MultiPaymentCardCvcElement;
  on(
    eventType: 'blur',
    handler: (event: { elementType: 'cardCvc' }) => any,
  ): MultiPaymentCardCvcElement;
  off(
    eventType: 'blur',
    handler: (event: { elementType: 'cardCvc' }) => any,
  ): MultiPaymentCardCvcElement;
  update(options: Partial<MultiPaymentCardCvcElementOptions>): void;
};

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

export interface MultiPaymentCardCvcElementChangeEvent
  extends MultiPaymentElementChangeEvent {
  elementType: 'cardCvc';
}