import React from "react";
import { __, sprintf } from "@wordpress/i18n";
import { Info } from "lucide-react";
import SubscriptionScheduleFields from "./SubscriptionScheduleFields";
import { scheduleLabel } from "./schedule";
export { scheduleLabel } from "./schedule";

/**
 * Box schedule: billing period + interval + length, plus the signup-fee
 * policy. This schedule is what makes a set of products combinable — every
 * product offered inside the box must support its available billing cycles.
 */
const ScheduleSection = ({ schedule, onChange, flexibleAvailable }) => {
	const update = (patch) => onChange({ ...schedule, ...patch });

	return (
		<div className="arraysubs-box-section">
			<div className="arraysubs-box-section__head">
				<h3 className="arraysubs-box-section__title">{__("Box Schedule", "arraysubs")}</h3>
				<p className="arraysubs-box-section__desc">
					{__(
						"How often the whole box is billed. This cycle also decides which products can go inside it.",
						"arraysubs"
					)}
				</p>
			</div>

			<SubscriptionScheduleFields
				schedule={schedule}
				onChange={(next) => update(next)}
				flexibleAvailable={flexibleAvailable}
				prefix="arraysubs-box"
				maxInterval={12}
			/>

			<label className="arraysubs-box-checkbox">
				<input
					type="checkbox"
					checked={!!schedule.keep_signup_fees}
					onChange={(event) => update({ keep_signup_fees: event.target.checked })}
				/>
				<span>
					<strong>{__("Keep signup fees", "arraysubs")}</strong>
					<span className="arraysubs-box-field__help">
						{__(
							"Add up the signup fee of every product the customer puts in the box and charge it once on the first payment. Leave unchecked to charge no extra fees.",
							"arraysubs"
						)}
					</span>
				</span>
			</label>

			<div className="arraysubs-box-alert">
				<Info size={16} className="arraysubs-box-alert__icon" />
				<div className="arraysubs-box-alert__body">
					<strong>
						{sprintf(
							/* translators: %s: billing schedule phrase, e.g. "every month". */
							__("This box bills %s.", "arraysubs"),
							scheduleLabel(schedule)
						)}
					</strong>
					<ul>
						<li>
							{schedule.mode === "full_flexible"
								? __("Subscription products must support every billing period offered here, with an interval of 1. Products that cannot follow all customer choices are hidden from the search.", "arraysubs")
								: __(
								"Subscription products are only offered when their billing period and interval match this box exactly — products on any other cycle are hidden from the search and from the customer's box.",
								"arraysubs"
							)}
						</li>
						<li>
							{__(
								"Regular (non-subscription) products are always available and are included in the box for as long as the subscription runs.",
								"arraysubs"
							)}
						</li>
						<li>
							{__(
								"Products using a different renewal price are excluded, because the box charges one frozen recurring total.",
								"arraysubs"
							)}
						</li>
						<li>
							{__(
								"Adding a box empties the cart first: a box is bought on its own, its contents are added to the order at zero cost, and the whole box renews or cancels as a single subscription.",
								"arraysubs"
							)}
						</li>
						<li>
							{__(
								"Free trials are switched off for everything inside a box.",
								"arraysubs"
							)}
						</li>
					</ul>
				</div>
			</div>
		</div>
	);
};

export default ScheduleSection;