/* eslint-disable react/jsx-no-bind */
import type { ChangeEvent, FormEvent } from 'react';
import type React from 'react';
import { useReducer } from 'react';

import SignInHeader from '../../Components/Layout/Header/SignInHeader';
import Button from '../../Components/UI/Button/Button';
import InputElement from '../../Components/UI/Input/Input';
import environment from '../../Environments/environment';
import type { Action } from '../ManageSubscription/Components/ManageSubscriptionHelper';
import styles from '../SignUp/SignUp.module.scss';
import billindDetatilsStyle from './BillingDetails.module.scss';
import type { BillingDetailsReducerInterface } from './Components/BillingDetailsHelper';
import paymentOptionHelperHandler, {
	BillingDetailsEnum,
	dispatchHelper,
	initialStatePayment
} from './Components/BillingDetailsHelper';
import PaymentMethod from './Components/PaymentMethod';
import CardSVG from './Components/UI/CardSVG';
import PayPalSVG from './Components/UI/PayPalSVG';

const BillingDetails: React.FC = (): JSX.Element => {
	const { financials } = environment.frontendRoutes;
	function paymentReducerHandler(
		state: BillingDetailsReducerInterface,
		action: Action
	): BillingDetailsReducerInterface {
		return paymentOptionHelperHandler(state, action);
	}

	const [paymentOption, dispatchPaymentOption] = useReducer(
		paymentReducerHandler,
		initialStatePayment
	);

	function paypalChangeHandler(event: FormEvent): void {
		const clickedItemId = event.currentTarget.children.item(0)?.id;
		if (clickedItemId === BillingDetailsEnum.paypal) {
			dispatchPaymentOption({
				type: 'PAYMENT',
				value: clickedItemId
			});
			dispatchPaymentOption({
				type: 'CREDIT_CARD',
				value: billindDetatilsStyle.nonActiveButton
			});
			dispatchPaymentOption({
				type: 'PAYPAL',
				value: billindDetatilsStyle.activeButton
			});
		} else if (clickedItemId === BillingDetailsEnum.creditCard) {
			dispatchPaymentOption({
				type: 'PAYMENT',
				value: clickedItemId
			});
			dispatchPaymentOption({
				type: 'CREDIT_CARD',
				value: billindDetatilsStyle.activeButton
			});
			dispatchPaymentOption({
				type: 'PAYPAL',
				value: billindDetatilsStyle.nonActiveButton
			});
		}
	}
	function submitHandler(event: FormEvent): void {
		console.log(event);
	}
	function nameHandler(event: ChangeEvent<HTMLInputElement>): void {
		dispatchHelper(event, dispatchPaymentOption, 'NAME');
	}
	function companyHandler(event: ChangeEvent<HTMLInputElement>): void {
		dispatchHelper(event, dispatchPaymentOption, 'COMPANY');
	}
	function emailHandler(event: ChangeEvent<HTMLInputElement>): void {
		dispatchHelper(event, dispatchPaymentOption, 'EMAIL');
	}
	function countryHandler(event: ChangeEvent<HTMLInputElement>): void {
		dispatchHelper(event, dispatchPaymentOption, 'COUNTRY');
	}
	function addressHandler(event: ChangeEvent<HTMLInputElement>): void {
		dispatchHelper(event, dispatchPaymentOption, 'ADDRESS');
	}
	function aptSuiteHandler(event: ChangeEvent<HTMLInputElement>): void {
		dispatchHelper(event, dispatchPaymentOption, 'APT_SUITE');
	}
	function cityHandler(event: ChangeEvent<HTMLInputElement>): void {
		dispatchHelper(event, dispatchPaymentOption, 'CITY');
	}
	function provinceHandler(event: ChangeEvent<HTMLInputElement>): void {
		dispatchHelper(event, dispatchPaymentOption, 'PROVINCE');
	}
	function zipHandler(event: ChangeEvent<HTMLInputElement>): void {
		dispatchHelper(event, dispatchPaymentOption, 'ZIP');
	}
	function nameOnCardHandler(event: ChangeEvent<HTMLInputElement>): void {
		dispatchHelper(event, dispatchPaymentOption, 'NAME_ON_CARD');
	}
	function creditCardNumberHandler(event: ChangeEvent<HTMLInputElement>): void {
		dispatchHelper(event, dispatchPaymentOption, 'CREDIT_CARD_NUMBER');
	}
	function expireMonthHandler(event: ChangeEvent<HTMLInputElement>): void {
		dispatchHelper(event, dispatchPaymentOption, 'EXPIRE_MONTH');
	}
	function expireYearHandler(event: ChangeEvent<HTMLInputElement>): void {
		dispatchHelper(event, dispatchPaymentOption, 'EXPIRE_YEAR');
	}
	return (
		<div className={[styles.signUpContainer, 'container'].join(' ')}>
			<SignInHeader />
			<h3 className="mb-5">Please, add your billing details to activate your plan</h3>
			<div className={billindDetatilsStyle.form_wrapper}>
				<form className={styles.formContainer}>
					<div className={billindDetatilsStyle.block}>
						<div className={billindDetatilsStyle.block_name}>
							<h5>Billing contact</h5>
							<hr />
						</div>
						<div className={billindDetatilsStyle.inputs}>
							<InputElement
								changeHandler={nameHandler}
								classNameContainer={styles.ss}
								disabled={false}
								id="nameSurname"
								inputValue={paymentOption.name}
								label="Name & Surname"
								placeholder="Name & Surname"
								type="text"
							/>
							<InputElement
								changeHandler={companyHandler}
								classNameContainer={styles.ss}
								disabled={false}
								id="company"
								inputValue={paymentOption.company}
								label="Company"
								placeholder="Company name"
								type="text"
							/>
							<InputElement
								changeHandler={emailHandler}
								classNameContainer={styles.ss}
								disabled={false}
								id="e-mail"
								inputValue={paymentOption.email}
								label="Email address"
								placeholder="email@address.com"
								type="e-mail"
							/>
						</div>
						<small>*We will be sending invoices to this email</small>
					</div>

					<div className={billindDetatilsStyle.block}>
						<div className={billindDetatilsStyle.block_name}>
							<h5>Billing address</h5>
							<hr />
						</div>
						<div className={billindDetatilsStyle.inputs}>
							<InputElement
								changeHandler={countryHandler}
								classNameContainer={styles.ss}
								disabled={false}
								id="nameSurname"
								inputValue={paymentOption.country}
								label="Country"
								placeholder="Dropdown Here"
								type="text"
							/>
							<InputElement
								changeHandler={addressHandler}
								classNameContainer={styles.ss}
								disabled={false}
								id="address"
								inputValue={paymentOption.street}
								label="Address"
								placeholder="Street"
								type="text"
							/>
							<InputElement
								changeHandler={aptSuiteHandler}
								classNameContainer={styles.ss}
								disabled={false}
								id="aptSuite"
								inputValue={paymentOption.apt_suit}
								label=""
								placeholder="Apt/suite"
								type="text"
							/>
							<InputElement
								changeHandler={cityHandler}
								classNameContainer={styles.ss}
								disabled={false}
								id="city"
								inputValue={paymentOption.city}
								label="City"
								placeholder="City"
								type="text"
							/>
							<InputElement
								changeHandler={provinceHandler}
								classNameContainer={styles.ss}
								disabled={false}
								id="stateProvince"
								inputValue={paymentOption.province}
								label="State/Province"
								placeholder="State/Province"
								type="text"
							/>
							<InputElement
								changeHandler={zipHandler}
								classNameContainer={styles.ss}
								disabled={false}
								id="zip-postal"
								inputValue={paymentOption.zip}
								label="Zip/Postal"
								placeholder="Zip/Postal code"
								type="text"
							/>
						</div>
						<div className={billindDetatilsStyle.block_name}>
							<h5>Payment Method</h5>
							<hr />
						</div>
						<div className={billindDetatilsStyle.paymentMethod}>
							<PaymentMethod
								cardContainer={billindDetatilsStyle.creditCard}
								for="creditCard"
								label="Credit Card"
								onChange={paypalChangeHandler}
								onClick={paypalChangeHandler}
								radioButtonClass={[
									billindDetatilsStyle.creditCardSvg,
									paymentOption.creditCardButton
								].join(' ')}
								radioId="creditCard"
								radioName="creditCard"
								svg={<CardSVG />}
								value="creditCard"
							/>
							<PaymentMethod
								cardContainer={billindDetatilsStyle.paypal}
								for="paypal"
								label="PayPal"
								onChange={paypalChangeHandler}
								onClick={paypalChangeHandler}
								radioButtonClass={[billindDetatilsStyle.paypalSvg, paymentOption.paypalButton].join(
									' '
								)}
								radioId="paypal"
								radioName="paypal"
								svg={<PayPalSVG />}
								value="paypal"
							/>
						</div>
						<p className={billindDetatilsStyle.bankParagraph}>
							*Your bank may require strong customer authentication (SCA) to be completed in the
							next step by the card holder.
						</p>
						<div className={billindDetatilsStyle.inputs}>
							<InputElement
								changeHandler={nameOnCardHandler}
								classNameContainer={styles.ss}
								disabled={false}
								id="nameOnTheCard"
								inputValue={paymentOption.nameOnTheCard}
								label="Name on the card"
								placeholder="Name and Surname"
								type="text"
							/>
							<InputElement
								changeHandler={creditCardNumberHandler}
								classNameContainer={styles.ss}
								disabled={false}
								id="creditCardNumber"
								inputValue={paymentOption.creditCardNumber}
								label="Credit card number"
								placeholder="0000 0000 0000 0000"
								type="text"
							/>
							<div className={billindDetatilsStyle.smallInputs}>
								<p>Card expiration date</p>
								<input
									className={billindDetatilsStyle.expireMonth}
									id="nameOnTheCardMonth"
									onChange={expireMonthHandler}
									placeholder="Name and Surname"
									type="text"
									value={paymentOption.expireDateMonth}
								/>
								<input
									className={billindDetatilsStyle.expireYear}
									id="nameOnTheCardYear"
									onChange={expireYearHandler}
									placeholder="0000 0000 0000 0000"
									type="text"
									value={paymentOption.expireDateYear}
								/>
							</div>
						</div>
					</div>

					<Button
						buttonClass={styles.signUpButton}
						id="purchasePlan"
						link={financials}
						onClick={submitHandler}
						svg={undefined}
						type="button"
						value="Purchase plan"
					/>
				</form>
			</div>
		</div>
	);
};

export default BillingDetails;