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



const Input = () => {
  const [text, setText] = useState('text');
  return <div>
    <h1>{text}</h1>
    <input value={text} onChange={e => setText(e.target.value)} />
  </div>
  
}
const LoginForm = ({onLogin}) => {
  const [login, setLogin] = useState('');
  const [pswd, setPswd] = useState('');

  return <div>
      <input value={login} onChange={e => setLogin(e.target.value)}/> 
      <input value={pswd} onChange={e => setPswd(e.target.value)}/>
      <button disabled={login.length<3 || pswd.length<8 ? true:""} onClick={() => onLogin(login,pswd)}>Login</button>   
  </div>
}

const Counter = ({ms=1000}) => {
  const [counter, setCounter] = useState(0)
  useEffect(() => {
   const interval = setInterval (() => setCounter(counter => counter+1), ms)
    return () => {
      console.log('DID UNMOUNT')
      clearInterval(interval)
    }
  }, [ms])
  /* setInterval (() => setCounter(counter+1), 1000) */
  return (
    <div>{counter}</div>
  )
}
const Spoiler = ({header="+",children, opened=true}) => {
  const [open, setOpen] = useState(opened)
  return (
    <div>
        <div onClick={()=>setOpen(!open)}>{header}</div>
        {open && children}
    </div>
  )
}

const Counters = () => {
  const [cntrs, setCntrs] = useState([])
  const [ms, setMs] = useState(1000)
  return (
    <div>
      <button onClick={() => setMs(ms+100)}>+</button>
      <button onClick={() => setMs(ms-100)}>-</button>
      {cntrs.map(() => <Counter/>)}
      <button onClick={() => setCntrs([...cntrs, cntrs.length])}>Add</button>
    </div>
  )
}

const RangeInput = ({min,max}) => {
  const [value, SetValue] = useState(0);
  let color = "white";
  
  /* useEffect(() => {
    if(value < min || value > max){
        color = "red";
        console.log(color);
    } else {
      color = '';
    }
  }, [value]) */
  if(value < min || value > max) {
    color = "red"
    
  } else {
    color = "";
  }
  return (
    <input onChange={e => SetValue(e.target.value.length)} style={{backgroundColor:color}}/>
  )
}

const PasswordConfirm = ({min}) => {

    const[value1,SetValue1] = useState('');
    const[value2,SetValue2] = useState('');
    let color = "";
    let pattern = /^[0-9a-zA-Z]+$/;
    if(value1.length > min && value2.length > min && value1.match(pattern) && value2.match(pattern) && value1 === value2)  {
      color="green"
    } else {
      color="red";
    }

    return(
      <div>
        <input type="password" onChange={e => SetValue1(e.target.value)} style={{borderColor:color}}/>
        <input type="password" onChange={e => SetValue2(e.target.value)} style={{borderColor:color}}/>
      </div>
    )
}

class Timer extends React.Component {
     
    constructor(props) {
      super(props)
      this.state = {seconds: 0,
                    minutes:0,
                    hour:0,
                    propsTime: props.time
                    }
      this.Pause = this.Pause.bind(this);
      this.tick = this.tick.bind(this);
    }
 
   static getDerivedStateFromProps(props, state){
     console.log('get derived state');
     return /* ({propsTime: props.time})   */ null
   }
    
    componentDidMount() {
      this.timerID = setInterval(this.tick,1000)
    }

    Pause() {
      clearInterval(this.timerID);
    }
    

    tick() {
      let t = this.state.propsTime -1
      let hours = Math.floor(t/3600);
      let minutes = Math.floor((t - hours*3600)/60);
      let seconds = Math.floor(t - hours*3600-minutes*60)
      this.setState({
        seconds,minutes,hours, propsTime: t
      })
      /* this.setState({
        seconds: this.state.seconds - 1
      }) */
      /* console.log(t); */
      if (t <= 0){
        clearInterval(this.timerID)
      }
    }
    

  render() {
    const {seconds, minutes, hours} = this.state
    return(
      <div>
        <h1>TIMER</h1>
        <span>hours :{hours} </span>
        <span>minutes: {minutes} </span>
        <span>seconds: {seconds}</span>
        <button onClick={this.Pause}>Pause</button>
      </div>
    )
  }
}


class TimerControl extends React.Component {
    constructor(props){
      super(props)
      this.state = {hours:0,
                    minutes:0,
                    seconds:0,
                    toSeconds:0,
                    addTimer: false}
      this.handlerHours = this.handlerHours.bind(this);
      this.handlerMinutes = this.handlerMinutes.bind(this);
      this.handlerSeconds = this.handlerSeconds.bind(this);
      this.handleAddTimer = this.handleAddTimer.bind(this);
    }

    handlerHours(e){

      let hourToSeconds = +e*3600
      console.log(hourToSeconds);
      this.setState({hours: hourToSeconds})

    }
    handlerMinutes(e){
      let minuteToSeconds = +e*60
      console.log(minuteToSeconds);
      this.setState({minutes: minuteToSeconds})
    }

    handlerSeconds(e){
      console.log(+e);
      this.setState({seconds: +e})
    }
    handleAddTimer() {
      let allTime = this.state.hours + this.state.minutes + this.state.seconds
      this.setState({addTimer:!this.state.addTimer, toSeconds: allTime})
    }

    render() {
      return(
        <div>
          <label>hours <input type="number" max="24" min="0" onChange={e => this.handlerHours(e.target.value)}/></label>
          <label>minutes <input type="number" max="60" min="0" onChange={e => this.handlerMinutes(e.target.value)}/></label>
          <label>seconds <input type="number" max="60" min="0" onChange={e => this.handlerSeconds(e.target.value)}/></label>
          <button onClick={this.handleAddTimer}>Start</button>
          {this.state.addTimer && <Timer time={this.state.toSeconds}/>}
        </div>
      )
    }
}

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

class TimerContainer extends React.Component {
  constructor(props){
    super(props)
    this.state = {
          secToEnd:0,
          seconds: this.props.seconds,
          refresh: this.props.refresh
    }
    this.tick = this.tick.bind(this);
  }
  
  componentDidMount() {
    this.timerID = setInterval(this.tick, this.state.refresh)
  }
  tick() {
      let startTime = performance.now();

      this.setState({seconds: this.state.seconds - ((performance.now() - startTime)/1000)})
      
      /* let setSec = this.state.seconds - Math.floor((performance.now() - startTime)/1000);
      console.log(setSec); */
      
  }
  render(){
    const Render = this.props.render
    return(
      <div>
          <Render seconds={this.state.seconds}/>
      </div>
    )
  }
}

function App () {
  return(
    <div className='App'>
      {/* <Input/> */}
      {/* <LoginForm onLogin={(login, password) => console.log(login,password)}/> */}
      <Spoiler header={<h1>Hello</h1>} opened={false}>
        <h1>Hello</h1>
        <p>blabla</p>
      </Spoiler>
      <RangeInput min={2} max={10}/>
      <PasswordConfirm min={2}/>
      <TimerControl/>
      <Timer time={10000}/>
      <TimerContainer seconds={1800} refresh={100} render={SecondsTimer}/>
    </div>
  );
}
export default App;