import React from "react";
import { getContentGateData } from "../../../utils/localized-data";
import { __ } from "@wordpress/i18n";

type Props = {
	field: string;
	value: string;
	onChange: (newValue: any) => void;
	uniqueId: string;
};

const CheckboxRadioInput = ({ field, value, onChange, uniqueId }: Props) => {
	const labels = getContentGateData("labels", {});

	// Get options based on field
	const getOptions = () => {
		switch (field) {
			case "user_state":
				return [
					{
						value: "logged-in",
						label:
							labels.logged_in || __("Logged In", "contentgate"),
					},
					{
						value: "logged-out",
						label:
							labels.logged_out ||
							__("Logged Out", "contentgate"),
					},
				];
			default:
				return [];
		}
	};

	const options = getOptions();
	let currentValue = Array.isArray(value) ? value[0] || "" : value || "";

	const handleChange = (optionValue: string) => {
		onChange(optionValue);
	};

	// Generate unique name for radio group using uniqueId or fallback to timestamp
	const radioName = uniqueId
		? `contentgate-radio-${field}-${uniqueId}`
		: `contentgate-radio-${field}-${Date.now()}`;

	return (
		<div className="contentgate-checkbox-radio-group flex items-center gap-3 flex-wrap xs:flex-nowrap">
			{options.map((option) => {
				const isChecked = currentValue === option.value;
				return (
					<label
						key={option.value}
						className={`contentgate-checkbox-radio-option flex items-center gap-2 px-3 py-2 border min-h-[38px] rounded-[4px] ${isChecked ? "is-checked border-primary" : ""}`}
					>
						<input
							type="radio"
							name={radioName}
							value={option.value}
							checked={isChecked}
							onChange={(e) => handleChange(e.target.value)}
							className={`contentgate-checkbox-radio-input !mt-[0.5px] ${isChecked ? "!border-primary !accent-primary" : "!border-border"}`}
						/>
						<span className="contentgate-checkbox-radio-label">
							{option.label}
						</span>
					</label>
				);
			})}
		</div>
	);
};

export default CheckboxRadioInput;