import { SelectControl, Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const StepThree = ({ formData, updateFormData, fields, setTriggerChoices, nextStep }) => {
    
    const handleNext = () => {
        if (!formData.trigger_field_id) {
            alert(__('Please select a trigger field', 'wpforms-mailjet-automation'));
            return;
        }

        // Find the selected field and extract its choices
        const triggerField = fields.find(f => f.id.toString() === formData.trigger_field_id);
        if (triggerField && triggerField.choices) {
            setTriggerChoices(triggerField.choices);
        }

        nextStep();
    };

    // Filter fields to only show those with choices (checkbox, radio, select, etc.)
    const triggerFieldOptions = [
        { label: __('Select a field...', 'wpforms-mailjet-automation'), value: '' },
        ...fields
            .filter(field => field.choices && field.choices.length > 0)
            .map(field => ({
                label: `${field.label} (${field.type})`,
                value: field.id.toString()
            }))
    ];

    const selectedField = fields.find(f => f.id.toString() === formData.trigger_field_id);

    return (
        <div className="wpfmj-step">
            <h2>{__('Choose Trigger Field', 'wpforms-mailjet-automation')}</h2>
            <p className="description">
                {__('Select the field that will determine which Mailjet lists the contact is added to. This should be a field with multiple choice options like checkboxes, radio buttons, or dropdowns.', 'wpforms-mailjet-automation')}
            </p>

            <div className="wpfmj-field-group">
                <SelectControl
                    label={__('Trigger Field', 'wpforms-mailjet-automation')}
                    value={formData.trigger_field_id}
                    options={triggerFieldOptions}
                    onChange={(value) => updateFormData('trigger_field_id', value)}
                    help={__('The answers to this field will determine which Mailjet lists the contact is added to.', 'wpforms-mailjet-automation')}
                />
            </div>

            {selectedField && selectedField.choices && (
                <div className="wpfmj-alert wpfmj-alert-info">
                    <strong>{__('Field Preview:', 'wpforms-mailjet-automation')}</strong>
                    <ul style={{ margin: '10px 0 0 20px' }}>
                        {selectedField.choices.map((choice, index) => (
                            <li key={index}>{choice.label}</li>
                        ))}
                    </ul>
                </div>
            )}

            {triggerFieldOptions.length === 1 && (
                <div className="wpfmj-alert wpfmj-alert-error">
                    {__('This form doesn\'t have any fields with multiple choice options. Please add checkbox, radio, or dropdown fields to your form first.', 'wpforms-mailjet-automation')}
                </div>
            )}

            <Button
                variant="primary"
                onClick={handleNext}
                disabled={triggerFieldOptions.length === 1}
                style={{ marginTop: '20px' }}
            >
                {__('Next', 'wpforms-mailjet-automation')}
            </Button>
        </div>
    );
};

export default StepThree;
