import React from 'react';

class Spoiler extends React.Component {
  constructor(props) {
    super(props)
    this.state = { open: "true" };
    this.press = this.press.bind(this);
  }

  spoilerHide() {
    if (this.state.open === "true") {
      return <div>{this.props.children}</div>
    } else {
      return <div></div>
    }
  }

  press() {
    let stateChange = (this.state.open === "true") ? "false" : "true"
    this.setState({
      open: stateChange
    });
  }

  render() {
    return (
      <>
        <div onClick={this.press}>{this.props.header}</div>
        <div>{this.spoilerHide()}</div>
      </>
    );
  }
}


//

class RangeInput extends React.Component {
  constructor(props) {
    super(props)
    this.state = { text: "" }
  }

  render() {
    return (
      <input value={this.state.text} onChange={(e) => {
        (e.target.value.length < this.props.min + 1 || e.target.value.length > this.props.max - 1) ? (e.target.style.backgroundColor = "red")
          : (e.target.style.backgroundColor = "white")
        this.setState({ text: e.target.value })
      }} />
    )
  }
}

//

class PasswordConfirm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      password: "",
      passwordConfirmed: ""
    }
  }

  render() {
    return (
      <>
        <form>
          <input placeholder="enter password..." type='password' value={this.state.password} onChange={(e) => {
            this.setState({ password: e.target.value })
          }} />
          <input placeholder="enter password again..." type='password' value={this.state.passwordConfirmed} onChange={(e) => {
            this.setState({ passwordConfirmed: e.target.value })
          }} />
          <button disabled={!(this.state.password.length > this.props.min && this.state.password === this.state.passwordConfirmed)}>submit</button>
        </form>
      </>
    )
  }
}

//

class Timer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      time: {},
      sec: this.props.sec,
      pause: "false"
    }

    this.pause = this.pause.bind(this);
  }

  secondsToTime(secs) {
    let hours = Math.floor(secs / (60 * 60))

    let divisor_for_minutes = secs % (60 * 60);
    let minutes = Math.floor(divisor_for_minutes / 60);

    let divisor_for_seconds = divisor_for_minutes % 60;
    let seconds = Math.ceil(divisor_for_seconds);

    let obj = {
      "h": hours,
      "m": minutes,
      "s": seconds
    };
    return obj;

  }

  pause() {
    let statePause = (this.state.pause === "true") ? "false" : "true"
    this.setState({
      pause: statePause
    });
  }

  tick() {
    if (this.state.pause === "false") {
      this.setState({
        sec: this.state.sec - 1,
        time: this.secondsToTime(this.state.sec - 1)
      });
    } else {
      this.setState({
        sec: this.state.sec,
        time: this.secondsToTime(this.state.sec)
      });
    }
  }


  componentDidMount() {
    let timeLeftVar = this.secondsToTime(this.state.seconds);
    this.setState({ time: timeLeftVar });
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );

  }

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

  render() {
    return (
      <>
        <div>Hrs: {this.state.time.h} min: {this.state.time.m} sec: {this.state.time.s}</div>
        <button onClick={this.pause}>pause/start</button>
      </>
    )
  }
}

//

// class TimerControl extends React.Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       hours: 0,
//       minutes: 0,
//       sec: 100,

//       pause: "false"
//     }

//     debugger;
//     this.pause = this.pause.bind(this);
//   }

//   secondsToTime(secs) {
//   debugger
//     if (this.state.sec != 0) {
//       let hoursCalc = Math.floor(secs / (60 * 60))

//       let divisor_for_minutes = secs % (60 * 60);
//       let minutesCalc = Math.floor(divisor_for_minutes / 60);

//       let divisor_for_seconds = divisor_for_minutes % 60;
//       let secondsCalc = Math.ceil(divisor_for_seconds);

//       this.setState({
//         hours: hoursCalc,
//         minutes: minutesCalc,
//         sec: secondsCalc,
//       });
//     } else {
//     }
//   }
//   //

//   // hoursToTime(hours) {

//   //   let hoursCalc = hours
//   //   let secondsCalc = Math.floor(hours * 3600)
//   //   let minutesCalc = Math.floor(hours * 60)

//   //   //let divisor_for_seconds = divisor_for_minutes % 60;
//   //   // let divisor_for_minutes = hours % (60 * 60);
//   //   // let minutesCalc = Math.floor(divisor_for_minutes / 60);    
//   //   // let secondsCalc = Math.ceil(divisor_for_seconds);
//   //   this.setState({
//   //     hours: hoursCalc,
//   //     minutes: minutesCalc,
//   //     sec: secondsCalc,
//   //   });
//   // }

//   pause() {
//     let statePause = (this.state.pause === "true") ? "false" : "true"
//     this.setState({
//       pause: statePause
//     });
//   }

//   tick() {
//     if (this.state.pause === "false") {
//       this.setState({
//         // hours: this.state.hours,
//         // minutes: this.state.minutes,
//         sec: this.secondsToTime(this.state.sec - 1)
//       });
//     } else {
//       this.setState({
//         // hours: this.state.hours,
//         // minutes: this.state.minutes,
//         sec: this.state.sec
//       });
//     }
//   }


//   componentDidMount() {
//     debugger;
//     let timeLeftVar = this.secondsToTime(this.state.sec);
//     this.setState({ sec: timeLeftVar });
//     this.timerID = setInterval(
//       () => this.tick(),
//       1000
//     );

//   }

//   componentWillUnmount() {
//     clearInterval(this.timerID);
//   }

//   render() {
//     return (
//       <>
//         <div>
//           <form>
//             <input type="number" placeholder="h"  onChange={(e) => {
//               this.setState({ hours: e.target.value })
//             }} />
//             <input type="number" placeholder="m"  onChange={(e) => {
//               this.setState({ minutes: e.target.value })
//             }} />
//             <input type="number" placeholder="s"  onChange={(e) => {
//               this.setState({ sec: e.target.value })
//             }} />
//           </form>
//         </div>
//         <div>
//           <div>Hrs: {this.state.hours} min: {this.state.minutes} sec: {this.state.sec}</div>
//           <button onClick={this.pause}>pause/start</button>
//         </div>


//       </>
//     )
//   }
// }

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

    <RangeInput min={2} max={10} />

    <PasswordConfirm min={2} />

    <Timer sec={3606} />
</>
  )
}

export default App;