"use client";
import React, { useState } from 'react';
import Tablero from './funciones';
import { evaluate } from 'mathjs';

const Home = () => {
    const [expression, setExpression] = useState('');
    const [start, setStart] = useState('');
    const [end, setEnd] = useState('');
    const [data, setData] = useState({ labels: [], dataPoints: [] });

    const handleSubmit = (e) => {
        e.preventDefault();

        // Convert inputs to numbers
        const startX = parseFloat(start);
        const endX = parseFloat(end);

        // Generate labels and data points
        const labels = [];
        const dataPoints = [];
        for (let x = startX; x <= endX; x += 0.1) {
            labels.push(x.toFixed(1));
            try {
                const y = evaluate(expression, { x });
                dataPoints.push(y);
            } catch (error) {
                console.error("Error evaluating expression", error);
                dataPoints.push(null);
            }
        }

        setData({ labels, dataPoints });
    };

    return (
        <div className="container border-2">
            <h1>Exprecion algebraica</h1>
            <form onSubmit={handleSubmit}>
                <div>
                    <label>
                    Exprecion:
                        <input
                            type="text"
                            value={expression}
                            onChange={(e) => setExpression(e.target.value)}
                            placeholder="e.g., x^2 + 2*x + 1"
                            required
                        />
                    </label>
                </div>
                <div>
                    <label>
                        valor inicial:
                        <input className='border-4'
                            type="number"
                            step="0.1"
                            value={start}
                            onChange={(e) => setStart(e.target.value)}
                            required
                        />
                    </label>
                </div>
                <div>
                    <label>
                        Valor final
                        <input className='border-4'
                            type="number"
                            step="0.1"
                            value={end}
                            onChange={(e) => setEnd(e.target.value)}
                            required
                        />
                    </label>
                </div>
                <button type="submit" className='bg-black text-white font-bold px-6 py-1 rounded-3xl'>Generar Grafica</button>
            </form>
            {data.labels.length > 0 && <Tablero labels={data.labels} dataPoints={data.dataPoints} />}
        </div>
    );
};

export default Home;