import type { ChangeEvent } from 'react';
import type React from 'react';

import type { Action } from '../../ManageSubscription/Components/ManageSubscriptionHelper';
import billindDetatilsStyle from '../BillingDetails.module.scss';

export enum BillingDetailsEnum {
	creditCard = 'creditCard',
	paypal = 'paypal'
}

export interface PaymentOptionHelperInterface {
	clickedItemId: string | undefined;
	dispatchPaymentOption: React.Dispatch<{
		type: string;
		value: string | number | undefined;
	}>;
}

export interface BillingDetailsReducerInterface {
	creditCardButton: string;
	paypalButton: string;
	payment: string;
	company: string;
	name: string;
	email: string;
	country: string;
	street: string;
	apt_suit: string;
	city: string;
	province: string;
	zip: string;
	nameOnTheCard: string;
	creditCardNumber: string;
	expireDateMonth: string;
	expireDateYear: string;
}

export const initialStatePayment: BillingDetailsReducerInterface = {
	creditCardButton: billindDetatilsStyle.activeButton,
	paypalButton: billindDetatilsStyle.nonActiveButton,
	payment: '',
	company: '',
	name: '',
	email: '',
	country: '',
	street: '',
	apt_suit: '',
	city: '',
	province: '',
	zip: '',
	nameOnTheCard: '',
	creditCardNumber: '',
	expireDateMonth: '',
	expireDateYear: ''
};

function paymentOptionHelperHandler(
	state: BillingDetailsReducerInterface,
	action: Action
): BillingDetailsReducerInterface {
	switch (action.type) {
		case 'CREDIT_CARD':
			return {
				...state,
				creditCardButton: action.value.toString()
			};
		case 'PAYPAL':
			return {
				...state,
				paypalButton: action.value.toString()
			};
		case 'PAYMENT':
			return {
				...state,
				payment: action.value.toString()
			};
		case 'NAME':
			return {
				...state,
				name: action.value.toString()
			};
		case 'COMPANY':
			return {
				...state,
				company: action.value.toString()
			};
		case 'EMAIL':
			return {
				...state,
				email: action.value.toString()
			};
		case 'COUNTRY':
			return {
				...state,
				country: action.value.toString()
			};
		case 'ADDRESS':
			return {
				...state,
				street: action.value.toString()
			};
		case 'APT_SUITE':
			return {
				...state,
				apt_suit: action.value.toString()
			};
		case 'CITY':
			return {
				...state,
				city: action.value.toString()
			};
		case 'PROVINCE':
			return {
				...state,
				province: action.value.toString()
			};
		case 'ZIP':
			return {
				...state,
				zip: action.value.toString()
			};
		case 'NAME_ON_CARD':
			return {
				...state,
				nameOnTheCard: action.value.toString()
			};
		case 'CREDIT_CARD_NUMBER':
			return {
				...state,
				creditCardNumber: action.value.toString()
			};
		case 'EXPIRE_MONTH':
			return {
				...state,
				expireDateMonth: action.value.toString()
			};
		case 'EXPIRE_YEAR':
			return {
				...state,
				expireDateYear: action.value.toString()
			};
		default:
			return initialStatePayment;
	}
}
export default paymentOptionHelperHandler;

export function dispatchHelper(
	event: ChangeEvent<HTMLInputElement>,
	dispatchPaymentOption: React.Dispatch<{ type: string; value: string | number }>,
	type: string
): void {
	dispatchPaymentOption({
		type,
		value: event.target.value
	});
}