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

const MyDiv = () => {
    return (
        <div>
            Привет-привет!
            <input />
        </div>
        )
}

const TwoDivs = () =>
<div>
    <MyDiv />
    <MyDiv />
</div>

const Add = ({a=100,b=1000}) =>
<div>
    a + b = {a} + {b} = {+a + +b}
</div>

const BlockOfTextWithHeader = ({children,title='No Title'}) =>
<>
    <h2>{title}</h2>
    <p>
        {children}
    </p>
</>

const arr = ["Див 1", "Див 2"]
const data = [
    {children: '1111',title: 'адын-адын'},
    {children: '2222',title: 'два-два'},
    {children: '3333',title: 'тры-тры'},
]

const Counter = () => {
    const [count, setCount] = useState(10)
    console.log(count)
    return (<button onClick={() => setCount(count +1)}>
                    {count}
            </button>)
}

const TextLength = ({text}) => <h1>{text.length}</h1>

const Input = () => {
    const [text, setText] = useState('testtest')
    return (
        <div>
            <input value={text} 
                onChange={e => setText(e.target.value.toUpperCase())}/>
            <TextLength text={text} />
        </div>
    )
}



const LoginForm = ({onLogin}) => {
    //тут надо два состояния - для логина и для пароля;
    const [stateLogin, setStateLogin] = useState("111")
    const [statePass, setStatePass] = useState("123")
    //кнопка логина должна быть disabled если одно из полей пустое
    const disabled = stateLogin && statePass ? false : true
    //по клику на кнопку запустить onLogin и передать туда 
    //текущее состояние login и password
    return (
        //<h1>тут вместо h1 должна быть верстка: два инпута и кнопка login</h1>
        <div>
            <input
             value={stateLogin}
             onChange={e => setStateLogin(e.target.value)}
             />
            <input
             value={statePass}
             onChange={e => setStatePass(e.target.value)}
             />
            <button
             disabled={disabled}
             onClick = {() => onLogin(stateLogin, statePass)}
             >
             Login</button>
        </div>
    )
}
    

function App() {
  return (
      <div className="App">
          <header className="App-header" 
              style={{cssText: "border-radius: 50px; color: #FF0FF; font-size: 2em"}}>

              <LoginForm onLogin={(l,p) => console.log('LOGIN: ', l, ' PASSWORD: ', p)} />
              <Input />
              <Counter />
              <Counter />
              {Math.random() > 0.5 ? <h1>ЗАГОЛОВОК</h1>: <code>КОД</code>}
              {arr.map(text => <div>{text}</div>)}
              {data.map(({children, title}) => <BlockOfTextWithHeader children={children} title={title} />)}
          </header>
      </div>
  );
}

export default App;
