import React, {useState} from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
export default function FForm() {
    const [value,setValue]=useState('Enter text');

    //ATTENTION: omit infinite loop by change handling function
    //https://stackoverflow.com/questions/32923255/react-checkbox-doesnt-toggle
    const [valueCheck,setValueCheck]=useState(true);
    const [valueCheckNext,setValueCheckNext]=useState(false);
    console.log('FForm() valueCheck:'+valueCheck);
    console.log('FForm() valueCheckNext:'+valueCheckNext);
    const [valueEmail,setValueEmail]=useState('Enter email');
    const handleFormSubmit=e=>{
	console.log('handleFormSubmit() started...');
	e.preventDefault();
	console.log('handleFormSubmit() value:'+value);
	console.log('handleFormSubmit() valueCheck:'+valueCheck);
	console.log('handleFormSubmit() valueCheckNext:'+valueCheckNext);
	console.log('handleFormSubmit() valueEmail:'+valueEmail);
	//TODO Set value!?
	console.log('event:'+event);
	console.log('handleFormSubmit() done.');
    };
    const handleValue=(event, property)=>{
	console.log('handleValue() started...');
	const target=event.target;
	console.log('handleValue() target:'+target);
	console.log('handleValue() target.value:'+target.value);
	event.preventDefault();
	console.log('property:'+property);
	if(property==='value'){
	    console.log('property value detected!');
	}
	setValue(target.value);
	console.log('handleValue() done.');
    };
    const handleValueEmail=(event)=>{
	event.preventDefault()
	setValueEmail((valueEmail)=>event.target.value);
    };
  return (
      <Form
	  onSubmit={handleFormSubmit}
      >
      <Form.Group className="mb-3" controlId="formBasicText">
        <Form.Label>Text</Form.Label>
          <Form.Control
	      type="text"
	      value={value}
	      onChange={handleValue}
	  />
        <Form.Text className="text-muted">
          We'll never share your text with anyone else.
        </Form.Text>
      </Form.Group>

      <Form.Group className="mb-3" controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
          <Form.Control
	      type="email"
	      value={valueEmail}
	      onChange={handleValueEmail}
	  />
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

      <Form.Group className="mb-3" controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
      </Form.Group>

	  <Form.Group className="mb-3" controlId="formBasicCheckbox">
	      <Form.Check
		  label="Check me out"
		  checked={valueCheck}
		  name="valueCheck"
		  id="valueCheck"
		  onChange={(event) => setValueCheck(event.currentTarget.checked)}
		  type="checkbox"
	      />

      </Form.Group>

	  <Form.Group className="mb-3" controlId="formBasicCheckboxNext">
	      <Form.Check
		  label="Check me out next"
		  checked={valueCheckNext}
		  name="valueCheckNext"
		  id="valueCheckNext"
		  onChange={(event) => setValueCheckNext(event.currentTarget.checked)}
		  type="checkbox"
	      />
      </Form.Group>

	  <Button variant="secondary" type="submit">
        Submit
      </Button>
    </Form>
  );
}

