import logo from './logo.svg';
import ClockFace from './assets/ClockFace.png'
import ClockSec from './assets/ClockFace_S.png'
import ClockMin from './assets/ClockFace_M.png'
import ClockHour from './assets/ClockFace_H.png'
import './App.css';
import { useEffect, useRef, useState } from 'react';

const Spoiler = ({ header = "+", open = true, children }) => {
  let [isOpen = open, setOpen] = useState()
  return (
    <>
      <header onClick={() => setOpen(!isOpen)}>{header}</header>
      <div style={{ visibility: isOpen ? 'visible' : 'hidden' }}>
        {children}
      </div>
    </>
  )
}

const RangeInput = ({ min = 1, max = 10, type = 'text' }) => {
  let [valueLen, setValue] = useState()
  return (
    <div>
      <input
        type={type}
        style={{ outlineColor: valueLen < min || valueLen > max ? 'red' : 'black' }}
        onChange={(e) => setValue(e.target.value.length)}
      />
    </div>
  )
}

const PasswordConfirm = ({ min = 8 }) => {
  let [pass = '', setPass] = useState()
  let [passRepeat, setPassReapeat] = useState()

  return (
    <div style={{ border: '1px solid black', backgroundColor: 'whitesmoke', width: 'fit-content' }}>
      <input
        type='password'
        style={{
          display: 'block',
          borderColor: pass === passRepeat &&
            pass.length >= min && /[0-9]/.test(pass) && !/[\s]/.test(pass) ? 'mediumseagreen' : 'red'
        }}
        placeholder='password'
        onChange={(e) => setPass(e.target.value)}
      />
      <br />
      <input
        type='password'
        style={{
          display: 'block',
          borderColor: pass === passRepeat ? 'mediumseagreen' : 'red',
          visibility: pass.length >= min &&
            /[0-9]/.test(pass) && !/[\s]/.test(pass) ? 'visible' : 'hidden'
        }}
        placeholder='repeat password'
        onChange={(e) => setPassReapeat(e.target.value)}
      />
    </div>
  )
}

const Timer = ({ seconds = 10 }) => {
  let [isPause, setIsPause] = useState(false);
  let [time = seconds, setTime] = useState(seconds)
  useEffect(() => {
    const interval = setInterval(() => {
      if (!isPause) {
        time > 0 ? setTime(time - 1) : clearInterval(interval)
      } else {
        clearInterval(interval)
      }
    }, 1000)
    return () => { clearInterval(interval) }
  }, [time, isPause])

  return (
    <>
      <strong>
        {Math.floor((time / (60 * 60)) % 24)} :
        {Math.floor((time / 60) % 60)} :
        {Math.floor(time % 60)}
      </strong>
      &nbsp;
      <button onClick={() => setIsPause(!isPause)}>{isPause ? 'Start' : 'Pause'}</button>
    </>
  )
}

const LCD = ({ seconds = 10 }) =>
  <strong>
    {Math.floor(((seconds / (60 * 60)) % 24))} :
    {Math.floor(((seconds / 60)) % 60)} :
    {Math.floor(seconds % 60)}
  </strong>

const Watch = ({ seconds = 1000 }) =>
  <div style={{ width: 'fit-content' }}>
    <img src={ClockFace} style={{ width: 'inherit', position: 'absolute' }} alt='img' />
    <img src={ClockSec} style={{
      width: 'inherit', position: 'absolute',
      transform: `rotate(${seconds % 60 * 6}deg)`
    }} alt='img' />
    <img src={ClockMin} style={{
      width: 'inherit', position: 'absolute',
      transform: `rotate(${(seconds / 60) % 60 * 6}deg)`
    }} alt='img' />
    <img src={ClockHour} style={{
      width: 'inherit', position: 'absolute',
      transform: `rotate(${((seconds) / (60 * 60)) % 24 * 30}deg)`
    }} alt='img' />
  </div>


const SecondsTimer = ({ seconds }) => <h2>{seconds.toFixed(2)}</h2>

