import './App.css';
import { useState } from 'react';
import axios from 'axios';

function App() {
  const [datasetQuarry, setDatasetQuarry] = useState('');
  const [tableQuarry, setTableQuarry] = useState('');
  const [columns, setColumns] = useState('');
  const [results, setResults] = useState('');

  const fetchDataFromAPI = async (dataset, table, column) => {
    try {
      const response = await axios.get(`YOUR_API_ENDPOINT?dataset=${dataset}&table=${table}&column=${column}`);
      const data = response.data; 

      setResults(data);
    } catch (error) {
      console.error('Error fetching data:', error);
      setResults('Error fetching data');
    }
  };

  const handleButtonClick = () => {
    // Call the API request function with the provided parameters
    fetchDataFromAPI(datasetQuarry, tableQuarry, columns);
  };

  return (
    <div className="container">
      <div className="row">
        <div className="column">
          <input
            type="text"
            placeholder="Dataset quarry"
            value={datasetQuarry}
            onChange={(e) => setDatasetQuarry(e.target.value)}
          />
          <input
            type="text"
            placeholder="Table quarry"
            value={tableQuarry}
            onChange={(e) => setTableQuarry(e.target.value)}
          />
        </div>
        <div className="column">
          <input
            className="col"
            type="text"
            placeholder="Columns"
            value={columns}
            onChange={(e) => setColumns(e.target.value)}
          />
        </div>
      </div>
      <div className="row">
        <button type="button" onClick={handleButtonClick}>
          Test
        </button>
      </div>
      <div className="row">
        <textarea
          placeholder="Results"
          value={results}
          onChange={(e) => setResults(e.target.value)}
        ></textarea>
      </div>
    </div>
  );
}

export default App;