import { Button } from "bootstrap";
import { useState, useEffect } from 'react';
import DataService from '../services/DataService';

export default function Main(props) {
    const url = 'http://localhost:8080';
    const urlRandomNumber = '/getRandomNumber';
    const urlCalc = '/sum?val1=num1&val2=num2';
    const urlLength = '/length?name=strName';
    const urlUpperCase = '/upperCase?word=strWord';
    
    function get(url2) {
        fetch(
            url + url2,
            {
              method: 'GET',
              headers: { 'Content-Type': 'application/json' },            
            }
          ).then(resp => resp.text()).then(alert);
    }

    function getRandomNumber() {
        get(urlRandomNumber);
     
    }
    function req_calc() {
        get(urlCalc.replace("num1", num1).replace("num2", num2));    
    }
    const [num1, setnum1] = useState('');
    const [num2, setnum2] = useState('');
    function valueChanged1(event) {
        console.log(event.target);
        setnum1(event.target.value);
    }
    function valueChanged2(event) {
        setnum2(event.target.value);
    }
    function req_length() {
        get(urlLength.replace("strName", strName));
    
    }
    const [strName, setName] = useState('');
    function valueChangedName(event) {
        setName(event.target.value);
    }
    function req_upperCase() {
        get(urlUpperCase.replace("strWord", strWord));
    }
    const [strWord, setWord] = useState('');
    function valueChangedWord(event) {
        setWord(event.target.value);
    }
    return <div>
        <h1>Сайт...</h1>       
        <div className="row">
            <h1>Рандомное число</h1>
            <button className="btn primary" onClick={getRandomNumber}>Get Random Number</button>
        </div>
        <div className="row">
            <h1>Калькулятор</h1>
            <input type="text" onChange={valueChanged1}></input>
            <input type="text" onChange={valueChanged2}></input>
            <button onClick={req_calc}>Press</button>
        </div>
        <div className="row">
            <h1>Посчитать длину строки</h1>
            <input type="text" onChange={valueChangedName}></input>
            <button onClick={req_length}>Press</button>
        </div>
        <div className="row">
            <h1>Перевести слово в верхний регистр</h1>
            <input type="text" onChange={valueChangedWord}></input>
            <button onClick={req_upperCase}>Press</button>
        </div>
    </div>
}