const TimerControl = ({ hour = 0, minute = 0, second = 0 }) => {
  let [hr, setHr] = useState(hour)
  let [min, setMin] = useState(minute)
  let [sec, setSec] = useState(second)
  let [active = false, setActive] = useState()

  return (
    <span>
      <input
        type="number"
        min="0"
        max="30"
        placeholder='hr'
        value={hr}
        onChange={(e) => setHr(+e.target.value < 0 || +e.target.value > +e.target.max ? 0 : +e.target.value)}
      />:
      <input
        type="number"
        min="0"
        max="59"
        placeholder='min'
        value={min}
        onChange={(e) => setMin(+e.target.value > 59 || e.target.value < 0 ? 0 : +e.target.value)}
      />:
      <input
        type="number"
        min="0"
        max="59"
        placeholder='sec'
        value={sec}
        onChange={(e) => setSec(+e.target.value > 59 || e.target.value < 0 ? 0 : +e.target.value)}
      />

      {active ? <button onClick={() => setActive(false)}>Stop</button> :
        <button onClick={() => setActive(true)}>Start</button>}
      <br />
      {active ? <Timer seconds={hr * 60 * 60 + min * 60 + sec} /> : ''}
    </span>
  )
}

const TimerContainer = ({ seconds = 0, refresh = 10, render: Component }) => {
  let [time, setTime] = useState(seconds * 1000)
  let [isPause, setIsPause] = useState(false)

  useEffect(() => {
    setTime(seconds * 1000)
  }, [seconds])

  useEffect(() => {
    let interval = null
    let now = performance.now()
    if (time > 0) {
      interval = setInterval(() => {
        if (!isPause) {
          time > 0 ? setTime(time => time - (performance.now() - now)) : clearInterval(interval)
        } else {
          clearInterval(interval)
        }
      }, refresh)
    }
    return () => { clearInterval(interval) }
  })

  return (
    <div>
      <Component seconds={time > 0 ? time / 1000 : 0} />
      <button onClick={() => setIsPause(!isPause)}>{isPause ? 'Start' : 'Pause'}</button>
    </div>
  )
}

const TimerControlContainer = ({ hour = 0, minute = 0, second = 0, render: Component, refresh = 10 }) => {
  let [hr, setHr] = useState(hour)
  let [min, setMin] = useState(minute)
  let [sec, setSec] = useState(second)

  let [active, setActive] = useState(false)
  let [returned, setReturned] = useState(null)

  return (
    <div>
      <span>
        <input
          type="number"
          min="0"
          max="30"
          placeholder='hr'
          value={hr}
          onChange={(e) => setHr(+e.target.value < 0 || +e.target.value > +e.target.max ? 0 : +e.target.value)}
        />:
        <input
          type="number"
          min="0"
          max="59"
          placeholder='min'
          value={min}
          onChange={(e) => setMin(+e.target.value > 59 || e.target.value < 0 ? 0 : +e.target.value)}
        />:
        <input
          type="number"
          min="0"
          max="59"
          placeholder='sec'
          value={sec}
          onChange={(e) => setSec(+e.target.value > 59 || e.target.value < 0 ? 0 : +e.target.value)}
        />

        {!active ? <button disabled={!hr && !min && !sec} onClick={() => { setReturned(hr * 60 * 60 + min * 60 + sec); setActive(true) }}>Start</button> :
          <button onClick={() => { setReturned(null); setActive(false) }}>Stop</button>}
        <br />
      </span>
      {returned ? <TimerContainer seconds={returned} render={Component} refresh={refresh} /> :
        <TimerContainer seconds={0} render={Component} refresh={refresh} />}
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Spoiler header={<h1>Заголовок(клацать сюда)</h1>} open>
        Контент 1
        <p>
          лорем ипсум траливали и тп.
        </p>
        <img alt="img" src={logo} width="200" heigt="200" />
        <h3>Range Input</h3>
        <RangeInput min={2} />
      </Spoiler>
      <br />

      <h3>Password Confirm</h3>
      <PasswordConfirm />

      <h3>Timer</h3>
      <Timer seconds={10} />

      <h3>Timer Control</h3>
      <TimerControl second={10} />

      <h3>Timer Container</h3>
      <TimerContainer render={SecondsTimer} seconds={200} />
      <TimerContainer render={SecondsTimer} seconds={10} refresh={10} />
      <TimerContainer render={LCD} seconds={1800} />

      <h3>Watch</h3>
      <TimerContainer render={LCD} seconds={7200} />

      <h3>Timer Control Container</h3>
      <TimerControlContainer render={Watch} />
    </div>
  );
}

export default App;
