/**
 * Form Field Options - Manage select/radio/checkbox options
 */

import { __ } from '@wordpress/i18n';
import { TextControl, Button } from '@wordpress/components';
import { Icon as WPIcon, plus } from '@wordpress/icons';

export default function FormFieldOptions({ options = [], onChange, fieldType }) {
    const handleAddOption = () => {
        const newOption = {
            label: '',
            value: '',
            amount: '',
            weight: '',
            quantity: false,
        };
        onChange([...options, newOption]);
    };

    const handleUpdateOption = (index, updates) => {
        const newOptions = [...options];
        newOptions[index] = { ...newOptions[index], ...updates };
        onChange(newOptions);
    };

    const handleDeleteOption = (index) => {
        const newOptions = options.filter((_, i) => i !== index);
        onChange(newOptions);
    };

    const isMultiSelect = fieldType === 'checkbox';

    return (
        <div className="formipay-field-options">
            <div className="formipay-options-header">
                <label>
                    { isMultiSelect
                        ? __('Checkbox Options', 'formipay')
                        : fieldType === 'radio'
                            ? __('Radio Options', 'formipay')
                            : __('Select Options', 'formipay')
                    }
                </label>
                <Button
                    variant="secondary"
                    size="compact"
                    onClick={handleAddOption}
                    icon={<WPIcon icon={plus} size={16} />}
                >
                    { __('Add Option', 'formipay') }
                </Button>
            </div>

            <div className="formipay-options-list">
                {options.map((option, index) => (
                    <div key={index} className="formipay-option-item">
                        <div className="formipay-option-fields">
                            <TextControl
                                label={__('Label', 'formipay')}
                                value={option.label || ''}
                                onChange={(value) => handleUpdateOption(index, { label: value })}
                                placeholder={__('Option label', 'formipay')}
                            />

                            <TextControl
                                label={__('Value', 'formipay')}
                                value={option.value || ''}
                                onChange={(value) => handleUpdateOption(index, { value: value })}
                                placeholder={__('Optional custom value', 'formipay')}
                            />

                            <TextControl
                                label={__('Amount', 'formipay')}
                                type="number"
                                value={option.amount || ''}
                                onChange={(value) => handleUpdateOption(index, { amount: value })}
                                placeholder={__('0', 'formipay')}
                                step="0.01"
                            />
                        </div>

                        <div className="formipay-option-actions">
                            <Button
                                variant="tertiary"
                                size="compact"
                                onClick={() => handleDeleteOption(index)}
                                icon={<WPIcon icon={trash} size={16} />}
                                label={__('Delete Option', 'formipay')}
                            />
                        </div>
                    </div>
                ))}

                {options.length === 0 && (
                    <div className="formipay-no-options">
                        <p>
                            { __('No options added yet. Click "Add Option" to create one.', 'formipay') }
                        </p>
                    </div>
                )}
            </div>
        </div>
    );
}
