import React, { useState } from 'react';
import axios from 'axios';

const ShuffleAPIExample = () => {
    // Step 2: Define the initial state for parameters
    const [params, setParams] = useState({
        deck: 200, // User-defined value; can be changed but should be >= 100
        error: 1.67, // Value can change but should be a floating number
        test_num: 7, // Number of times the data given is shuffled
        deck_items: '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100' // Items to be shuffled
    });

    // Step 4: Function to handle API call
    const handleAPICall = async () => {
        try {
            // Step 4: Make a POST request to the API with provided parameters
            const response = await axios.post('http://100072.pythonanywhere.com/api', params);
            
            // Step 5: Print the response received from the API
            console.log(response.data);
        } catch (error) {
            console.error('Error:', error);
        }
    };

    return (
        <div>
            {/* Step 3: Form to input parameters */}
            <label>
                Deck Size:
                <input
                    type="number"
                    value={params.deck}
                    onChange={e => setParams({ ...params, deck: e.target.value })}
                />
            </label>
            <br />
            <label>
                Error Size:
                <input
                    type="number"
                    step="0.01"
                    value={params.error}
                    onChange={e => setParams({ ...params, error: e.target.value })}
                />
            </label>
            <br />
            <label>
                Test Number:
                <input
                    type="number"
                    value={params.test_num}
                    onChange={e => setParams({ ...params, test_num: e.target.value })}
                />
            </label>
            <br />
            <label>
                Deck Items:
                <input
                    type="text"
                    value={params.deck_items}
                    onChange={e => setParams({ ...params, deck_items: e.target.value })}
                />
            </label>
            <br />
            {/* Step 4: Button to trigger API call */}
            <button onClick={handleAPICall}>Call API</button>
        </div>
    );
};

export default ShuffleAPIExample;