"use client";

import { useState } from "react";

const presetAmounts = [25, 50, 100, 250, 500, 1000];

const ArangetramDonationContent = () => {
	const [selectedAmount, setSelectedAmount] = useState<number>(25);
	const [isOther, setIsOther] = useState(false);
	const [otherAmount, setOtherAmount] = useState<string>("");

	const [firstName, setFirstName] = useState("");
	const [lastName, setLastName] = useState("");
	const [email, setEmail] = useState("");

	const handlePresetClick = (amount: number) => {
		setIsOther(false);
		setSelectedAmount(amount);
		setOtherAmount("");
	};

	const handleOtherClick = () => {
		setIsOther(true);
		setSelectedAmount(0);
	};

	const handleOtherAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		const value = e.target.value;
		if (/^\d*\.?\d{0,2}$/.test(value)) {
			setOtherAmount(value);
			setSelectedAmount(value ? parseFloat(value) : 0);
		}
	};

	const donationTotal = isOther
		? (otherAmount ? parseFloat(otherAmount) : 0)
		: selectedAmount;

	const handleSubmit = (e: React.FormEvent) => {
		e.preventDefault();
		// TODO: hook this up to your actual payment/donation processing endpoint
		console.log({ firstName, lastName, email, donationTotal });
	};

	return (
		<>
			{/* Support Us Intro Section */}
			<section className="aboutinnercontainer pt-0 arangetramintrosection contactcontainer">
				<div className="container container-xxl">
					<div className="row gx-xl-5">
						<div className="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12" data-aos="fade-up" data-aos-duration="700">
							<div className="aboutinnercontent pt-0">
								<div className="section-heading">
									<h2><span>Support Us</span></h2>
								</div>
								<p>Arangetram is the debut on-stage performance of a student where RKDA students showcase their talent cultured and practiced over the years in one event. Some consider this as a culmination of all the hard work they put in over the years learning the dance form. Students can collect donations in the form of tickets to the performance from relatives and friends etc. Students can also donate this money raised to a charitable organization thereby starting philanthropic work even before going to college.</p>
								<p><strong>Hello Art Lovers,</strong></p>
								<p>I will be performing Arangetram in August 2021 depending on Covid resolution. Either way the performance will take place mostly live or at least virtually.</p>
								<p>Please use the below section to purchase a ticket for the performance. Minimum ticket price is $25 but you can always use other option to contribute more/less than that. We rely on your contributions for this program to run successfully.</p>
								<p><em>*All proceedings collected will be donated to &ldquo;Big Brother Big Sister&rdquo; Organization.*</em></p>
								<p>Truly,<br />Sriamsha Dubaka<br />RKDA Student for the last 10yrs</p>
							</div>
						</div>
						<div className="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12" data-aos="fade-up" data-aos-duration="700">
							<form className="donationform" onSubmit={handleSubmit}>
								<div className="donationamountgrid">
									{presetAmounts.map((amount) => (
										<button
											key={amount}
											type="button"
											className={`donationamountbtn ${!isOther && selectedAmount === amount
													? "active"
													: ""
												}`}
											onClick={() => handlePresetClick(amount)}
										>
											${amount.toLocaleString(undefined, {
												minimumFractionDigits: 2,
											})}
										</button>
									))}

									<button
										type="button"
										className={`donationamountbtn ${isOther ? "active" : ""
											}`}
										onClick={handleOtherClick}
									>
										Other
									</button>
								</div>

								{isOther && (
									<div className="form-group mb-4">
										<label htmlFor="otherAmount" className="form-label">
											Enter amount
										</label>
										<div className="input-group">
											<span className="input-group-text">$</span>
											<input
												type="text"
												id="otherAmount"
												className="form-control w-auto ps-3"
												placeholder="0.00"
												value={otherAmount}
												onChange={handleOtherAmountChange}
											/>
										</div>
									</div>
								)}
								<h3>Personal Info</h3>
								<div className="row">
									<div className="col-md-6 col-12 mb-3">
										<div className="form-group mb-0">
											<label htmlFor="firstName" className="form-label">
												First Name <span className="requiredmark">*</span>
											</label>
											<div className="input-groups">
												<i className="bi bi-person"></i>
												<input
													type="text"
													id="firstName"
													className="form-control"
													required
													value={firstName}
													onChange={(e) => setFirstName(e.target.value)}
												/>
											</div>
										</div>
									</div>

									<div className="col-md-6 col-12 mb-3">
										<div className="form-group mb-0">
											<label htmlFor="lastName" className="form-label">
												Last Name
											</label>
											<div className="input-groups">
												<i className="bi bi-person"></i>
												<input
													type="text"
													id="lastName"
													className="form-control"
													value={lastName}
													onChange={(e) => setLastName(e.target.value)}
												/>
											</div>
										</div>
									</div>

									<div className="col-12 mb-3">
										<div className="form-group mb-0">
											<label htmlFor="email" className="form-label">
												Email Address <span className="requiredmark">*</span>
											</label>
											<div className="input-groups">
												<i className="bi bi-envelope"></i>
												<input
													type="email"
													id="email"
													className="form-control"
													required
													value={email}
													onChange={(e) => setEmail(e.target.value)}
												/>
											</div>
										</div>
									</div>
								</div>

								<div className="donationtotal d-flex justify-content-between align-items-center mb-3">
									<span>Donation Total:</span>
									<span className="donationtotalamount">
										$
										{donationTotal.toLocaleString(undefined, {
											minimumFractionDigits: 2,
											maximumFractionDigits: 2,
										})}
									</span>
								</div>

								<button type="submit" className="theme-btn py-lg-2 donationsubmitbtn w-100">
									Donate ${donationTotal.toLocaleString(undefined, {
										minimumFractionDigits: 2,
										maximumFractionDigits: 2,
									})}
								</button>
							</form>
						</div>
					</div>
				</div>
			</section>

			{/* Donation Form Section */}
			<section className="aboutinnercontainer arangetramdonationsection">
				<div className="container container-xxl">
					<div className="row justify-content-center">
						
					</div>
				</div>
			</section>
		</>
	);
};

export default ArangetramDonationContent;