import type { ActivityField } from '@/admin/api/activities';
import { __ } from '@wordpress/i18n';
import { Calendar, FileUp } from 'lucide-react';
import ContentBlock from './content-block';
import { FormCard, QuestionInput } from './form-card';
import OptionsEditor from './options-editor';
import WpMediaBlock from './wp-media-block';

type Props = {
	field: ActivityField;
	onChange: (f: ActivityField) => void;
	onSlashTrigger: () => void;
};

const FieldContent = ({ field, onChange, onSlashTrigger }: Props) => {
	switch (field.type) {
		case 'content':
			return <ContentBlock field={field} onChange={onChange} onSlashTrigger={onSlashTrigger} />;

		case 'short_text':
			return (
				<FormCard
					type={field.type}
					required={field.required}
					onRequiredChange={(required) => onChange({ ...field, required })}
				>
					<QuestionInput field={field} onChange={onChange} />
					<div className="mt-3 rounded-md border border-gray-100 bg-gray-50 px-3 py-2 text-[13px] text-gray-400">
						{__('Short answer…', 'allcoach')}
					</div>
				</FormCard>
			);

		case 'long_text':
			return (
				<FormCard
					type={field.type}
					required={field.required}
					onRequiredChange={(required) => onChange({ ...field, required })}
				>
					<QuestionInput field={field} onChange={onChange} />
					<div className="mt-3 min-h-[72px] rounded-md border border-gray-100 bg-gray-50 px-3 py-2 text-[13px] text-gray-400">
						{__('Long answer…', 'allcoach')}
					</div>
				</FormCard>
			);

		case 'multiple_choice':
		case 'checkbox':
			return (
				<FormCard
					type={field.type}
					required={field.required}
					onRequiredChange={(required) => onChange({ ...field, required })}
				>
					<QuestionInput field={field} onChange={onChange} />
					<OptionsEditor field={field} onChange={onChange} />
				</FormCard>
			);

		case 'date':
			return (
				<FormCard
					type={field.type}
					required={field.required}
					onRequiredChange={(required) => onChange({ ...field, required })}
				>
					<QuestionInput field={field} onChange={onChange} />
					<div className="mt-3 flex w-fit items-center gap-2 rounded-md border border-gray-100 bg-gray-50 px-3 py-2 text-[13px] text-gray-400">
						<Calendar className="size-3.5" />
						{__('Date picker…', 'allcoach')}
					</div>
				</FormCard>
			);

		case 'file':
			return (
				<FormCard
					type={field.type}
					required={field.required}
					onRequiredChange={(required) => onChange({ ...field, required })}
				>
					<QuestionInput field={field} onChange={onChange} />
					<div className="mt-3 flex flex-col items-center gap-2 rounded-[9px] border-2 border-dashed border-gray-200 p-5 text-center text-gray-400 transition-colors hover:border-teal-300">
						<FileUp className="size-5" />
						<span className="text-[12px]">{__('File upload zone', 'allcoach')}</span>
					</div>
				</FormCard>
			);

		case 'image':
		case 'video':
		case 'audio':
			return <WpMediaBlock field={field} onChange={onChange} />;
	}
};

export default FieldContent;