import {useState, useEffect, useRef} from 'react';
import './App.scss';

/////////////Spoiler
const Spoiler = ({ header = "+", open, children }) => {
  const [opening, setOpening] = useState('');
  if (opening !== '') {
      open = opening;
  }
  return <>
  <div onClick={() => setOpening(!open)}>{header}</div>
  <div>{open && children}</div>
  </>
}

/////////////RangeInput
const RangeInput = ({min,max}) => {

  const [text, setText] = useState('')
  return <div><input
      style={{backgroundColor: text.length<min || text.length>max ?'red':'white'}} 
      value={text}
      onChange={e => setText(e.target.value)}
      type="text"/></div>
}

////////////LoginForm
const LoginForm = ({onLogin}) => {
  const [login, setTextLogin] = useState('')
  const [password, setTextPass] = useState('')
  let buttonDisabled= login.length<6 || password.length<6 ? true : false
    return (
        <div>
            <input placeholder='Login'
            value={login} 
            onChange={e => setTextLogin(e.target.value)} 
            type="text"
            /><br/>
            <input placeholder='Password'
            value={password} 
            onChange={e => setTextPass(e.target.value)} 
            type="password"
            /><br/>
            <button 
            disabled= {buttonDisabled}
            onClick={() => onLogin({login,password})}
            >Login...</button>
        </div>
    )
}

///////////PasswordConfirm
const PasswordConfirm = ({min}) => {

  const [pass1, setPass1] = useState('')
  const [pass2, setPass2] = useState('')
  let inpunStyle
  let errorText 
  let errorText2
  if(pass1===pass2 && pass1.length>=min && pass2.length>=min){
    inpunStyle = 'green'
    errorText =''
    errorText2 =''
  }else{
    pass1!==pass2? errorText = 'Пароли не совпадают':errorText =''
    pass1.length<min && pass2.length<min? errorText2 = `Пароль должени состоять минимум из ${min} символов`:errorText2 =''
    inpunStyle = 'white'
  }
  return <div>Введите пароль<br/>
            <input
                style={{backgroundColor: inpunStyle}} 
                value={pass1}
                onChange={e => setPass1(e.target.value)}
                placeholder='Password'
                type="password"
                /><br/>Повторите пароль<br/>
            <input 
                style={{backgroundColor: inpunStyle}} 
                value={pass2}
                onChange={e => setPass2(e.target.value)}
                placeholder='Password'
                type="password"
                /><div style={{color:'red'}}>{errorText}<br/>{errorText2}</div>
          </div>
}


const oneCat = {
  "_id": "62c9472cb74e1f5f2ec1a0d4",
  "name": "iPhone",
  "goods": [
      {
          "_id": "62c9472cb74e1f5f2ec1a0d1",
          "name": "iPhone 4",
          "images": [
              {
                  "url": "images/e48e7ee1bcc4ab5432d1e7a3a89b8466"
              },
              {
                  "url": "images/58c6157d51d8c2430c4dd41b6d0132f4"
              }
          ]
      },
      {
          "_id": "62c9472cb74e1f5f2ec1a0d2",
          "name": "iPhone X",
          "images": [
              {
                  "url": "images/c67956dff69d1160a6e70b71838d7282"
              },
              {
                  "url": "images/0153956fc7bf99567e620ee446319b00"
              }
          ]
      },
      {
          "_id": "62c9472cb74e1f5f2ec1a0d3",
          "name": "iPhone 13",
          "images": [
              {
                  "url": "images/56c5d476685355221b1a3ba2c554ad91"
              },
              {
                  "url": "images/29393a087c933d7caea010c98f4d2876"
              }
          ]
      },
      {
          "_id": "634190ccb74e1f5f2ec1a37b",
          "name": "Iphone14",
          "images": [
              {
                  "url": "images/2b2b08dfca28972c19f3f901c68966af"
              }
          ]
      }
  ]
}
const origUrl = 'http://shop-roles.node.ed.asmer.org.ua/'

