import { useEffect } from '@wordpress/element';
import { SelectControl, TextControl, Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { fetchForms } from '../utils/api';

const StepOne = ({ formData, updateFormData, forms, setForms, setLoading, nextStep }) => {
    
    useEffect(() => {
        if (forms.length > 0) {
            return;
        }

        let cancelled = false;
        setLoading(true);

        fetchForms()
            .then(data => {
                if (!cancelled) {
                    setForms(data);
                }
            })
            .catch(error => {
                if (!cancelled) {
                    alert('Error loading forms: ' + error.message);
                }
            })
            .finally(() => {
                if (!cancelled) {
                    setLoading(false);
                }
            });

        return () => {
            cancelled = true;
        };
    }, [forms.length, setForms, setLoading]);

    const handleNext = () => {
        if (!formData.title) {
            alert(__('Please enter an automation title', 'wpforms-mailjet-automation'));
            return;
        }
        if (!formData.form_id) {
            alert(__('Please select a form', 'wpforms-mailjet-automation'));
            return;
        }
        nextStep();
    };

    const formOptions = [
        { label: __('Select a form...', 'wpforms-mailjet-automation'), value: '' },
        ...forms.map(form => ({
            label: form.title,
            value: form.id.toString()
        }))
    ];

    return (
        <div className="wpfmj-step">
            <h2>{__('Create Your Automation', 'wpforms-mailjet-automation')}</h2>
            <p className="description">
                {__('Give your automation a name and select which WPForms form you want to connect to Mailjet.', 'wpforms-mailjet-automation')}
            </p>

            <div className="wpfmj-field-group">
                <TextControl
                    label={__('Automation Title', 'wpforms-mailjet-automation')}
                    value={formData.title}
                    onChange={(value) => updateFormData('title', value)}
                    placeholder={__('e.g., Newsletter Signup Automation', 'wpforms-mailjet-automation')}
                    help={__('This is only for your reference and won\'t be shown to users.', 'wpforms-mailjet-automation')}
                />
            </div>

            <div className="wpfmj-field-group">
                <SelectControl
                    label={__('Select WPForm', 'wpforms-mailjet-automation')}
                    value={formData.form_id}
                    options={formOptions}
                    onChange={(value) => updateFormData('form_id', value)}
                    help={__('Choose the form that will trigger this automation.', 'wpforms-mailjet-automation')}
                />
            </div>

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

export default StepOne;
