import React, { useState } from "react";
import './App.css';


const Spoiler = ({header = <button>Жми на меня</button>, open, children}) => {
  const [openOpen, setOpen] = useState(open)
  return(
    <div>
      <div onClick ={ () => {
        setOpen(!openOpen)
      }}>
        <p>
        {header}
        </p>
          {openOpen && (
            <div>
              {children}
            </div>
        )}
      </div>
    </div>
  )
}

const HideSpoiler = () => {
  return(
    <div>
      <Spoiler header={<h1>Заголовок</h1>} open>
      Контент 1
        <p>
          Тут текст который виден всегда!
        </p>
      </Spoiler>

      <Spoiler>
      <h2>Контент 2</h2>
        <p>
          Этот текст появляется при нажатии на кнопку!
        </p>
      </Spoiler>
    </div>
  )
}


const RangeInput = ({min,max}) =>{
  const [amountSymbol, setAmountSymbol] = useState('')
  return(
    <div>
      <input type = 'text'
            style ={{ background: amountSymbol.length < min || amountSymbol.length > max ? 'red' : null  }}
            value = {amountSymbol}
            onChange={(e) => setAmountSymbol(e.target.value)}
      />
            
      
    </div>
  )
}

const PasswordConfirm = ({min}) => {
  const [passwordInput1, setPasswordInput1] = useState('')
  const [passwordInput2, setPasswordInput2] = useState('')

  // const Examination = () => {
  //   if(passwordInput1 === passwordInput2){
  //     if(passwordInput1.length > min && passwordInput2.length > min){
  //       if(passwordInput1.match(/^[A-Za-z]/) && passwordInput2.match(/^[A-Za-z]/)){
  //           return true
  //       }
  //     }
  //   }
  //   else{
  //     return false
  //   }
  // }
  return(
    <div>
      <input className='inp' type = "password"
        style = {{background: (passwordInput1 === passwordInput2) && (passwordInput1.length > min && passwordInput2.length > min) && (passwordInput1.match(/^[A-Za-z]/) && passwordInput2.match(/^[A-Za-z]/)) ? 'green':null}}
        value = {passwordInput1}
        onChange = {(e) => setPasswordInput1(e.target.value)}
        // onInput = {Examination}
      />
      <input className= 'inp' type = "password"
         style = {{background: (passwordInput1 === passwordInput2) && (passwordInput1.length > min && passwordInput2.length > min) && (passwordInput1.match(/^[A-Za-z]/) && passwordInput2.match(/^[A-Za-z]/)) ? 'green':null}}
        value = {passwordInput2}
        onChange = {(e) => setPasswordInput2(e.target.value)}
        // onInput = {Examination}
      />
    </div>
  )
}


function App() {
  return (
    <div className="App">
    <HideSpoiler></HideSpoiler>
    <RangeInput min={2} max={10} />
    <PasswordConfirm min={2} />
    </div>
  );
}

export default App;