const GoodCard = ({good}) => {
  const [indexArr, setindexArr] = useState(0)
  return <div>
    {good.name}<br/>
    <img  
    onClick={()=>indexArr=== good.images.length-1?setindexArr(0) :setindexArr(indexArr+1)}/////////////
    src={origUrl+good.images[indexArr].url}/>
  </div>
}

const OneCat = ({cat=oneCat}) => 
<div>
  <h1>{cat.name}</h1>
  <div>{cat.goods.map(el=><GoodCard good={el}/>)}</div>
</div>


///////////////Timer
const Timer = ({countSeconds}) => {
  const [time, setTime] = useState(countSeconds)
  const [startTimer, setStartTimer] = useState(false)
  const [timerId, setTimerId] = useState(0)
  useEffect(() => {
    let intervalId = null
    if(startTimer){
      intervalId = setInterval(() => setTime(count => count -1), 1000)
      setTimerId(intervalId)
    }else{
      clearInterval(timerId)
    }
  },[startTimer])

  useEffect(() => {
    if(time===0){
      clearInterval(timerId)
    }
  },[time===0])

  let hours = Math.floor(time/60/60)
  let minutes = Math.floor(time/60)-(hours*60)
  let sec = time % 60
  return (
  <>
      <div>{hours}:{minutes}:{sec}</div>
      <button onClick={()=>setStartTimer(true) }>Start</button>
      <button onClick={()=>setStartTimer(false) }>Stop</button>
  </>
  )
}

const TimerControl = ()=>{
  const [hours, setHours] = useState('')
  const [minutes, setMinutes] = useState('')
  const [seconds, setSeconds] = useState('')
  const [start, setStart] = useState(false)

  return (
    <>
        <input
        className="inputTime"
        value={hours} 
        onChange={e => setHours(e.target.value)} 
        type="number" 
        placeholder='hours'></input>
        <input
        className="inputTime"
        value={minutes} 
        onChange={e => setMinutes(e.target.value)} 
        type="number" 
        placeholder='minutes'></input>
        <input
        className="inputTime"
        value={seconds} 
        onChange={e => setSeconds(e.target.value)} 
        type="number"
        placeholder='seconds'></input><br/>
        <button onClick={() => setStart(!start)}>Set time</button>
        {start && <Timer countSeconds={hours*60*6 + minutes*6 + seconds}/>}
    </>
    )
}


const TimerContainer = ({seconds, refresh, render}) => {
  const [sec, setSec] = useState(seconds);
  useEffect(() => {
      if(sec > 0){
          const intervalId = setInterval(()=>{setSec(sec=> sec-1)},refresh)
          return () => {
              clearInterval(intervalId);
          }
      }
  },[sec]);
  const Render = render;
  return (<Render seconds={sec} />)
}
const SecondsTimer = ({seconds}) => <h2>{seconds}</h2>








function App() {
  return (
    <div className="App">
      <TimerContainer seconds={1800} refresh={1000} render={Watch}/>
      <TimerContainer seconds={1800} refresh={100} render={SecondsTimer}/>
      <TimerControl/>
      

        <Spoiler header={<h1>Заголовок</h1>} open>
          Контент 1
          <p>
              лорем ипсум траливали и тп.
          </p>
        </Spoiler>
        <Spoiler>
          <h2>Контент 2</h2>
          <p>
              лорем ипсум траливали и тп.
          </p>
        </Spoiler>
        <div>Задание RangeInput</div>
        <RangeInput min={2} max={10} />
        <div>Задание LoginForm</div>
        <LoginForm onLogin={({login, password}) => console.log('ЛОГИН И ПАРОЛЬ', login, password)}/>
        <div>Задание PasswordConfirm </div>
        <PasswordConfirm min={6} />
        <OneCat/>
        
    </div>
  );
}

export default App;