import React, { Component, useState } from 'react'
import './App.css'
// import Header from './components/Header';
// import Navbar from './components/Navbar';
// import Profile from './components/Profile';

const Input = () => {
  const [value, setValue] = useState('asdf')
  return (
  <>  
      <input value={value} onChange={e => setValue(e.target.value)}/>
      <p>{value.toUpperCase()}</p>
  </>
  )
}

const Spoiler = ({children, header:Header}) => {
  const [show, setShow] = useState(false)
  return (
    <>
      <Header onClick={() => setShow(!show)}/>
      {show && children}
    </>
  )
}

const RangeInput = ({min, max}) => {
  
  const [value, setValue] = useState("notRed")

  return (
    <>
    <input type="text" value={value} style = {{backgroundColor: (value.length < min) || (value.length > max) ? 'red' : 'white' }} onChange={e => {
      setValue(e.target.value);
      
      }}/>
    </>
  )
}

const PasswordConfirm = ({min}) => {

  const [firstPass,  setValue] = useState("123");
  const [secondPass,  setsecValue] = useState("123");
  const [color,  setColorValue] = useState("red");


  const checkPassword = (newVal, confirmVal) => {
    return (newVal.length > min && confirmVal.length > min && newVal == confirmVal) ? "green" : "red";
  }
  

  return (
    <>
    <h3 style = {{color: color}} >{color}</h3>

    <input type="password"  value = {firstPass} style = {{backgroundColor: color}} onChange = {(e) => {
      setValue(e.target.value);
      setColorValue(checkPassword(e.target.value, secondPass));
    }}
      />
      
    <input type="password"value = {secondPass}  style = {{backgroundColor: color}} onChange = {(e) => {
      setsecValue(e.target.value);
      setColorValue(checkPassword(e.target.value, firstPass));
      }}/>
    </>
  )

}


const App = () => {
  
  return (

    <>
      <div className = "spoiler">
        <Spoiler header={({ ...props }) => <h2 {...props}>Show</h2>}>
          <Input/>
          <Input />


          <Spoiler header={({ onClick }) => <button onClick={onClick}>Show</button>}>
            <Input />
            <Input />
          </Spoiler>
        </Spoiler>


      </div>

    <div id = "rangeInput">
      <h2>Range Input</h2>
        <RangeInput min={2} max={10} />
    </div>

    <div id = "passwordConfirm">
      <PasswordConfirm min = {3}  />
    </div>

    </>


  );
}




export default App;
