/**
 * Form Field Preview - Preview individual form fields
 */

import { __ } from '@wordpress/i18n';
import './FormFieldPreview.css';

export default function FormFieldPreview({ field }) {
    const fieldType = field.field_type || 'text';
    const label = field.label || '';
    const placeholder = field.placeholder || '';
    const defaultValue = field.default_value || '';
    const description = field.description || '';
    const isRequired = field.is_required || false;
    const fieldId = field.field_id || `field_${Math.random().toString(36).slice(2, 11)}`;

    const renderFieldInput = () => {
        const commonProps = {
            id: fieldId,
            name: fieldId,
            placeholder,
            defaultValue,
            required: isRequired,
            disabled: true,
        };

        switch (fieldType) {
            case 'text':
            case 'url':
            case 'email':
            case 'tel':
            case 'number':
            case 'date':
            case 'datetime':
            case 'color':
                return (
                    <input
                        type={fieldType}
                        className="formipay-input"
                        {...commonProps}
                    />
                );

            case 'textarea':
                return (
                    <textarea
                        className="formipay-textarea"
                        rows={4}
                        {...commonProps}
                    />
                );

            case 'select':
                return (
                    <select className="formipay-select" {...commonProps}>
                        <option value="">{ __('Select an option', 'formipay') }</option>
                        {field.field_options?.map((option, index) => (
                            <option
                                key={index}
                                value={option.value || option.label}
                            >
                                { option.label }
                            </option>
                        ))}
                    </select>
                );

            case 'radio':
                return (
                    <div className="formipay-radio-group">
                        {field.field_options?.map((option, index) => (
                            <label key={index} className="formipay-radio-label">
                                <input
                                    type="radio"
                                    name={fieldId}
                                    value={option.value || option.label}
                                    disabled={true}
                                />
                                <span>{ option.label }</span>
                            </label>
                        ))}
                    </div>
                );

            case 'checkbox':
                return (
                    <div className="formipay-checkbox-group">
                        {field.field_options?.map((option, index) => (
                            <label key={index} className="formipay-checkbox-label">
                                <input
                                    type="checkbox"
                                    name={`${fieldId}_${index}`}
                                    value={option.value || option.label}
                                    disabled={true}
                                />
                                <span>{ option.label }</span>
                            </label>
                        ))}
                    </div>
                );

            case 'divider':
                return <hr className="formipay-divider" />;

            case 'page_break':
                return <div className="formipay-page-break">{ __('Page Break', 'formipay') }</div>;

            case 'country_list':
                return (
                    <select className="formipay-select" {...commonProps}>
                        <option value="">{ __('Select country', 'formipay') }</option>
                        <option value="United States">United States</option>
                        <option value="Indonesia">Indonesia</option>
                    </select>
                );

            default:
                return <input type="text" className="formipay-input" {...commonProps} />;
        }
    };

    const isLayout = ['divider', 'page_break'].includes(fieldType);

    return (
        <div className={`formipay-field-preview formipay-field-preview--${fieldType}`}>
            {!isLayout && label && (
                <label htmlFor={fieldId} className="formipay-field-label">
                    { label }
                    { isRequired && <span className="required">*</span> }
                </label>
            )}

            { renderFieldInput() }

            { description && !isLayout && (
                <p className="formipay-field-description">
                    { description }
                </p>
            )}
        </div>
    );
}
