import './App.css';
import { clear } from '@testing-library/user-event/dist/clear';
import React, {useState, useEffect} from 'react';
import watch from "./img/ClockFace.png";
import hourArrow from "./img/ClockFace_H.png";
import minuteArrow from "./img/ClockFace_M.png";
import secondArrow from "./img/ClockFace_S.png";



// Spoiler
const Spoiler = ({header="+", open=true, children}) => {
  const [isOpen, setOpen] = useState(open)
  return <>
    <button onClick={() => setOpen(!isOpen)}>{header}</button>
    {!isOpen &&  children}
  </>
}

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

// PasswordConfirm
const PasswordConfirm = ({min}) => {
  const [pswd, setPswd] = useState("")
  const [pswd2, setPswd2] = useState("")

  return <>
  <h3>password:</h3>
  <input type='password'
        style={ {color: pswd.length <= min ? 'red' : 'black'}}
        onChange={(e) => setPswd(e.target.value)} />

  <h3>repeat password:</h3>
  <input type = 'password'
        style={ {color: pswd !== pswd2 ? 'red' : 'black'}}
        onChange={(e) => setPswd2(e.target.value)} />
  </>
}

//Timer
const Timer = ({seconds}) => {
  const [sec, setSec] = useState(seconds)
  let [pause, setPause] = useState(false)

  let hours = Math.floor(sec / (60 * 60))
  let minuts = Math.floor(sec % (60 * 60) / 60)
  let second = sec % 60

  let interval

  useEffect(() => {
    if (sec <= 0) {
    setPause(true)
    } 
    if (!pause) {
      interval = setInterval(() => {
        setSec(sec => sec - 1)
      }, 1000);
    }
    return () => {
      clearInterval(interval)
    }
  }, [pause, sec])

  return (
    <div>
      <h3>Timer</h3>
      <span>{hours}</span> : <span>{minuts}</span> : <span>{second} </span>
      <button onClick={() => { setPause(!pause) }}>{pause ? 'start' : 'stop'}</button>
    </div>
  )
}

//TimerControl
const TimerControl = () => {
  const [hours, setHours] = useState(0)
  const [minutes, setMinutes] = useState(0)
  const [seconds, setSeconds] = useState(0)
  const [arr, setArr] = useState([])
  let sec = hours * 3600 + minutes * 60 + seconds;


return (
  <>
    <h3>Timer Control</h3>
    <input placeholder='hours'type='number' min='0' value={hours} onChange={(e) => setHours(+e.target.value)} />
    <input placeholder='minutes' type='number' min='0' value={minutes} onChange={(e) => setMinutes(+e.target.value)} />
    <input placeholder='seconds' type='number' min='0' value={seconds} onChange={(e) => setSeconds(+e.target.value)} />

    {arr.map(item=> (<Timer key={item} seconds={sec} />))}
    <button onClick={()=>{setArr([Math.random()]) }}>Start</button>
  </>
)
}

//TimerContainer
const SecondsTimer = ({seconds}) => <h2>{seconds}</h2>

const TimerContainer = ({seconds = 1000, refresh, render:Render}) => {
  const [time, setTime] = useState(seconds)
  const [pause, setPause] = useState(false)

  let interval

  useEffect(() => {
    let timeBefore = Math.floor(performance.now())
    interval = setInterval(() => {
      let timeAfter = Math.floor(performance.now())
      !pause && time > 0 ? setTime((seconds - (timeAfter - timeBefore) / 1000)) : setTime(time)
    }, refresh)
    
    return() => {
      clearInterval(interval)
    }
  }, [pause, refresh, seconds])

  return (
    <>
      <h3>Timer Container</h3>
      <div>
        <Render seconds={time} />
        <button onClick={() => {setPause(!pause)}}>{!pause ? 'Stop' : 'Start'}</button>
      </div>
    </>
  )
}

//LCD
const LCD = ({seconds}) => {
  let hours = Math.floor(seconds / 60 / 60)
  let minutes = Math.floor((seconds % 3600) / 60)
  let sec = seconds % 60
  
  return (
    <>
    <div>
      <span>{hours}</span> : <span>{minutes}</span> : <span>{sec.toFixed(2)} </span>
    </div>
    </>
  )
}

//Watch
const Watch = ({seconds}) => {
  let hours = Math.floor(seconds / 60 / 60)
  let minutes = Math.floor((seconds % 3600) / 60)
  let second = seconds % 60

  return (
    <>
    <h3>Watch</h3>
      <div className='Watch'>
        <img 
        className='Clock'
        src={watch} 
        alt="Watch" />

        <img
        className="Arrows"
        style={{ transform: `rotate(${(360 / 12) * hours}deg)` }}
        src={hourArrow}
        alt="Hours"
        />

        <img
        className="Arrows"
        style={{ transform: `rotate(${(360 / 12 /5) * minutes}deg)` }}
        src={minuteArrow}
        alt="Minutes"
        />

        <img
        className="Arrows"
        style={{ transform: `rotate(${(360 / 12 /5) * second}deg)` }}
        src={secondArrow}
        alt="Seconds"
        />
      </div>
    </>
  )
}

const TimerContainerWatch = ({seconds = 1000, refresh, render:Render}) => {
  const [time, setTime] = useState(seconds)
  const [pause, setPause] = useState(false)

  let interval

  useEffect(() => {
    let timeBefore = Math.floor(performance.now())
    interval = setInterval(() => {
      let timeAfter = Math.floor(performance.now())
      !pause && time > 0 ? setTime((seconds - (timeAfter - timeBefore) / 1000)) : setTime(time)
    }, refresh)
    
    return() => {
      clearInterval(interval)
    }
  }, [pause, refresh, seconds])

  return (
    <>
      <div>
        <Render seconds={time} />
      </div>
    </>
  )
}


function App() {
  return (
    <div className="App">
    <div>Spoiler:</div>
      <Spoiler header={<h1>Заголовок</h1>} open>
        Контент 1
        <p>
          лорем ипсум траливали и тп.
        </p>
      </Spoiler>
      <div>Spoiler 2:</div>
      <Spoiler>
        <h2>Контент 2</h2>
        <p>
          лорем ипсум траливали и тп.
        </p>
      </Spoiler>

      <div>Check input length:</div>
      <RangeInput min={2} max={10}/>

      <PasswordConfirm min={2} />

      <Timer seconds={10000} />

      <TimerControl />

      <TimerContainer seconds={1800} refresh={100} render={LCD} />
    
      {/* <Watch sec={1800}/> */}

      <TimerContainerWatch seconds={1800} refresh={1000} render={Watch} />
    </div>
  );
}

export default App;