import userEvent from '@testing-library/user-event'
import React, { Component, useState, useRef, useEffect } 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 Timer = ({sec}) => {
  var h = Math.floor(sec / 3600);
  var m = Math.floor(sec % 3600 / 60);
  var s = Math.floor(sec % 3600 % 60);
  const [count,  changeCount] = useState(`${h}: ${m}: ${s}`);
  const [lock, closer] = useState(true);

  const [onOff, turning] = useState(false);

  const countRef = useRef(onOff);


  return (
    <>
      <h3>Timer {count}</h3>

        <button onClick = {() =>  {

          turning(!onOff);
          countRef.current = onOff;
      
          lock && (() => {
             setInterval((() => {
                if(sec && countRef.current == false) {
                  sec -=1;
                  h = Math.floor(sec / 3600);
                  m = Math.floor(sec % 3600 / 60);
                  s = Math.floor(sec % 3600 % 60);
                  changeCount(`${h}: ${m}: ${s}`);
                } else {
                  return
                }
             }), 1000);
          })();

          closer(false);
          
        }}>Start/pause</button>
    </>
  )
}


const TimerControl = ({}) => {
  const [hours, setHours] = useState("1");
  const [minutes, setMinutes] = useState("1");
  const [sec, setSec] = useState("1");
  const [buttOn, turnOnOff] = useState(true);
  const [countDownSown, show] = useState(false);

  const checkNumbers = (newVal, confirmVal) => {
    return (confirmVal.includes(".") || newVal.includes(".") || newVal < 0  || +confirmVal < 0 || +newVal > 60  || +confirmVal > 60) ? turnOnOff(false) : turnOnOff(true);
  }
  

  return (
    <>
    <h3>Timer Control</h3>
    <div>
      <input type = "number" id = "hours" value = {hours}  onChange={(e) => {
        setHours(e.target.value)}}/>
      <input type = "number" id = "minutes" value = {minutes} style = {{backgroundColor: (minutes < 0) || (minutes > 59) || minutes.includes(".")  ? 'red' : 'white' }} onChange={(e) => {
        setMinutes(e.target.value);
        checkNumbers(e.target.value, sec)}}/>
      <input type = "number" id = "sec" value = {sec} style = {{backgroundColor: (sec < 0) || (sec > 59) || (sec.includes(".")) ? 'red' : 'white' }} onChange={(e) => {
        setSec(e.target.value);
        checkNumbers(e.target.value, minutes)}}/>

        <button disabled={!buttOn}  onClick={ () => show(true) }>Start/pause</button>
        <div id = "timer">
          { countDownSown && <Timer sec={((+hours * 60 * 60) + (+minutes * 60) + +sec)} /> }
        </div>
      </div>


      
    </>
    
  )
}


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

const TimerContainer = ({seconds, refresh, render}) => {
const Render = render;
const [count, setCount] = useState(300);



useEffect(() => {
  var firstState = Date.now()
  var secCounter;

  var interval = setInterval(() => {

    secCounter = seconds - (Math.floor((Date.now()/1000) - firstState/1000));
    
    setCount(secCounter);

    if (secCounter < 0) {
      setCount(0)
      return clearInterval(interval)
    }

  }, refresh);

}, []);


  return (
    <>
    <Render seconds = {count}/>
    </>
  )
}

const Timer2 = ({seconds}) => {
  var h = Math.floor(seconds / 3600);
  var m = Math.floor(seconds % 3600 / 60);
  var s = Math.floor(seconds % 3600 % 60);




  return (
    <>
      <h3>Timer {`${h}: ${m}: ${s}`}</h3>

        <button onClick = {() =>  {

          
          
        }}>Start/pause</button>
    </>
  )
}

const Watches = ({seconds}) => {

  var h = Math.floor(seconds / 3600) * 30;
  var m = Math.floor(seconds % 3600 / 60) * (360 / 60);
  var s = Math.floor(seconds % 3600 % 60) * (360 / 60);

  return (
    <>
      <div id = "container" style = {{position: "relative"}}>
        <img id = "clock" src = "http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace.png" style = {{position: "absolute", zIndex :"0"}}/>
        <img id = "hours" src = "http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace_H.png" style = {{position: "absolute", zIndex :"1", transform: `rotate(${h}deg)`}}/>
        <img id = "minutes" src = "http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace_M.png" style = {{position: "absolute", zIndex :"2", transform: `rotate(${m}deg)`}}/>
        <img id = "secunds" src = "http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace_S.png"style = {{position: "absolute", zIndex :"3", transform: `rotate(${s}deg)`}}/>
      </div>
    </>
  )
}



const TimerContainerControl = ({refresh, render}) => {
  const [hours, setHours] = useState("1");
  const [minutes, setMinutes] = useState("1");
  const [sec, setSec] = useState("1");
  const [buttOn, turnOnOff] = useState(true);
  const [countDownSown, show] = useState(false);
  const [msc, letsCount] = useState("0");
  const Render = render;


  const checkNumbers = (newVal, confirmVal) => {
    return (confirmVal.includes(".") || newVal.includes(".") || newVal < 0  || +confirmVal < 0 || +newVal > 60  || +confirmVal > 60) ? turnOnOff(false) : turnOnOff(true);
  }
  
  useEffect(() => {
    if (!countDownSown) {
      return clearInterval(interval)

    }
    var firstState = Date.now()
    var secCounter;
  
    var interval = setInterval(() => {
      
      secCounter =  msc + (Math.floor((Date.now()/1000) - firstState/1000));
      letsCount(secCounter);

      
    }, refresh);
  
  }, [countDownSown]);

  return (
    <>
    <h3>Timer Control</h3>
    <div>
      <input type = "number" id = "hours" value = {hours}  onChange={(e) => {
        setHours(e.target.value)}}/>
      <input type = "number" id = "minutes" value = {minutes} style = {{backgroundColor: (minutes < 0) || (minutes > 59) || minutes.includes(".")  ? 'red' : 'white' }} onChange={(e) => {
        setMinutes(e.target.value);
        checkNumbers(e.target.value, sec)}}/>
      <input type = "number" id = "sec" value = {sec} style = {{backgroundColor: (sec < 0) || (sec > 59) || (sec.includes(".")) ? 'red' : 'white' }} onChange={(e) => {
        setSec(e.target.value);
        checkNumbers(e.target.value, minutes)}}/>

        <button disabled={!buttOn}  onClick={ () => {
          show(true);
          letsCount(((+hours * 60 * 60) + (+minutes * 60) + +sec))
        }}>Start/pause</button>
        <div id = "timer">
          { countDownSown && <Render seconds={msc} /> }
        </div>
      </div>


      
    </>
    
  )
}

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>


      <div id = "timerControl">
        <TimerControl/>
      </div>


      <div id = "timerContainer">
        <h3>Timer Container</h3>
        <TimerContainer seconds={1800} refresh={100} render={SecondsTimer}/>
      </div>


      <div id = "LSD">
        <h3>LSD</h3>
        <TimerContainer seconds={300} refresh={100} render={Timer2}/>
      </div>

      <div id = "Watches">
        <h3>Watches + containerControl</h3>
        <TimerContainerControl refresh={100} render={Watches}/>
      </div>
    </>


  );
}




export default App;