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

const Logo = () => {
  return <>
    <span style={{ color: Math.random() > 0.5 ? 'red' : 'green' }}>TEXT</span>
    <img src={logo} alt="logo" className="App-logo" />
  </>
}

const NavItem = ({ text, url }) =>
  <li><a href={url}>{text.toUpperCase() + Math.random()}</a></li>

const Nav = () =>
  <ul>
    <NavItem url="/" text="Главная" />
    <NavItem url="/aboutus" text="О нас" />
    <NavItem url="/contacts" text="Контакты" />
  </ul>

const GoodCard = ({ title = 'NoName',
  url = '#',
  img = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
  children }) => //title, url - объявление переменных. После `=` - значение по умолчанию
  <div className='GoodCard'>
    <h2>{title}</h2>
    <a href={url}>
      <img src={img} />
    </a>
    <p>
      {children}
    </p>
  </div>

const Header = () =>
  <header className="App-header">
    <Logo />
    <Nav></Nav>
  </header>

const Content = () =>
  <>
    <GoodCard title='Пиво'
      url="https://ru.wikipedia.org/wiki/%D0%9F%D0%B8%D0%B2%D0%BE"
      img="https://m.dom-eda.com/uploads/images/catalog/item/cbb4387631/07042d6ed6_1000.jpg">
      пей пиво <strong>пенное</strong> и все такое
    </GoodCard>

    <GoodCard title="ЕстьName" children="задаю children как атрибут" />
    <GoodCard title="ЕстьName">
      задаю children как атрибут
    </GoodCard>
  </>
////////////////////////////////////////////////////////////////////
const Counter = () => {
  const [counter, setCounter] = useState(1)
  console.log('ПЕРЕЗАПУСК КОМПОНЕНТА', counter)
  return (
    <button style={{ fontSize: `${counter / 10}em` }}
      onClick={() => setCounter(counter + 1)}>{counter}</button>
  )
}

const Input = () => {
  let state = useState('');
  const [text, setText] = useState('')
  console.log('ИНПУТ ПЕРЕЗАПУСТИЛСЯ', text)
  return (
    <div>
      <input value={text}
        onChange={e => setText(e.target.value)}
        type="text" />
      <ShowFun text={text} onReset={() => setText('')} />
    </div>
  )
}

const ShowFun = ({ text, onReset }) =>
  <div style={{ color: text.length > 10 ? 'red' : 'green' }}
    onClick={onReset}>
    {text}
  </div>
////////////////////////////////////////////////////////////////////
const LoginForm = ({ onLogin }) => {
  //придумать пару стейтов для двух инпутов
  //сделать так, что бы кнопка была disabled когда login или пароль
  //слишком короткие
  //запустить onLogin по клику
  const [login, setLogin] = useState('');
  const [password, setPassword] = useState('');
  const isButtonActive = login?.length > 3 && password?.length > 3;
  return (
    <div>
      <input placeholder='Login' value={login}
        onChange={e => setLogin(e.target.value)}
        type="text" />
      <input placeholder='Password' value={password}
        onChange={e => setPassword(e.target.value)}
        type="password" />
      <button
        disabled={!isButtonActive}
        onClick={() => { onLogin({ login, password }) }}
      >Login...</button>
    </div >
  )
}

function App() {
  return (
    <div className="App">
      <LoginForm onLogin={({ login, password }) => console.log('ЛОГИН И ПАРОЛЬ', login, password)} />
      <Input />
      <Input />
      <Counter />
      <Counter />
    </div>
  );
}

export default App;
