import logo from './logo.svg';
import './App.css';
import {useEffect, useState} from "react";

function App() {
  return (
    <div className="App">
      <div><h1>Заголовок</h1></div>

      <Spoiler>
          <h2>Контент 1</h2>
          <p> Лорем ипсум траливали и тп. </p>
      </Spoiler>
      <Spoiler>
          <h2>Контент 2</h2>
          <p>лорем ипсум траливали и тп.</p>
      </Spoiler>

      <Spoiler>
          <h2>Контент 3</h2>
          <p>лорем ипсум траливали и тп.</p>
      </Spoiler>

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

      <LoginForm onLogin={({login, password}) => console.log('ЛОГИН И ПАРОЛЬ', login, password)}/>

      <PasswordConfirm min={2} />

      <TimerLessons />

     <Timer sec={500}/>

     <TimerControl />

    </div>
  );
}


//Spoiler
const Spoiler = ({header='+', open, children}) => {
  const [isOpen, setOpen] = useState(false)
  if (isOpen !== ' ') {
    open = isOpen
  }

  return (
      <div>
        <div onClick={() => setOpen(!isOpen)}> {header} </div>
        {isOpen && children}
      </div>
  )
}

// RangeInput

const RangeInput = ({min, max}) => {
  const [inputLen, setLength] = useState ('')
  let inputLength = inputLen.length
  let redInput
  if(inputLength <= min || inputLength >= max) {
    redInput= {color: 'red'}
  }

  return (
      <div>
        <input
            value = {inputLen}
            onChange = {e => setLength(e.target.value)}
            type="text"
            placeholder='Введите символы'
            style = {redInput}/>
      </div>
  )
}

// LoginForm:

const LoginForm = ({onLogin}) => {
  const [login, setLogin] = useState('')
  const [password, setPassword] = useState('')
  const lengthCheck = !(login.length >= 6 && password.length >= 6)

  return (
      <div>
        <input
            value={login}
            onChange = {event => setLogin(event.target.value)}
            type="text"
            placeholder="Login"/>
        <input
            value={password}
            type="password"
            placeholder="Password"
            onChange = {event => setPassword(event.target.value)}
        />
        <button
            type="submit"
            disabled={lengthCheck}
            onClick={() => onLogin({login, password})}>Login</button>
      </div>
  )
}

// PasswordConfirm
const PasswordConfirm = ({min}) => {
  const [minLen1, setMin1] = useState ('')
  const [minLen2, setMin2] = useState ('')

  let inputLength1 = minLen1.length
  let inputLength2 = minLen2.length

  let redInput1
  let redInput2

  if(inputLength1 <= min) {
    redInput1 = {color: 'red'}
  }

  if(inputLength2 <= min) {
    redInput2 = {color: 'red'}
  }

  if (inputLength1 !== inputLength2) {
    redInput1 = {color: 'red'}
    redInput2 = {color: 'red'}
  }

  return (
      <div>
        <input
            type='password'
            value = {minLen1}
            onChange = {e => setMin1(e.target.value)}
            placeholder='Введите пароль'
            style = {redInput1}/>

        <input
            type='password'
            value = {minLen2}
            onChange = {e => setMin2(e.target.value)}
            placeholder='Введите пароль'
            style = {redInput2}/>
      </div>
  )
}

//Timer на уроке

const TimerLessons = () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    let result = setInterval(() => setCount(count => count +1), 1000)
      console.log('Hello')

      return () => clearInterval(result)
  },[])
  console.log(count)
  return (
      <div>
        {count}
      </div>
  )
}

//Timer
const Timer= ({sec}) => {
    const [second, setSecond] = useState(sec)
    const [open, setOpen] = useState('')

    let h = parseInt(second/ 3600)
    let m = parseInt((second/ 60) - h*60)
    let s = parseInt(second - m*60 - h*60*60)

    if (h < 12 && h <= 0) {
        h = '0' + h
    } else if (m < 60 && m <= 0) {
        m = '0' + m
    } else if (s < 60 && s <= 0) {
        s = '0' + s
    }

    if (open) {
        const tick = setTimeout(() => setSecond (second - 1), 1000)
        if (second === 0) {
            clearTimeout(tick)
        }
    }

    return (
        <div>
            <h2>Timer</h2>
            <h3>{second} секунд</h3>
            <h4>{h}:{m}:{s}</h4>
            <button onClick={() => setOpen(open => open = !open)}>{!open ? `Начать отсчёт` : `Пауза`}</button>
        </div>
    )
}

//TimerControl
//Напишите компонент, с тремя полями ввода (часы, минуты и секунды) и кнопкой Start, по которой будет стартовать
// компонент Timer
const TimerControl = ({importantThing}) => {
    const [start, setStart] = useState(false)
    const [hour, setHours] = useState("")
    const [minute, setMinutes] = useState("")
    const [second, setSeconds] = useState("")

    return (
        <div>
            <input
            value={hour}
            type="number"
            placeholder='Введите часы'
            onChange = {e => setHours(e.target.value)}/>

            <input
            value={minute}
            type='number'
            placeholder='Введите минуты'
            onChange = {e => setMinutes(e.target.value)}/>

            <input
            value={second}
            type='number'
            placeholder='Введите секунды'
            onChange = {e => setSeconds(e.target.value)}/>

            <button onClick={() => setStart((start) => !start)}>Таймер</button>
            {start && <Timer sec={hour*60*6 + minute*6 + second}/>}

        </div>
    )
}

export default App;

import React, { useState } from 'react';

function TimerInput({ setTimer }) {
    const [hours, setHours] = useState(0);
    const [minutes, setMinutes] = useState(0);
    const [seconds, setSeconds] = useState(0);

    const startTimer = () => {
        const totalTime = hours * 3600 + minutes * 60 + seconds;
        setTimer(totalTime);
    };

    return (
        <div>
            <label>
                Hours:
                <input type="number" value={hours} onChange={e => setHours(e.target.value)} />
            </label>
            <label>
                Minutes:
                <input type="number" value={minutes} onChange={e => setMinutes(e.target.value)} />
            </label>
            <label>
                Seconds:
                <input type="number" value={seconds} onChange={e => setSeconds(e.target.value)} />
            </label>
            <button onClick={startTimer}>Start</button>
        </div>
    );
}

export default TimerInput;
