/**
 * Field Settings Panel - Edit field properties
 */

import { __ } from '@wordpress/i18n';
import { TextControl, CheckboxControl, SelectControl, TextareaControl } from '@wordpress/components';
import { FIELD_TYPES } from '../../config/fieldTypes';
import FormFieldOptions from './FormFieldOptions';
import './FieldSettingsPanel.css';

export default function FieldSettingsPanel({
    field,
    open,
    onClose,
    onUpdate,
}) {
    if (!open || !field) {
        return null;
    }

    const fieldConfig = FIELD_TYPES[field.field_type] || FIELD_TYPES.text;
    const hasOptions = ['select', 'checkbox', 'radio'].includes(field.field_type);
    const hasPlaceholder = [
        'text', 'url', 'email', 'tel', 'number', 'date', 'datetime', 'color',
        'select', 'checkbox', 'radio', 'hidden', 'textarea', 'country_list'
    ].includes(field.field_type);
    const hasDefaultValue = [
        'text', 'url', 'email', 'tel', 'number', 'date', 'datetime', 'color',
        'select', 'checkbox', 'radio', 'hidden', 'textarea'
    ].includes(field.field_type);
    const hasDescription = !['hidden'].includes(field.field_type);
    const isRequired = !['divider', 'page_break', 'hidden'].includes(field.field_type);
    const hasGridColumns = ['radio', 'checkbox'].includes(field.field_type);

    const handleChange = (key, value) => {
        onUpdate?.({ ...field, [key]: value });
    };

    return (
        <div className="formipay-field-settings-panel">
            <div className="formipay-settings-header">
                <h3>
                    <span className="field-type-badge">{ fieldConfig.label }</span>
                    { __('Field Settings', 'formipay') }
                </h3>
                <button
                    type="button"
                    className="button-link"
                    onClick={onClose}
                >
                    { __('Close', 'formipay') }
                </button>
            </div>

            <div className="formipay-settings-content">
                <TextControl
                    label={ __('Label', 'formipay') }
                    value={field.label || ''}
                    onChange={(value) => handleChange('label', value)}
                    help={ __('The display label for this field', 'formipay') }
                />

                <TextControl
                    label={ __('Field ID', 'formipay') }
                    value={field.field_id || ''}
                    onChange={(value) => handleChange('field_id', value)}
                    help={ __('Unique identifier for this field (used in form data)', 'formipay') }
                />

                { hasPlaceholder && (
                    <TextControl
                        label={ __('Placeholder', 'formipay') }
                        value={field.placeholder || ''}
                        onChange={(value) => handleChange('placeholder', value)}
                    />
                ) }

                { hasDefaultValue && (
                    <TextControl
                        label={ __('Default Value', 'formipay') }
                        value={field.default_value || ''}
                        onChange={(value) => handleChange('default_value', value)}
                    />
                ) }

                { hasDescription && (
                    <TextareaControl
                        label={ __('Description', 'formipay') }
                        value={field.description || ''}
                        onChange={(value) => handleChange('description', value)}
                        help={ __('Optional help text displayed below the field', 'formipay') }
                        rows={3}
                    />
                ) }

                { hasOptions && (
                    <FormFieldOptions
                        options={field.field_options || []}
                        onChange={(value) => handleChange('field_options', value)}
                        fieldType={field.field_type}
                    />
                ) }

                { hasGridColumns && (
                    <SelectControl
                        label={ __('Option Grid Columns', 'formipay') }
                        value={field.option_grid_columns || 1}
                        options={[
                            { label: __('1 Column', 'formipay'), value: 1 },
                            { label: __('2 Columns', 'formipay'), value: 2 },
                            { label: __('3 Columns', 'formipay'), value: 3 },
                            { label: __('4 Columns', 'formipay'), value: 4 },
                        ]}
                        onChange={(value) => handleChange('option_grid_columns', parseInt(value))}
                    />
                ) }

                { isRequired && (
                    <CheckboxControl
                        label={ __('Required Field', 'formipay') }
                        checked={field.is_required || false}
                        onChange={(value) => handleChange('is_required', value)}
                        help={ __('User must fill this field before submitting', 'formipay') }
                    />
                ) }
            </div>
        </div>
    );
}
