import type { ActivityField } from '@/admin/api/activities';
import { Switch } from '@/components/ui/switch';
import { __ } from '@wordpress/i18n';

export const FORM_LABELS: Partial<Record<ActivityField['type'], string>> = {
	short_text: 'Short Text',
	long_text: 'Long Text',
	multiple_choice: 'Single Choice',
	checkbox: 'Checkboxes',
	date: 'Date',
	file: 'File Upload',
};

type FormCardProps = {
	type: ActivityField['type'];
	required?: boolean;
	onRequiredChange?: (required: boolean) => void;
	children: React.ReactNode;
};

export const FormCard = ({
	type,
	required,
	onRequiredChange,
	children,
}: FormCardProps) => (
	<div className="rounded-[9px] border border-gray-200 bg-white px-4 py-3.5 transition-colors focus-within:border-teal-400">
		<div className="mb-2.5 flex items-center">
			<span className="text-[10px] font-bold tracking-widest text-teal-500 uppercase">
				{FORM_LABELS[type]}
			</span>
			{onRequiredChange !== undefined && (
				<div className="ml-auto flex items-center gap-1.5">
					<span className="text-[11px] text-gray-400">
						{__('Required?', 'allcoach')}
					</span>
					<Switch
						size="sm"
						checked={required ?? false}
						onCheckedChange={onRequiredChange}
					/>
				</div>
			)}
		</div>
		{children}
	</div>
);

export const QuestionInput = ({
	field,
	onChange,
}: {
	field: ActivityField & { label: string };
	onChange: (f: ActivityField) => void;
}) => (
	<input
		value={field.label}
		onChange={(e) =>
			onChange({ ...field, label: e.target.value } as ActivityField)
		}
		placeholder={__('Question…', 'allcoach')}
		className="w-full border-b border-dashed border-gray-200 bg-transparent pb-1 text-[14px] font-semibold text-gray-800 outline-none placeholder:font-normal placeholder:text-gray-400 focus:border-teal-400"
	/>
);